見出し画像

プログラミング学習　１３日目

かな山

1,帰ってきたHTML/CSS（ど基礎編）

紆余曲折あって、HTML/CSSの復習に帰ってきた。
ど基礎をここで振り返って自分の中の土台をしっかりさせたい！

そもそもHTML/CSSとは、

HTML　＝　文章の構造を決める、骨組みになる役割
CSS　＝　HTMLのデザインを変更しれ、デコる役割

ちなみに、HTML/CSSで出来ないことがあり

複雑なアニメーションや、動くページ
チャット・掲示板・問い合わせフォームのような仕組み

こういった機能を追加するには、JavaScriptや、サーバサイドのスクリプト言語（サーバーで動く簡単な方の言語）が必要になる。

主なサーバーサイドのスクリプト言語には、

Ruby
PHP
Java
Node.js（JavaScriptをサーバーサイドで使えるようにするライブラリ）

が有名。

2,HTMLのレイアウト

Webページは大きく分けると、3つに分けれる！
それが、ヘッダー、コンテンツ、フッダー、の3つ。

・ヘッダー
そのページの一番上にあるやつ。ロゴとかナビゲーション（メニュー部分で目次がまとめられている）ログインボタンがある。
最初に目に入るので、一番の訴求ポイントを伝える役割もある。

・コンテンツ
ページの中身。カラム（段組み）で構成されている。情報を整理してみやすくするテクニック。何段の構成を行うかで、複数の伝えたい情報を分けて直感的にわかるようにする。
コンテンツが1列に段組しているものをシングルカラムレイアウト。
コンテンツが2、3、4…列など複数の列に段組しているものはマルチカラムレイアウトと呼ばれる。（サイドバーなど）

・フッター
ページの一番下にあるやつ。ヘッダーに表示していないナビゲーションや、SNSアカウントのリンク、コピーライト（そのサイトを誰が作成したかわかるようにして、勝手にコピーすんなよ！という感じ）とかが、記述されてる部分。

最近は、スマホ等で、PC画面以外でサイトを閲覧することが多いので、画面サイズに合わせてサイトのデザイン、レイアウトを変更することが多い。
こういったデザインを、

レスポンシブウェブデザイン

と呼ばれている。スマホは縦長が多いので、近年はシングルカラムレイアウトが主流らしい。

3,ヘッダ情報とは

HTMLには、Webページには表示されない部分でヘッダ情報という部分がある。

<!DOCTYPE html>
<html lang="ja">

# ここから
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
# ここまで

<body>
 
</body>
</html>

<head></head>で囲われている部分。文書のタイトル（ブラウザのタグに表示される部分）、言語（ここ言語は日本語、英語とかの言語）、エンコーディングの指定、viewportの指定、などがある。

ちなみに、エンコーディング、viewportとは、

・エンコーディング
記述している文字をどんなルールで読み込むかを指定するやつ。
ミスると所謂文字化けを起こすよ。

・viewport
画面の表示域を設定するやつで、画面表示をうまく調整してくれる。
これがないと、PC画面のページをスマホ画面にそのまま縮小してちょー見ずらくなっちゃう。

4,CSSの記述について

# CSS
h1 {
    color: red;
};

上記のCSSの記述で、それぞれの項目に名前がある。
h1　＝　セレクタ（多分選択的な意味）
color　＝　プロパティ（直訳だと特性とか。自分の中では、能力の箱ってイメージ）
red　＝　値（そのまんま。自分のイメージをプロパティとつなげると、能力の箱から特定の能力を選び発動させる的な感じ）

いいなと思ったら応援しよう！