CSS(255)

254follower
goto_jp さんのアバター 314views

Compassの落とし穴:グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記のように出力さ... 2015年3月17日
reotogashi さんのアバター 152views

CSSによるドロップダウンメニュー

本日の作業で技術的な進歩があまりなかったので個人的な勉強で学んだことをシェアする。 ドロップダウンメニューはCSSでもJQueryでも作ることができるが、今回はCSSで作ってみた。 CSSを書いてみると結構難しいのが分かる。 ブ... 2015年3月17日
Yukimi Sato さんのアバター 11,110views

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

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

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

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

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

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

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

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

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

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

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 さんのアバター 294views

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

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

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

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

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

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

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

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

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 さんのアバター 622views

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

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

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

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

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

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

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

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

古いIEのCSSハック

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