LoginSignup
2

More than 3 years have passed since last update.

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

Posted at

はじめに

未来電子テクノロジーでインターンをしている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;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2