自分用メモ
随時追記していく
※参考:Progateとは?魅力や欠点、学習の順序や心得など
参考にしたい記事まとめ
※参考:HTMLとは?head要素やbody要素、属性について解説
※参考:HTMLのhead要素とbody要素の記述について
※参考:HTMLで文字に線を引くタグについて
※参考:CSSの基礎知識。セレクタ、プロパティ、値とは?
※参考:CSSのレイアウトについて
※参考:ブロックレベル要素、インライン要素、インラインブロック要素のまとめ
HTML & CSS 初級編
①HTMLに触れてみよう
・見出しと段落・リンク
・画像
・リスト
プログラミングの世界へようこそ
Progate
は「リンク」という意味がある
HTMLでは、テキストに「タグ」と呼ばれる印を付ける
テキストをタグで囲むことによって、
テキストが「見出し」や「リンク」という意味を持つ事になる
★段落を作成する
Progateとは
オンラインプログラミング学習サービスです
段落を表すのは
要素
のpは「paragraph(段落)」の略
要素や
要素で囲んだテキストは改行されて表示される
Progate
リンクを作成するには要素を用いる
テキストをタグで囲むことで、リンクを作る事ができる
Progate
要素にリンクの飛び先を指定するには、href属性を追加する必要がある
のように書き、url部分にリンク先のURLを指定することで、
そのページへのリンクを作る事ができる
Progate
HTMLでは、hrefのような属性が数多くある
これらは「開始タグ」の中に記述する
値を指定する際は、ダブルクォーテーション(”)を忘れないように注意する
画像の表示には要素を用いる
のように、src属性のurlの部分に
画像のリンクを指定することで、画像が表示される
要素はテキストで囲むことがないので、終了タグは不要
★リストを作成する
- HTML
- PHP
- Ruby
リストを作るには
箇条書したいテキストをそれぞれ
入れ子構造がある場合は、インデント(字下げ)をする
インデントは必須ではないが、インデントをすることで
入れ子構造が複雑になっても親子関係がわかりやすくなる
②CSSに触れてみよう
・文字の色・文字の大きさと種類
・高さ、幅、背景の色
・タグに名前をつける
★文字の色(CSS)
・CSSは、HTMLの要素に対して色、大きさ、配置などを指定して
ページをデザインするための言語
Progate
h1 {
color: red;
}
セレクタ:どこの(h1要素の)
プロパティ:何を(colorを)
値:どうする(redにする)
これはh1です
これはpです
H1 {
color: #ff0000;
}
P {
color: #0000ff;
}
「color: #ff0000;」のように、16進数のカラーコードで色を指定する
(主要な色であれば、redなどのように指定できる)
→カラーコードは以下を参照
https://www.colordic.org/
https://html-color-codes.info/japanese/
CSSを書くときは、インデント(字下げ)をする
プロパティの末尾にはコロン(:)を、
行末にはセミコロン(;)をつける必要がある(どの行末にもセミコロンは必要)
★文字の大きさを変える
これはh1です
これはpです
H1 {
color: #ff0000;
font-size: 10px;
}
P {
color: #0000ff;
font-size: 40px;
}
文字の大きさを指定するにはfont-sizeプロパティを用いる
Font-sizeは、px(ピクセル)という単位を用いて指定する:書き忘れないように注意する
Hello World
Hello World
H1 {
font-family: selif;
}
P {
font-family: “Avenir Next”;
}
「font-familyプロパティ」を用いると、フォントの種類を指定できる
「font-family: フォント名;」とすることで、要素にそのフォントを適用できる
フォント名にスペースがある場合は、ダブルクォーテーションで囲む
Font-family: selif;
Font-family: YuMincho;
Font-family: sans-serif;
Font-family: “Lucida Grande”;
★背景色を変える(background-colorプロパティ)
これはh1です
これはpです
H1 {
background-color: #dddddd;
}
p {
background-color: #ffd800;
}
背景色を変えるにはbackground-colorプロパティを用いる
色の指定の方法はcolorプロパティと同じ
「#dddddd」のように同じ値が続く場合は「#ddd」と省略できる
★横幅、高さを変える
にんじゃわんこ

H1 {
width: 500px;
height: 80px;
background-color: #9de8ea;
}
Img {
width: 500px;
height: 200px;
}
要素の横幅、高さを変更したい時には、
それぞれwidthプロパティ、heightプロパティを用いる
Width, height共にpxで指定する:pxを書き忘れないように注意!
- HTML
- PHP
- Ruby
li{
color: red;
}
1つのリスト要素だけを赤くするにはどうすればいいのか?
- HTML
- PHP
- Ruby
.selected {
color: red;
}
要素はclasを使って名前をつける事ができる
Classをつけることにより、それぞれの要素を識別し、別のCSSを適用する事ができる
Class名でCSSを指定する場合、先頭にドット(.)が必要なので注意
- HTML
- PHP
- Ruby
.selected {
color: red;
}
複数の要素に同じclassをつけた場合、これら全てに同じCSSが適用される
- HTML
- PHP
- Ruby
.selected {
color: red;
}
「selected」というclass名がついている全てにHTML要素に
同じCSSが適用される
★classにCSSを指定する際の注意点
li{
color: red;
}
.selected {
color: blue;
}
ClassにCSSを指定する際に、先頭のドット(.)を忘れてしまうとCSSが適用されない
Classにはドットが必要で、タグの場合はドットが必要ない:これ重要
③レイアウトを作ろう
・HTMLの全体構造・全体のレイアウト
★HTMLの全体構造
Progateとは
オンラインプログラミング学習サービスです
実際のHTMLファイルには、決められた型を書いていく必要がある
要素の中に要素と要素が必要
要素にはページに関する情報、
要素には実際に表示したい内容を書く
の部分は「DOCTYPE宣言」と呼ばれるもので、
HTMLのバージョンを宣言するためのもの
今回は最新バージョンのHTML5を使うためを使用する
この内容はWebページには表示されない
★要素の中身
要素の中には、以下の3つを入れる
これらは定型文のようなもの
①文字コード:
②ページタイトル:
③CSSの読み込み:
①文字コードを指定することで、ページの文字化けを防ぐ事ができる
「UTF-8」は、HTMLで推奨されている文字コード
②<title>要素で指定されたタイトルは、ブラウザのタブ上に現れる
③HTMLからCSSを読み込むにはを用いる
のように、
Href属性で読み込むCSSファイルを指定する
Progate上では「「stylesheet.css」で記述したCSSが
結果に反映されていたが、本来はHTMLの方で読み込む必要がある
★レイアウト
①ヘッダー:ページ上部のメニュー
②メイン:ページの主なコンテンツ
③フッター:ページ下部のメニュー
「レイアウト」は、Webサイトを作る上で最も重要な部分
レイアウトは
要素によって構成される
要素の「div」は「division」の略、要素をグループ化するために使用される
「header」「main」「footer」というclass名を持った
3つの
「header」「main」「footer」というclass名を持った
3つの
要素でレイアウトを分割していく
・ヘッダーのレイアウト
・ヘッダーの余白
★ヘッダーの枠組み
④ヘッダーを作ろう
・ヘッダーの構造・ヘッダーのレイアウト
・ヘッダーの余白
★ヘッダーの枠組み
Progate
ここが「ロゴ」の要素
★リストのマークをなくす
li {
list-style: none;
}
要素にlist-styleプロパティを用いてnoneを指定すると、
リストの先頭のマークを消すことができる
→基本的に先頭の黒点は必要ないので、消してOK
ここから『ヘッダーリスト」の
要素
★リストのマークをなくす
- 黒点なし
- 黒点なし
li {
list-style: none;
}
リストの先頭のマークを消すことができる
→基本的に先頭の黒点は必要ないので、消してOK
- 要素で囲むと、黒点が先頭につく
- HTML
- PHP
- Ruby
- 要素全体に「float: left;」を指定することで、
それぞれの - 要素が1つずつ左から順番に並んでいき、横並びにする事ができる
「ヘッダーのロゴとリスト全体」をまとめて横並びにする事も可能
★余白の調整
Progate
.logo1 {
padding: 20px;
}
要素に余白を作りたい場合は「padding」を用いる
「padding: 値;」とすると、上下左右すべての方向に大きさの余白が追加される
Progate
.logo1 {
padding-top: 20px;
}
「padding-top」「padding-bottom」「padding-left」「padding-right」
このように「padding-●●: 値;」とすると、その方向のみに余白が追加される
★paddingをまとめて書く
.logo1 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
→これは個別に書いてるやつ
.logo {
padding: 20px 10px 20px 10px;
}
→これは省略形
→「top」「right」「bottom」「left」と、時計回りに指定されている
.logo {
padding: 20px 10px;
}
→これも省略形
→「top+bottom」「right+left」の順に指定される
値を4つ、スペース区切りで指定した場合
「上」「右」「下」「左」の順で適用される
値を2つ指定した場合「上下」「左右」の順に適用される
⑤フッターを作ろう
・フッターの構造
・フッターのレイアウト
- 要素で囲むと、数字が連番で付く
→このように、要素を要素で囲むことを「入れ子」と言う
→囲む方の要素を「親要素」、囲まれる要素を「子要素」と呼ぶ
【HTMLで箇条書き】ul・ol・liタグの使い方まとめ
基本的に「ulとli」もしくは「olとli」のセットで使う
箇条書きの1つ1つの文はliタグで挟む
複数のliタグの前後はulタグで挟む
★指定した要素を横並びにする(floatプロパティ)
li {
list-style: none;
float: left;
}
Floatプロパティを用いることで、指定した要素を横並びにする事ができる
「float: leftl」を指定すると、要素が左から順に並ぶ
この記事へのコメントはありません。