高卒の成り上がり

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

ゼロからサイトを作ってみよう③(画像の上に文字&レスポンシブ対応)

画像の上に文字

テキストの入った画像ではなく背景画像の上に文字を入れたほうがいい理由

コンピュータがサイトを見に来た時にテキストを読み込んでくれたらSEO的にいいから

 

レスポンシブ対応

floatをnoneにしてからtextalin: center;を効かす理由;

/* ==================================
スマホ用表示
====================================== */
/* 767px以下になった場合にこのレスポンシブを効かせますよって言う宣言。768がipadのwidthだから */
@media only screen and (max-width:767px) {
/* ==================================
header
====================================== */
.header-left {
float: none;
}

.header-title {
text-align: center;
}


}

 

floatをそのまま残していたらfloat: left;によって左によってしまって、その左に寄った中で真ん中にしようとしてしまうから

width:100%とwidth: autoの違い

paddingを含むか含まないかが違う。

paddingを含める→auto

paddingを含めない→100%

width:auto;とwidth:100%;の違い+中央寄せについて。 | バシャログ。

 

floatで横並びの画像とテキストを縦並びにする

floatを消して画像の横幅いっぱいにする

 

flexで横並びの画像を縦並びにする

widthを100%にし、それだけだとflexになっているため、横幅いっぱいにならないのでflex-wrap: wrap;に設定

 

 

ヘッダーの右側にclearによって余白ができたので解除する

clearのcontentが""になっているのでそれをnoneにして解除

 

youtu.be

 

ゼロからのサイト制作②(フッターの作成まで)

共通のcssを作成する

似たようなパーツがある場合まとめてCSSを作成することでより効率的にできる

/* ==================================
section共通クラス
====================================== */
.section {
padding: 60px 0;
}

.section-title {
font-size: 32px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}

 

画像とテキストをfloatで左右に並べる

widthを設定しなければ横幅いっぱいになるためうまく左右に分かれない

 

widthを48%にすることで左右に並べることができるようになる

 

pタグに直接floatタグをつけるのではなくabout-leftとabout-rightにfloatをつけることによって、後からpタグの下にpタグを追加した際にまたfloatをつけなくてよくなるので管理がしやすい

 

flexで横並べ

 

ここから

display: flex;

を加えるだけで子要素が横並びになる。

 

justify-content: space-between;
width: 30%;

を付け加えることで3つそれぞれの画像を30%の大きさにして等間隔にできる。

 

 

 

 

なぜ共通クラスはcontainerではなくsectionタグにつけるのか?

 

 

 

 

お問合せの作成

margin: auto;で中央になる理由

marginは初期値が0であり、ブロック要素だったら左右に余ったマージンがあるため、それを均等にしてブロック要素を中央にすることができる

【初心者・独学】margin: 0 auto;で要素を中央揃えにする。

そもそもブロック要素とは?

【初心者・独学】ブロックレベル要素とインライン要素の余白指定(padding, margin)

inputタグを属性で指定して作成する意味

inputタグを属性で指定して作成することで他の属性のinputタグ(type="text"など)を作成した時に効率化できる。

ボタン用のCSSを二つに分ける意味

ベースのボタンCSSを作ることによって他にボタンを作りたくなった時に応用が効くから

footerの作成

paddingの上下を20pxに設定したのにpadding-bottomが反映されていない

 

原因→float-rightで右に寄せたのにclearをつけていなかったから。

 

進行状況

youtu.be

 

ゼロからのサイト制作①(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で気を付けること

 



CSSに学ぶ

CSSの練習

CSSの基本ルール

セレクタ { プロパティ: 値; }

cssファイルは相対パスで指定するのが一般的

./→同じ階層の

../→一つ上の階層の

赤のH2

黄色のH2

太文字にする

子孫要素を指定する

子孫となるpです

子孫となるpです

直属の子孫要素だけを指定する

この色だけ変えたい

ここは変えない

ここも変えない

HTMLタグを書いてみる

 

H2 今日の気分

雑談会参加できてよかった〜!

H3 今度も参加してみよう!

朝活は他の人が起きてるからモチベーション上がるな!

アルパカさんのブログ

画像の表示

リストの表示

数字なしulタグ

  • りんご
  • みかん
  • バナナ

数字ありolタグ

  1. りんご
  2. みかん
  3. バナナ

コメントを入れる

グループにして整理するdivタグ

divタグはそれだけだと何の意味もないが1000行以上にも余裕でなるHTMLファイルをグループ化するのに役立つ

タグに属性をつける

属性は追加的な情報のことで、タグに名前をつけたりタグ内の要素の言語を指定したりと、膨大な種類があります。

よく使う属性一覧

  • id属性:様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
  • class属性:様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
  • src属性:imgタグ(画像を表示するタグ)で使われる。画像ファイルの置き場所を示す
  • href属性:aタグ(ハイパーリンク)で使われる。リンク先を示す

id属性とclass属性の使い分け

1.ページ内で使用できる回数

id属性は一回だけ

classは何度でも使える

2.優先順位

id属性のCSSの方が優先される

3.id属性を使ってページ内リンクを作成

WEBページで良くあるページ内での移動はid属性を使うことでできる。この機能があるためid属性は一つしか作れない

Cookieとは

Webサイトにアクセスした人の情報を一時的に保存する仕組みのこと

どんなところで使われているのか?

①Web サイト上で行われた作業を保存。IDやパスワードの入力などを省略。

サイトにログインした時にその後少し時間を置き、サイトを表示した時にログインしなくても良くなっているのはサーバー上に情報が保存されているから

 

②広告を自分の情報のものにカスタマイズできる

 

デメリット

バイスを他の人も使う場合はその人に情報を取られる可能性もある!