CSS(258)

258follower
harada さんのアバター 1,309views

chromeでデフォルトで反応するテキスト入力フォームの黄色い背景色を変更する

CSSで下記のように指定することで、chromeでオートコンプリート後に表示される背景色を変更できます。 input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px whit... 2015年4月1日
Yukimi Sato さんのアバター 6,196views

【CSS】デフォルトスタイルを無効にする「appearance: none」

フォーム関連のタグに向いているそうです。 参考:フォーム周りで覚えておくと便利なCSS Snippets input, button, textarea, select { -webkit-appearance: none; ... 2015年3月27日
harada さんのアバター 16views

利用言語によってスタイルを変更する

現在はあまり利用することはなさそうですが、多国語対応のWebサイトやサービスを作成するときに利用できそうです。 :lang(ja){ font-style:normal; } // 日本語の場合 :lang(en-US){ font-st... 2015年3月24日
goto_jp さんのアバター 336views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

clearfixでfloatを解除する

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

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

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

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

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