高卒の成り上がり

高卒がWEB制作学習でのアウトプットを行なっていきます

ゼロからのサイト制作①(headerの作成まで)

1、コーディング準備

デザインカンプとは

カンプ：comprehensive layout

デザインの完成(仕上がり)見本のこと

 

デザインカンプから作成するときはまずどのような構成になっているのかを確認する。

 

<!DOCTYPE html>
<!-- 言語選択 -->
<html lang="ja">
<head>
<!-- 文字コードの指定 -->
<meta charset="UTF-8">
<!-- レスポンシブ表示のための記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ファビコンの読み込み -->
<link rel="icon" href="favicon.ico">
<!-- タイトル -->
<title>初めてのLP</title>
<!-- サイトの概要。検索結果に表示される説明文 -->
<meta name="description" content="デイトラの初めてのLPの作成です">
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<header>

</header>

<section class="top">

</section>

<section class="about">

</section>

<section class="course">

</section>

<section class="contact"></section>
<footer>

</footer>
</body>
</html>

 

2.headerの作成

・サイト全体に効かせるCSSを書く

heightとwidthプロパティ

初期値はautoとなっているため親要素の幅いっぱいに広がる

％で幅を指定すると親要素に対する割合で幅が決定する。つまり親要素の幅によって変動する。

CSS入門講座 #06：サイズの指定 … 幅 width、高さ height - YouTube

初期値autoなのにheightやwidthをautoで指定する意味

(簡単に言うと)

事前に書いていたHTMLやCSSによってautoじゃなくなってることがあるから、それを上書きするために書く。

 

(細かく言うと)

親要素や要素の属性によって高さなどが指定されていたときにheight: auto;を省略すると高さが親要素や要素の属性で指定した値になってしますから

【CSS】height:autoって指定する意味ありますか？？

 

疑似要素と疑似クラス

疑似要素→要素の一部に対してスタイルを適用できるして方法

疑似クラス→指定の要素が特定の状態である場合にスタイルを適用させるセレクタ

【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ : ビジネスとIT活用に役立つ情報（株式会社アーティス）

 

containerクラスで全体に効かせるCSSを記述してcontainerクラス

をほとんどの親タグにつける

margin: auto;とは

中央に要素を配置できる。

CSSレイアウトを学ぶ

インライン要素にはmargin: auto;が効かせれないことがある

<a>aタグにpaddingやmarginが効かない</a> - Qiita

 

floatで気を付けること