Hiromuブログ(夏)

どこにでもいるただのホロレンジャーです

CSSを覚えたのでテンプレみたいなものを作ってみた

せっかくCSSを覚えたので忘れないうちに自分なりのテンプレを作ってみました。

こちらで公開していますので気になる方はご覧ください。

 

こんな感じのWebサイトです。少しフラットデザインっぽいかもw

web_2column

 

せっかくなのでソースも貼り付けておきます。

 

HTMLファイル

<!DOCTYPE HTML>

h2タグ

pタグ

pタグ

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


  • list1
  • list2
  • list3

link

h2タグ

cell1cell2cell3
cell4cell5cell6
footer

 

 

CSSファイル

@charset "utf-8";

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -------------------- ここからオリジナル -------------------- */

/* 基本設定 */
body {
    font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
    background: #42413C;
    color: #000;
}

h1, h2, h3, h4, h5, h6, p {
    padding-right: 15px;
    padding-left: 15px;
}
ul, ol {
    padding: 0 15px 15px 40px;
}

a img {
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}

/* 全体の横幅設定 */
#container {
    width: 960px;
    background: #ffffff;
    margin: 0 auto; /* 中央揃え */
    overflow:hidden;/* 左右ボックスの高さを揃えるために必要 */
}


/* ヘッダー */
#header {
    background: #42acff;
}

#header .inner{
    width:960px;
    margin:0 auto;
    padding:15px 0px 10px 0px;
    display:table-cell;
    vertical-align:middle;
    overflow;hidden;
}

#logo {
    float:left;
}

#catch {
    float:left;
    color:#fff;
}

#social {
    float:right;
    width:280px;
    height:62px;
    margin:0px 15px 0px 0px;
    background:#fff;
    border:#aaa 1px solid;

}

/* グローバルナビゲーション */
#gnavi{
    clear:both;
}

#gnavi ul{
    width:960px;
    margin:0px auto;
    padding:0px 0px;
    background:#00ff00;
  overflow:hidden;/* ul要素内部でフロート解除 */
}
#gnavi li{
    float:left;
    background:#00ffff;
}
#gnavi a{
    display:block;
    width:192px;
    height:50px;
    background:url(../img/menu.png) no-repeat;
    text-indent:-9999px;/* メニューテキストを画面外に飛ばす */
    text-align:center;
    text-decoration:none;
    color:#f00;
}
#gnavi a:hover{
    background:#ffff00;
}

/* メインコンテンツ */
#content {
    float: left;
    width: 650px;
    height:600px;
    background: #cde9ff;
    padding: 15px 15px;
    padding-bottom: 10000px;/* 左右ボックスの高さを揃えるために必要 */
    margin-bottom: -10000px;
}

section {
    background:#fff;
    margin:0px 0px 15px 0px;
    padding:15px 15px 15px 15px;
}

#content h2 {
    border:#fff 1px solid;
    padding:5px 15px;
    background:#42acff;
    font-size:150%;
    color:#fff;
}

#content p {
    padding:5px 15px;
}

#content ol, #content ul {
    list-style: disc;
}

#content table{
    margin:15px 15px;
    width:588px;
    border:#42acff 1px solid;
    border-collapse:collapse;
}
#content th, #content td {
    border:#42acff 1px solid;
    width:10em;
    padding:5px 10px;
    background-color:#fff;
    text-align:left;
    vertical-align:center;
}


/* サイドバー */
#sidebar {
    float: right;
    width: 250px;
    background: #eeeeee;
    padding: 15px 15px;
    padding-bottom: 10000px;/* 左右ボックスの高さを揃えるために必要 */
    margin-bottom: -10000px;
}

aside {
    background:#fff;
    margin:0px 0px 15px 0px;
    padding:15px 0px 15px 0px;
}

/* フッター */
#footer {
    padding: 15px 15px;
    background: #42acff;
    color:#fff;
    position: relative;
    clear: both;
}