Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

CSSのメモ

このページを結構苦労しながら手探りで作っていましたが、 やはり効率が悪すぎるので今更ながらまじめにCSSを覚えました。

 

今回はこの本をけっこうじっくりと読みました。実践的なサイト作りについて丁寧に解説されており大変参考になりました。

 

割とまじめに読んだので一応レイアウトを組むぐらいのCSSはいちいち調べなくてもできるようになりました。

そしてCSS3はまだ時期尚早というかtext-shadowとborder-radiusとbox-shadowぐらい覚えておけばいいかなという気になりました。

 

 

ということでhtml含め、改めて知ったこととかの個人的メモ。

せっかくCSSを覚えたのだからこんな汚い箇条書きでなくきれいに表示しろって感じですが(li要素すら使ってない・・・)、それはまた別の機会にw

 

・imgはwidth, heightは指定しておいたほうがよい
⇒指定していないとレンダリングが遅くなるため

 

・textareaのrows属性、cols属性はCSSでサイズ指定する
⇒ブラウザによって表示サイズにばらつきがあるため

 

・emは現在使用しているフォントサイズを基準とした単位。
⇒横幅を10文字分にするといった指定が可能になる

 

・margin, padding, border, widthの関係

css

 

・id属性はソースコードの1か所を特定するためのもの、class属性は複数現れてもOK

 

・span要素は文書構造の意味はなし。文字列の装飾目的で利用可能

 

・<div class=”aaa bbb”>とスペースで区切って複数のclass名を設定可能

 

・background-image:url(./image.png);

background-position:right center;

セレクタに指定した要素をどこを起点にして配置するか設定可能

 

・CSS2.1まで(IE8以下に対応)の場合、画像を使わずに表現できるのはべた塗りで角が四角いものだけ

 

・左右marginの値をautoにすると、横幅を固定したボックスをセンタリングできる

 

・floatを利用した要素を解除する場合はclearプロパティを設定

 

・tableの境界線の二重線をなくすにはborder-collapse:collapse;を設定

 

ラジオボタンチェックボックスは要素が小さいためラベル自身をクリック可能にしておくとよい

label要素をinput要素と関連づけるには、label要素のfor属性値にinputo要素のid属性値を入れる

 

・カーソルの形状を変更

cursor:pointer;

 

・clearプロパティが設定されたボックスはmargin-topが利かなくなる

 

・子要素にfloatが設定されると、それを包む親要素は高さがなくなる

⇒対策① clearfix

⇒対策② overflow:hidden;を設定

 

・ブラウザの初期スタイルをリセット

リセットCSS

⇒*(ユニバーサルセレクタ)によるリセットは表示パフォーマンスが悪い

 

・横並びのメニュー作成

⇒サイズ指定したli要素をfloatで横並びにする

⇒ul要素でoverflow:hidden;を設定

⇒a要素をdisplay:block;でブロック化する

CSSスプライト(全メニューを1枚の画像で準備する)は表示パフォーマンスが良い

 

・中央揃えにする

⇒display:table-cellのvertical-alignプロパティ(ただしIE8以上のみ対応)

⇒position:absolute;でtop:50%; margin-top:-○px; (○はコンテンツの高さの1/2px)

 

・line-heightには原則単位を付けない。1.7はフォントサイズの1.7という意味

 

・JSファイルはCSSの読み込み記述より後に記述することが推奨されている