CSS(251)

251follower
yamagenii さんのアバター 26views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

If文でIE別にclassを付けてハックする

HTML <!--[if IE 7 ]> <html class="ie ie7" lang="ja"> <![endif]--> <!--[if IE 8 ]> <html cla... 2014年10月14日
goto_jp さんのアバター 299views

文章構成に役立つnowrapとwbrタグの合わせ技

Webデザインにおいて、テキストは文中改行(<br>)せずに流し込み、ブロック幅での自然改行に委ねるのが美しいとされていますが、そのうえでも文章の区切りのいい位置で改行させたいケースはあると思います。 そこで役立つのか下記のよ... 2014年10月10日