制作ノウハウ:CSS

WEB戦略

CSS & HTML

2011.11.23

制作ノウハウ:CSS

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


/*---------------------------------------
common(cssの初期化フォーマット)等に記述しているfontの指定が問題でPC別に表示がずれてしまう問題
------------------------------------------*/
以下にまとめたので確認する

★困っときのフォルダ(a-blog含む)\フォント\WEB(CSSの指定等)


/*---------------------------------------
中央配置
------------------------------------------*/
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 = .(ドットの意味)


/*------------------------------------------
floatのバグ
------------------------------------------*/
ラピスのギャラリー一覧でやったもの
float:leftでimgの高さを最小のイメージに合わせて指定しないと変な動きをする
実際に記述した内容

ul#gallery-hit-list li img{
    height:149px;
}

テキストより大きいイメージを項目マーク(菱形や丸)にするときはdivのコンテナーなどで大枠をつくりそこに指定してやるとうまくいく
(テキストがイメージの上や下に揃ってしまいセンターにいかない場合)
※以下のようにcenterを指定してやるのも忘れない
 background:url(.gif) no-repeat left center;

制作フォーマットは完璧
 もしズレが生じる場合はimp-common.cssなどから呼び出している記述が間違っている可能性がある


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


/*------------------------------------------
ローバルメニューのズレ
------------------------------------------*/
たまにグローバルメニューが微妙にズレる場合があるがこれはcssの計算ミスではなくFireworksで画像の作成時に
画像がズレている場合がほとんどなのでFireworks上で画像の位置修正をすれば直る
(Dreamweaverのデザイン表示の時でる点線を目印にすると調整しやすい)


/*------------------------------------------
アクセス解析のイメージ表示
------------------------------------------*/
ページの下にアクセス解析のイメージ表示が出てしまう場合Overflow:hiddenを使って非表示にする

/*------------------------------------------
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が必要


/*------------------------------------------
Firefoxでプルダウンのリンク領域
------------------------------------------*/
Firefoxでプルダウンのリンク領域がうまくいかない時はその横に他のリンクがないか確認する
(たいがいこのリンクの影響でリンクの打ち消し等のバグが起こる)

z-index:1;をmainmenu-containerに追記することで解決できる(ヴァンサンクでやっているので参考にする)
※z-index:1;とはレイヤーを上にする記述


/*------------------------------------------
レイアウトのズレ
------------------------------------------*/
レイアウトにズレがあった時、一番最初に疑うのはmarginとpaddingの値である
(たいがい事前に指定されている値が影響してい場合がほとんど)

優先順位を使って0pxにするしかない
(特に自作でないものの追加修正の時は必須)


/*------------------------------------------
title
------------------------------------------*/
文字飛ばしを使用する時は必ずtitleを入れる


/*------------------------------------------
グローバルメニュー等の表示のズレ
------------------------------------------*/
グローバルメニュー等の表示がズレていたら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;
}

このエントリーをはてなブックマークに追加

Page_Up