cssについてのメモ

2020年06月29日

/*—————————————
制作フォーマットでbodyにスタイルがきかない場合
——————————————*/
top.cssでbodyにスタイルをかけてしまっているのでそれを無効してやれば良い
（逆にTOPページだけヘッダーを変えたい場合は有効にする）

/*—————————————
中央配置
——————————————*/
widthを指定していればcssで
margin-left:auto
margin-right:auto
で中央に配置できる
※div aling=centerは効かない場合が多いので上記の方法で中央に配置するのが基本

/*—————————————
line-height（行間）
——————————————*/
line-height（行間）は1.2～1.3の範囲で指定する
※1は駄目×
※1.2というのが一般的

/*—————————————
アンカーリンクのズレ
——————————————*/
アンカーリンクの下のレイアウトが下にズレるのはその要素がdivで囲まれていないのが原因

/*—————————————
詳細リンクの意味
——————————————*/
%2f ＝ /(スラッシュの意味)
%2e ＝ .（ドットの意味）

/*——————————————
ネーム
——————————————*/
ローカルだとデータ名に大文字が入っていても表示されてしまうがサーバー上だと表示されないのでネームに気をつける
モダンブラウザではCSSにスペルミス（}} 半角スペース等）があると反映されないので注意する

/*——————————————
ulの.block
——————————————*/
ulを入れた場合初期フォーマットの.blockを必ず指定する
　リストマーク削除
　list-style-type: none;
　list-style: none;

/*——————————————
代替スタイルシート
——————————————*/
そもそもalternate(オルタネイト)とは「代替のもの」の略であり
imgなどで使うaltはこのalternateを省略した形である

文字の大きさを変更できる仕様にするときなどに使う
↓
<link rel=”alternate stylesheet” type=”text/css” href=”./css/small.css” title=”Small”>
CSSを切り替えるjavascriptが必要

/*——————————————
レイアウトのズレ
——————————————*/
レイアウトにズレがあった時、一番最初に疑うのはmarginとpaddingの値である
（たいがい事前に指定されている値が影響してい場合がほとんど）
↓
優先順位を使って0pxにするしかない
（特に自作でないものの追加修正の時は必須）

/*——————————————
グローバルメニュー等の表示のズレ
——————————————*/
グローバルメニュー等の表示がズレていたらaタグにfloatが入っていないか確認する

/*——————————————
親要素であるdivブロックに高さ
——————————————*/
親要素であるdivブロックに高さを持たせたい場合はクリアフィックスを指定する

/*——————————————
floatする場合はwidth
——————————————*/
floatする場合はwidthを指定するのが基本

/*——————————————
ローカルメニュー
——————————————*/
メニュー文字が改行しているとarrow.gifが半分見えなくなる問題
backgroundで指定しているarrow.gifをtopではなくcenterにしてやることで表示された

/*——————————————
基本的にdivの中には必ず要素が必要
——————————————*/
（ul/ol/p/h/table等）
aやimgを入れる場合も以下のようにするのが基本
<p><a href=””></a></p>
<p><img src=””></p>

/*——————————————
absolute
——————————————*/
absoluteは基本、テキストがあるブロックでかけると重なってしまう場合があるのでfloatと組み合わせるなど工夫したほうが危険性がない

/*——————————————
relative
——————————————*/
親ブロックにrelativeを指定して子ブロックにabsoluteを指定すると親ブロックの左端が基準値0,0となり
親ブロック内で子ブロックの位置（x、y軸の値）を指定できる

/*——————————————
レイアウトを中央にする
——————————————*/
（body要素に以下を加える）
body{
    text-align:center;
    background:#fff;
}

（div要素に以下を加える）
container{
width:780px
margin-left:auto;
margin-right:auto;
}

カテゴリ：WEBサイト【基礎】

« フォントのインストール 制作メモ »