トップ   編集 凍結解除 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS   ログイン

Webサイト制作関連/css tips

Last-modified: 2022-05-05 (木) 09:23:32

css tips

ボックスから文字がはみ出す場合の対処

  • overflowを使う
    visibleはみ出した内容を指定された幅や高さの内容領域からあふれて表示する
    hidden内容領域を超えるものは切り取られ、スクロールバーをつけない
    scroll内容領域を超える・超えないにかかわらず、常にスクロールバーをつける
    autoUAに依存、内容領域を超える場合はスクロールバーをつける

*autoが一番便利そう(スクロールバーを着けると見た目がよくない場合もあるので、はみ出した場合とどちらが良いか要検討)

  • word-break(IE限定)
    normal半角英数字のみ単語の切れ目で改行する
    break-all半角英数字、日本語共に単語の途中でも改行する
    keep-all半角英数字、日本語共に単語の切れ目で改行する

ボックスの配置

  • センタリング
    margin:0 auto;
  • 右寄せ
    margin-left: auto;
  • 左寄せ
    margin-right: auto;

ブラウザの規定のcssを初期化する

  • 下記のコードを貼り付ける
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td  { 
    	margin:0;
    	padding:0;
    }
    
    table {
    	border-collapse:collapse;
    	border-spacing:0;
    }
    
    img { 
    	border:0;
    }
    
    h1,h2,h3,h4,h5,h6 {
    	font-size:100%;
    	font-weight:normal;
    }
  • 以下のコード(全称セレクタの利用)だとレンダリングが遅くなるらしいので使わない。
    *{
      margin:0;
      padding:0;
    } 
  • Yahoo! UI Library: Reset CSSとかもyahooのサイトから読み込んでくるオーバヘッドを考慮して使わない。

Fontの指定

Fontサイズの指定

  • 多くのブラウザでデフォルトサイズは16pxとなっている。
  • px等で指定すると古いブラウザ等では可変できないらしい。
    したがってfont-sizeはキーワードで指定しておいた方が良い。
キーワードパーセントem
xx-large172.8%1.728em
x-large144%1.44em
large120%1.2em
medium100%1.0em
small80%0.8em
x-small64%0.64em
xx-small51.2%0.512em

行間(line-height)の指定

コメント