More than 5 years have passed since last update.

プログラミング初心者の備忘録ーヘッダーフッダー編

Posted at 2019-08-19

はじめに

未来電子テクノロジーでインターンをしているMaomao Maoです。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

今回は、ヘッダー・フッダーについてまとめようと思います。

まず、レイアウトは__div__要素によって構成していきます。
下記は、ヘッダーはheader、メインはmain、フッターはfooterと言うClass名を使っています。

ヘッダー
<div class="header">
</div>
メイン
<div class="main">
</div>
フッター
<div class="footer">
</div>

###ヘッダー・フッダーを編集する時に役立つ
・リストのマークをなくす

li{
　list-style: none;
}

・ヘッダーの中身を横並びにする

li{
　float: left;
}

・余白を調整する
__padding__を使います。

.logo1{
 padding: 20px;
}

・余白をある方向だけにする

.logo1{
 padding-top: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 padding-left: 20px;
}

・一部の文字の色を変える
__span__を使います。
例えばテキストを赤にしたいという文章の中で、__赤__のところの色だけを変えたい時、

HTML
<h1>
テキストを<span>赤</span>にしたい
</h1>

CSS
span{
　color: red;
}

・枠線をつける
__border__を使います。

.logo{
 border: 5px solid red;
}

・下線をつける

.logo{
 border-bottom: 5px solid red;
}