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

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

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

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

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

HTMLファイル

<!DOCTYPE HTML>

h2タグ

pタグ

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

list1
list2
list3

link

h2タグ

cell1	cell2	cell3
cell4	cell5	cell6

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 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;
}

Hiromuブログ

最近はこちら（https://zenn.dev/hiromu）が本体

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

h2タグ

h2タグ