概要
Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。
<head>要素の中身
<head>要素はには以下の要素が含まれる。
- 文字コードの指定
- ページのタイトルの設定(ブラウザのタブに表示される)
- CSSの読み込み
書き方は以下。
link rel="stylesheet"でCSSを読み込むよ！と宣言
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
Webページのレイアウト
<div>でbody要素の中にレイアウトを構成する。
divはdivisionの略で要素をグループ化するために使用される。
これを使って、ヘッダー、メイン、フッターの要素を作る。
<div class="header">
</div>
<div class="main">
</div>
<div class="fotter">
</div>
ヘッダーの作り方
ヘッダーの中にロゴとリストを作ってみる。
<div class="header-logo">
LOGO
</div>
<div class="header-list">
<ul>
<li>fuga</li>
<li>moge</li>
</ul>
</div>
リストに黒点をつけない方法
CSSに以下のように書くと黒点がつかない
hoge.css
li{
list-style: none;
}
要素を横並びにする
要素を横並びにするにはfloat:leftをCSSで指定する。
floatの種類は3種類あり、left、right、noneである。
以下のURLにfloatで引っかかりそうな罠が乗っていた。
floatした要素の下に別の要素を配置したいときはclear:leftが必要みたい。
https://udemy.benesse.co.jp/design/web-design/css-float.html
hoge.css
.header-logo {
float: left;
font-size: 36px;
}
余白を入れる
余白を入れるにはCSSでpaddingを追加する。
paddingは上下左右に入れることができ、以下のように書く。
hoge.css
.hoge{
padding-top:20px;
padding-right:10px;
padding-bottom:30px;
padding-left:5px;
}
以下のように書くと左から、上右下左(上から時計回り)の順に余白のサイズを指定することができる。
hoge.css
.hoge{
padding:20px 10px 30px 5px;
}
また、以下のように書くと、上下に20px、左右に10pxを指定することができる。
hoge.css
.hoge{
padding:20px 10px;
}