私のようにコピペでカスタマイズを行っていると、なかなかスクラッチから何か作ろうとしても、いざ何もできない自分に気付いたり、基本的なことを、いまだに何回も調べながら行う必要があり、割りと効率悪いなぁと我ながら思います。
あらためて自分がよく忘れる基本的なことをまとめておいて、調べるときも時間かからないように記事にしときたいと思います。これも一つのライフハックですね。
paddingとmarginの違い
いつもどちらか間違えてしまうので、何かゴロがないかと思いながら、
なんとなく、外マージンに内パディングで覚えることにしています。
こちらの記事あたりがわかりやすくまとまっています。
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
うまくいかない場合、これが原因かも？外の要素も中央寄せ
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
http://webdesignrecipes.com/css-blocklevel-elements/
わかりやすい。
ボタンの装飾
http://weboook.blog22.fc2.com/blog-entry-311.html
CSSの圧縮・復元
http://weboook.blog22.fc2.com/blog-entry-319.html
CSSのリセット
CSSだけでクリックイベント
http://weboook.blog22.fc2.com/blog-entry-361.html
とりあえず、今のところはこのあたりで。どんどん追加していきます。
完全に自分用のメモですいません。
[ad]