プログラミング初心者の備忘録ーヘッダーフッダー編
はじめに
未来電子テクノロジーでインターンをしている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;
}
Author And Source
この問題について(プログラミング初心者の備忘録ーヘッダーフッダー編), 我々は、より多くの情報をここで見つけました https://qiita.com/maomaomao/items/5771d6c2489635fe7a6b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .