プログラミング独学記録|Progate『HTML&CSS初級編』①

こんにちは。まめ子です。

今週から、プログラミングの独学開始です。（詳しくは、こちらの記事を参照ください。）

プログラミング独学１週目の学習内容

現役エンジニアTakahiro.dev（@memorandumrail）さんの以下の記事のとおり、学習を進めていきます。

1週間目：プログラミングに触れてみよう

具体的なタスクは以下の通りです。

引用：1週間目：プログラミングに触れてみよう

Progate『HTML&CSS学習コース初級編』①

学んだことの備忘録です。学習内容全ては網羅できていませんが、一部だけでも記録しておきます。

見出しのつけ方

＜h1>…</h1>
＜h2>…</h2>
＜h3>…</h3>
＜h4>…</h4>
＜h5>…</h5>
＜h6>…</h6>

<h1>が最も大きく、<h6>が最も小さい。

段落

<P>…</P>

リンクの作成

＜a>…</a>
例）<a href="http://kakeijyuku.com"> 子育て主婦の出直し家計塾</a>

画像の表示

<img>　　※終了タグは不要
例）<img src="画像のURL">

リストを作成する

<ul>
<li>…</li>
<li>…</li>
</ul>

※<ul>で囲むと黒点、<ol＞で囲むと数字

インデント（字下げ）

　親子関係がわかるようにインデントを入れる。

CSS

・ HTML要素に対し、色・大きさ・配置などを指定。

・HTMLとは別ファイルに記述

・HTMLで用意した要素に対し、CSSを用いて「どこの」「何を」「どうするか」を指定する。

・対象（要素名）をセレクタ、変更項目をプロパティという。

・CSSを書くときもインデントする。

文字の色を変える

color:#ff0000;

※ff0000はカラーコード。

文字の大きさを変える

font-size：数字px;

例）h1｛
color:#ff0000;
font-size:10px;
　　｝

文字の種類を変える

font-family

背景色を変える

background-color

横幅・高さを変える

横幅：width 、高さ：height

特定の要素にCSSを適用する

class　を使って要素に名前をつける。
※class名で、CSSを指定する場合、先頭に「.」（ドット）が必要なので注意。

本日は、ここまで。また明日、報告します。