よく忘れるHTML・CSSの基本的なこと

私のようにコピペでカスタマイズを行っていると、なかなかスクラッチから何か作ろうとしても、いざ何もできない自分に気付いたり、基本的なことを、いまだに何回も調べながら行う必要があり、割りと効率悪いなぁと我ながら思います。
HTML&CSS on Snow
あらためて自分がよく忘れる基本的なことをまとめておいて、調べるときも時間かからないように記事にしときたいと思います。これも一つのライフハックですね。

paddingとmarginの違い

いつもどちらか間違えてしまうので、何かゴロがないかと思いながら、
なんとなく、外マージンに内パディングで覚えることにしています。
こちらの記事あたりがわかりやすくまとまっています。

【CSS】もう2度と迷いたくないmarginとpaddingの違い


http://hac-design.com/css/margin.html

文の途中にリンクする

まず、***.htmlファイルの飛ばしたいところに
<a name=”〇〇”></a>と場所を特定する名前をつける。

それでリンクを貼る時に
<a href=”***.html#〇〇”>
と、○○に同じ名前を使用する。

hタグの後ろにid指定でもいい。
<h1 id=”〇〇”>

また同じ記事内だと
<a href=#〇〇>
だけでいける。

divとclassの違い

すごくわかりやすくまとめてくれています。
http://airrat.blog103.fc2.com/blog-entry-230.html

Role属性について


こちらがわかりやすかったです。
http://bost.bostudio.co.jp/2012/11/role.html

画像を横に並べる

<img src=”画像ファイルのURL”><img src=”画像ファイルのURL”><img src=”画像ファイルのURL”>・・・
でも横に並ぶ、ブラウザサイズによって、下段におりかえされる。

ブラウザサイズを無視して横に並べるには以下のようにTableを組む。

ただしこの方法ではスマホとかで見たとき酷いことになる。

画像の回り込み指定

topとleftの違い
上揃え <img align=”top”> 画像は左寄せ、文字は画像の右上に1行表示
左寄せ <img align=”left”> 画像は左寄せ、文字は画像の右上から複数行回り込み
http://www.dspt.net/html_tag/004_data/006.html

clearfixについて詳細

http://kojika17.com/2013/06/clearfix-2013.html

li class指定について

http://html-css.aimary.com/stylesheet/css_class.php

画像の上下左右の中央寄せ

http://wayohoo.com/programming/css/how-to-center-the-img-tag.html
http://blog.asial.co.jp/880
うまくいかない場合、これが原因かも?外の要素も中央寄せ

画像をCSSで中央揃えするときは、imgだけでなく外側にもtext-align:centerしなきゃだめだよ

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

CSSの優先度

http://www.tohoho-web.com/css/basic.htm#Important
! importantで無理やり指定もできる。

複数クラスのクラスセレクタの優先

http://www.tohoho-web.com/css/selector.htm#ClassSelector

子セレクタ

body > div
body要素の直の子要素である div要素に対してのみ適用される


  
← スタイルが適用される。
← スタイルは適用されない。

この他にも
h1 + div が隣接兄弟セレクタ
h1 ~ div が兄弟セレクタ
がある。

ブロックレベル要素とインライン要素

http://mozilla.gr.jp/standards/webtips0015.html

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ


わかりやすい。

ボタンの装飾

http://weboook.blog22.fc2.com/blog-entry-311.html

CSSの圧縮・復元

http://weboook.blog22.fc2.com/blog-entry-319.html

CSSのリセット

http://coliss.com/articles/build-websites/operation/css/2012-most-common-css-reset.html

CSSだけでクリックイベント

http://weboook.blog22.fc2.com/blog-entry-361.html

[CSS]この発想はなかった!inputとlabelを使って実装する美しいデザインのアコーディオン

とりあえず、今のところはこのあたりで。どんどん追加していきます。
完全に自分用のメモですいません。

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)