概要
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>
</div>
リストに黒点をつけない方法
CSSに以下のように書くと黒点がつかない
hoge.css
li{list-style:none;}