CSS(253)

251follower
Yukimi Sato さんのアバター 10,904views

CSSとJSでスクロールすると上部固定になるメニューを作る

もともとfixedしてない通常のメニューを対応させる想定です。 参考:CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る JavaScript <script> jQuery(functi... 2015年3月17日
Yukimi Sato さんのアバター 3,326views

CSSでグラデーションと背景画像を重ねる

参考:美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も! background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8))... 2015年3月2日
yamagenii さんのアバター 26views

ブラウザでの開発者ツールの主な機能

HTML/CSS/JavaScriptによる開発は簡単に動くので開発が容易な反面,不具合の原因特定が難しいです. そんなときwebブラウザに付属した開発者ツールが必須です Mozilla Firefox/Google Chrome/Mic... 2015年2月23日
harada さんのアバター 2,765views

tableの中のdivの縦幅を100%で表示する

tableの中のdivにheight:100%;を効かせてセルの縦幅いっぱいにするには、tableとtd、divそれぞれにheight:100%;を指定する必要があるようです。 HTML例 <table> <tbody... 2015年2月4日
harada さんのアバター 180views

【IE7・IE8対応】画像にオンマウスでアイコンをオーバーレイ表示する

画像リンクにマウスオンしたさいに黒背景を透過させて説明を表示したい場合のソースの書き方です。 HTML <div class="imgBody"> <a target="_blank" href="リンクURL">... 2015年2月3日
harada さんのアバター 11views

aタグの擬似クラスの復習

a:link :未訪問リンクへの指定 a:visited :訪問済みリンクへの指定 a:hover :マウスホバーした時の指定 a:active :マウスでクリックしたときの指定 また、IE7では複数クラスの指定はできないため、IE7を含... 2015年2月2日
harada さんのアバター 47views

Firefoxで発生するボタンの横の余分なスペースを消す方法

chromeやIEではきちんと表示されるのにFirefoxでのみボタンの横に余分なスペースが発生してしまいます。 下記のCSSを追加することで消すことができます。 button::-moz-focus-inner { padding: 0... 2015年1月30日
harada さんのアバター 283views

helvetica指定で日本語フォントの位置がずれるバグ

font-familyでhelveticaを先頭に指定したところ、Firefoxとchromeのバージョン40〜から日本語を利用している際に位置がずれるというバグが発生していました。 このバグはhelveticaフォントが引き起こしている... 2015年1月29日
goto_jp さんのアバター 1,041views

CSS3:背景色アニメーション

See the Pen GgmbBv by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSのみでbodyタグの背景色をアニメーションでじんわり変化させています。 サンプルはSassで書... 2015年1月22日
harada さんのアバター 606views

Firefoxとchromeでセレクトボックスに日本語を入力すると高さがずれる

セレクトボックスを2つ並べたもので、[→]などで[←]入力を行うUIがあります。 これを行っていて日本語を利用している場合、どちらかの要素が空になった場合に同じサイズを指定しても高さがずれてしまうことがあります。 この場合、高さを指定する... 2015年1月20日
goto_jp さんのアバター 96views

CSS3:n番目の要素を指定するセレクタ

p:nth-of-type(2) { color: #f00; } 「:nth-of-type()」を利用します。 上記の指定に対して下記HTMLのような状態になります。 <p>対象外</p> <p... 2015年1月14日
harada さんのアバター 2,905views

Firefoxにのみ対応させるCSSハック

下記のように記述します。 @-moz-document url-prefix() { button { line-height: -moz-block-height; } } 参考:Chromeのみ、Firefoxのみ... 2015年1月13日
yusukem さんのアバター 52views

clearfixでfloatを解除する

HTML <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="me... 2014年12月18日
goto_jp さんのアバター 614views

jQuery & CSS:択一ハイライトメニュー

まずこちらサンプルをごらんください。 See the Pen jQuery menu hightlight by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. クリックしたメニュー項目をハイ... 2014年12月16日
nbeppu さんのアバター 161views

Windows のエイリアスフォントを確認する方法

Windows 環境に Helvetica がインストールされていない場合、CSS で Helvetica の指定された文字については Arial が適用されます。 これは自動的にエイリアスが効いているためです。 このようにマッピングさ... 2014年12月1日
goto_jp さんのアバター 50views

隣接セレクタと擬似クラスの合わせ技

<div class="class1"> ~ </div> <div> <ul> <li>~</li> ←このの最初の<li>にスタ... 2014年11月25日
goto_jp さんのアバター 352views

CSS:IE専用「filter」によるalphaが一定条件下でバグる

IE8以前ではCSSの「opacity」プロパティは使えず、代わりに下記のIE独自仕様のfilterプロパティで再現することができました。 filter: alpha(opacity=80); また同様にIE8以前は影を落とす「box... 2014年11月20日
goto_jp さんのアバター 399views

古いIEのCSSハック

プロパティごとに記述するだけで適用バージョンを変えられる簡易的な手法をご紹介。 IE6 プロパティ頭に「_」を付ける。 .class { _margin: 0; } IE7 プロパティ頭に「*」を付ける。 .class {... 2014年11月17日
goto_jp さんのアバター 322views

CSS:IE専用「filter」によるグラデーションが一定条件下でバグる

.xxx a { ~ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr... 2014年11月17日
goto_jp さんのアバター 156views

IE7でdisplay:inline-blockを表現する

.inline-block { display: inline-block; *display: inline; zoom: 1; } IE7ではinline-blockの値が存在しないため、スターハックとzoomを使う。... 2014年10月20日