AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

トップ > css > cssフレームワーク skeletonで雛型作成

cssフレームワーク skeletonで雛型作成

css

趣味のサイト作成にcssフレームワークのskeletonを使ってみることにしました

Bootstrapも触ってみたいなと思いつつ個人のサイトでは持て余しそうなので・・・

skeletonは非常にシンプルで必要最小限の機能だけ提供してくれます

構成はヘッダ、メニュー、メインコンテンツ、サイドメニュー、フッターという定番のやつ

サンプル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/skeleton.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="eight columns"><h1>サイト名</h1></div>
      <div class="two columns">atom</div>
      <div class="two columns">rss</div>
    </div>
    <div class="row">
      <ul>
        <li style="display:inline-block;padding:5px;">メニュー1</li>
        <li style="display:inline-block;padding:5px;">メニュー2</li>
        <li style="display:inline-block;padding:5px;">メニュー3</li>
        <li style="display:inline-block;padding:5px;">メニュー4</li>
      </ul>
    </div>
    <div class="row">
      <div class="nine columns">
        <section>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>  
        </section>
      </div>
      <div class="three columns">
        <aside>
          <h5>サイドメニュー</h5>
          <div>
             <ul>
              <li>サイドメニュー1</li>
              <li>サイドメニュー2</li>
              <li>サイドメニュー3</li>
             </ul>
          </div>
        </aside>
        <aside>
          <h5>スポンサーリンク</h5>
          <div>
             
          </div>
        </aside>
      </div>
    </div>
    <div>
      <div class="twelve columns">フッター</div>
    </div>
  </div>
</body>
</html>

サンプル
http://retro.kansai-fan.com/sample1.html

サンプル(ボーダー付)
http://retro.kansai-fan.com/sample2.html

normalize.cssとskeleton.cssを読み込めばあとはルールに従ってマークアップするだけ

グリッドは12カラムの構成

全体のdivのclassに”container”を指定、その子要素のdivに”row”を指定

その子要素を3カラムと9カラムにしたいならclassに"three columns"と"nine columns"を指定したdivを追加するだけ

グリッドレイアウトが非常に簡単に作成できました

サイト特有の装飾は独自のcssを作ればよいかと