[css][サンプル集]HTMLとcss(reset.css)のテンプレートコード

eh657883

はじめに

HPには様々なコードで成り立っていますが、どのHPにも共通して必要になるコードがあると思います。テンプレート化したら効率化できますし、なにより抜け漏れのチェック（書くべきものを書かれているか）もできます。

 

HTML

<html>
    <head>
        <meta charset="utf-8" />        
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
        <title>★タイトルを入れる★</title>
        <link rel="stylesheet" href="./css/main.css" />
        <link rel="icon" href="★path★/★ファイル名★.ico" />
    </head>
    <body>

    </body>
</html>
charset 文字化け防止です。HTMLファイル自体もutf-8で作成しましょう。
viewport
icon ブラウザタブに表示されるアイコン。

CSS

下記のソースコードは主に、「デフォルトの気に入らないスタイルをresetしちゃおう」です。

実際、様々な「reset.css」がweb上で公開されていたりします。

ただ、適当にreset.cssをダウンロードしても理解が深まらないので、「このreset処理毎回書いているなぁ」というのを頭に植え付けるためにも

自分用のreset.cssを作成していきます。(まだ経験が浅いのでこれからどんどん追記されると思います。）

@charset "utf-8";

*, ::after, ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

/* floatの解除 */
.clearfix::after {
　content: "";
　clear: both;
　display: block; 
}

/* リストのマーカーを削除 */
li {
    text-decoration: none;
}

/* 装飾を削除 */
a {
    text-decoration: none;
}
box-sizing レスポンシブ対応の場合、幅を%で指定することが多い。border-boxの場合、paddingとborderの幅をwidthに含まれるため、padding,borderを変更するたびにカラム落ちする心配がない。全量セレクタでは::after, ::beforeが対象にならないので別個定義している。
floatの解除 floatの子要素を持つ親要素に対してfloat解除用の空divを設置しています。

疑似要素を指定していることで、htmlに空divを記載する必要がないのでらくちんです。
li liはメニュなどで表示することもあり、マーカーの「・」が邪魔になる場合がある。
a 昨今はボタン形式のリンクが多い印象なので下線の装飾は削除でもいいかもしれないです。

 

 

コメントを残す