HTMLとCSS (中級編）①
こんにちは。おばちゃんですが順調にHTML中級編学習も完了し、なかなか楽しくお勉強させて貰っています。それでは以下がサマリーです。
★まずはWebページ全体のレイアウトにheaderとfooterを用いた一般的な方法。(HTML)
例： <body>
<header></header>
<div class="top-wrapper"></div>
<footer></footer>
</body>
★Webページトップ部分のレイアウト。（CSS)
- background-image:url(画像URL); → 背景画像を指定
- background-size:cover; → 1枚の画像で表示範囲を埋め尽くす。
★要素を中央に配置する（CSS)
- marginの左右をautoにすると画面の中央に配置できる
- marginをauto指定する際には必ず幅（width）を指定する。
- margin autoでは上下は指定できない。
例：.box{
width:300px;
margin: 0 (上下） auto（左右）;
}
★透明度や文字の間隔を調整
- opacity → 要素を透明するプロパティーで、透明度は0.0（完全に透名） 0.1（完全に不透明）。
- letter-spacing → 文字の間隔を指定するプロパティー
★<a>はボタンを作る要素だが、<a>はインライン要素のためwidthやheightが指定できない。
ブロック要素 (<div>など）
- width, height（指定可）
- margin, padding（指定可）
- 配置 （縦並び）
インラインブロック要素
- width, height（指定可）
- margin, padding（指定可）
- 配置 （横並び）
インライン要素（<a>タグなど）
- width, height（指定不可）
- margin, padding（左右のみ指定可）
- 配置 （横並び）
★ display → <a>タグは初期状態でインライン要素になっているが、displayプロパティーを使う事でインラインブロック要素に変更する。
display
- block（ブロック要素）
- inline-block （インラインブロック要素）
- inline （インライン要素）
★複数クラスの設定は半角スペースで区切る。(HTML)
例：<div class="btn blue"></div>
★レイアウトを整える (CSS)
:hover → カーソルを乗せた時に色を変える。
例： div:hover{
backfround-color"red"
}
★border-radius:値px; → ボタンの角を丸める。（CSS)
例：.box{
border-radius: 10px;
}
以上、今日はここまで。毎回の事ですがこうして要約してアウトプットする方が時間がかかる・・・それでは、to be continued....
