ryoheifのブックマーク / 2011年12月14日

ryoheif id:ryoheif

2011年12月14日のブックマーク (4件)

画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About
上記のHTMLは、ブロックレベル要素の中に、画像を1つ入れているだけです。このような記述は頻繁に使われるでしょう。このとき、文字サイズ(font-size)がとても小さかったり、行の高さ(line-height)が低かったり、表示に使われているフォントの種類によっては、あまり隙間が気にならない場合もあります。しかし、右図のように画像の下に隙間が見える場合もあります。画像の下に空く謎の隙間がハッキリ見える記述・装飾例以下のようにHTMLとCSSを記述すると、謎の隙間がハッキリ見えるでしょう。 <p> <img src="sea.jpg" alt="海"> quick doggy jump </p> 上記のHTMLでは、画像の隣に小文字のアルファベットを掲載しています。さらにCSSで、 p { font-size: 200%; line-height: 1.4; font-family:
ryoheif 2011/12/14
css

tips

チュートリアル
リンク
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
ryoheif 2011/12/14
css

ハック

tips

まとめ

CSSハック
リンク
『IE と Firefox の表示違いをCSSで直す方法』
アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザインブログをカスタマイズしていると、よく出くわす問題ですが、 IE（InternetExplorer）とFirefox とのブラウザ毎の表示違い。もちろん一つのコード（タグ）で、どちらも無事に表示できるにこしたことはないのですが、これはプロのコーダー（CSSやHTMLなどを組み立てる職業の方）でも頭を悩ます問題です。これらをCSSで解決する策を CSSハックと言います。本来は無闇やたらに使うことは、お勧めできませんの
ryoheif 2011/12/14
css

ハック
リンク
なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている，というケースがある。そういう場合，思わぬところでレイアウトが崩れ，要素の正確なポジショニングができず，「なんとなく」ずっと悩み続けることになる。その原因は，CSSの中級のノウハウが足りない，という点にある。一発で正確なレイアウトができるようになろう。そうなれば，CSS中級者だ。以下は，CSS中級者になるためのノウハウ。（１）要素の分類（１−１）インライン要素とブロック要素（１−２）置換インライン要素と非置換インライン要素（２）正確なポジショニング（２−１） positionのrelative/absoluteの使い方（２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い（２−３）要素内の高さ位置と，要素の高さ（２−４） floatの崩れない使い方（３）正確なテーブルレイ
ryoheif 2011/12/14
css

まとめ
リンク
- 2011年12月15日
- 2011年12月14日
- 2011年12月13日