駆け出しウェブコーダーで序盤になにから始めればいいのかわからない方も多いかと思います(多くはないか…？)。なので今回、HTMLとCSSの基本的なタグ、プロパティ、記述ルールを解説します。
読むうえでわかりづらいと判断したものはこちらに説明があります。
<>の中にタグ名が入ったタグ
<>の中にタグ名、その直後に⁄が入ったタグ
開始タグ、終了タグ、または要素をつくるもののこと
開始タグと終了タグを含む、その間の記述内容(要素など)を内包するもの
ある要素から見た直下の要素のこと
ある要素から見た直上の要素のこと
ある要素から見てその要素の内部の要素全てのこと
margin、paddingともにCSSプロパティのひとつで、下画像を参考にpaddingは要素の縁(border)からコンテンツ(文字など)までの間で、marginは要素の縁から隣接するほかの要素のmarginまでの間のことです。適切な間がとれているとデザイン的に優れたり段落の認識がしやすくなります。
<p class="クラス名">のクラス名部分や<img src="<ファイルのパス>" alt="<画像の説明>"のファイルのパス、画像の説明文部分などの、開始タグのタグ名の後に続くオプションのようなものです。
HTMLの記述方法、一般的なタグ、基本知識を説明します。
こちらでは、使用をおすすめできないものを含めない一般的なタグを紹介します。
どこからどこまでがHTMLの記述なのか認識させるものと考えてください。実際にはタグでもなく、htmlタグに関連があるわけでもありませんが、開始タグの前に<!DOCTYPE html>"と形式を宣言することが推奨されます。marginの値はデフォルトで0ではありません。
html要素の子要素でheadタグ、bodyタグの順に並びます。この2つは必須ではありませんが、ざっくりと「読込内容」と「表示内容」と分別するものと認識してください。子要素には主にmetaタグ、linkタグ、titleタグ、scriptタグが挙げられます。
html要素の子要素でheadタグ、bodyタグの順に並びます。この2つは必須ではありませんが、ざっくりと「読込内容」と「表示内容」と分別するものと認識してください。主に表示するコンテンツを子要素にします。
1つのまとまりをつくる際に使われます。ひとつのhtmlを意味合いやコンテンツ、役割で分割するために使われます。divisionが元になっています。
ひとつの段落をつくる際に使われます。displayの値がデフォルトでblockになっています。paragraphが元になっています。
一部に何らかの長くない文を入れる場合に使われます。主にpタグ内の文の一部の性質や装飾を変更する場合に使われます。displayの値がデフォルトでinlineになっています。
ハイパーリンクを作成する際に使用します。単体でも機能はしますが、文章のデザインやCSSプロパティなどもあるのでpタグ内に収めることを推奨します。
ナンバリングしないリストを作成する際に使用します。liタグのmargin/padding以外にもこちらにもpadding/marginがあります。
ナンバリングリストを作成する際に使用します。liタグのmargin/padding以外にもこちらにもpadding/marginがあります。
ul/ol タグでリストの1項目を作成する際に使用します。リストを作る際にのみ使用することをおすすめします。見出しなどに使うと微妙な感じになってしまいます。
メタ情報を設定するタグです。name属性やproperty属性の値がいくつもあり、これだけで眠くなるので説明は省かせてもらいますm(_ _)m
主なものは
<meta charset="<utf-8やshift_jis(やっぱりutf-8がおすすめ)>">
<meta name="viewport" content="<このあたりは調べてください>">
<meta property="og:<sitenameかtitleかdescriptionかimage>" content="<内容>">
といった感じです。
メタ情報の中でも何かのファイルを読み込む場合に使うタグです。こちらも多すぎて説明ができないので省かせてもらいます。
いつも使うものは
<link rel="stylesheet" type="text⁄css" href="<ファイルのパス.css>">
<link rel="icon" type="image⁄png" href="<ファイルのパス.png>"
です。最近はtype属性はなくても割と大丈夫です。
こちらではHTMLの書き方のルールを簡単に説明します。
開始タグと終了タグで要素やコンテンツ(文字等)を囲んで１つの要素を作ります。
コードの上で改行しても文章の改行にはなりません。pタグで段落分けをするかbrタグを使って改行ができます。しかし、brタグを使うとデバイスの幅によってはおかしな部分での改行になることもしばしばなので、基本的にはあまり改行はせず、pタグで文章を段落ごとにひとまとめにすることをおすすめします(ある程度の長文の段落の移動ならすこしおかしな見た目の改行でも違和は生じにくいから)。
metaタグのような終了タグのないものは、xhtmlファイルとして閲覧される場合を考えて末尾をなんたらかんたら ⁄>とすることが推奨されていますが、ほとんどそんなユーザーはいないので、あまり気にしなくて大丈夫です。
imgタグやaタグのsrc属性やhref属性はあまり覚えられませんでしたが、そのあたりはやりながらおぼえられます。
CSSの記述方法、よく使うプロパティを紹介します。
よく使われるCSSプロパティ
要素の横幅です。デフォルトがautoですがdisplayの値がinlineならfit-content、blockなら横に伸びる感じです。
widthの最大の値を強制するものです。これ以上は大きくならないという値です。widthと使います。min-widthと併用可能です。絶対値でも相対値でも可能です。
widthの最小の値を強制するものです。これ以上は小さくならないという値です。widthと使います。max-widthと併用可能です。絶対値でも相対値でも可能です。
要素の縦幅です。デフォルトがautoですがfit-contentと同じ感じはします。
heightの最大の値を強制するものです。これ以上は大きくならないという値です。heightと使います。min-heightと併用可能です。絶対値でも相対値でも可能です。
heightの最小の値を強制するものです。これ以上は小さくならないという値です。heightと使います。max-heightと併用可能です。絶対値でも相対値でも可能です。
widthとheightで定められた大きさから要素の縁(border)までのスペースです。上下左右それぞれ指定できます。
要素の縁(border)からほかの隣接した要素のmarginまたはborderまでのスペースです。
border-style
線のスタイルです。なしでも要素のかどがトリムされます。
border-color
線の色です。カラー名や16進数、rgb(rgba)などで指定できます。
border-width
線の幅です。
border-radius
角丸の半径です。要素のwidthの半分の値が上限で、円になります。
要素の位置です。値はleftかcenterかrightです。
要素の色です。影響があるのはテキストだけになります。(たぶん…)
文字の大きさです。
フォントを選択します。フォントの名称(フォントファミリーの名称)に空白が含まれる場合は""で囲む必要があり、そうでなくとも囲むことで区別がしやすくなります。フォントの総称(総称フォントファミリー名)はその必要はありません。総称フォントファミリーを指定すると、それに合うフォントが自動選択されます。総称フォントファミリーの一覧はこちらのfont-family - CSS: カスケーディングスタイルシート | MDNからご確認ください。
主にpタグ内の折りたたまれた文章同士の行間の幅です。
background-color
その要素の背景色です。
省略m(_ _)m
inline
要素同士で隣接できるというものです。
block
要素同士で隣接できないというものです。
inline-block
私はあまり使いませんが、両方のお得な性質を持っているものの、inlineもしくはblockが使えるのであればそちらを使うというのが得策でしょう。flex
アイテムリストを作る時などに便利です。しかし、あなたたちが踏み入れていいような領域ではないので、使うことはとにかくおすすめできません。
CSSの基本的な書き方です。
基本は、セレクタとプロパティ、その値を指定して完了です。その他にも@mediaや@font-faceなどもありますが、そちらもどちゃくそ長くなってしまうため、次の機会とさせてもらいます。
値はpxや%、emなどがありますが、単位を相対値にすることでユーザーフレンドリー性が増します。おすすめは%とemです。
以下は上記の説明をわかりやすくするための例です。
p, a, span{padding: 5%;margin: 0px;}
.ClassName, #IdName {width: fit-content;height: fit-content;}
クラス属性がClassNameのTagname1の子孫要素のTagName2と、TagName3の子要素のTagName4と、TagName5の子要素のTagName6の子要素のTagName7がセレクタにある。
TagName1.ClassName TagName2, Tagname3 > Tagname4, TagName5 > TagName6 > TagName7 {color: white;background-color: black;}
この記事を通してHTML ⁄ CSSを理解し、楽しんでもらえたらうれしいです！そして、よろしければコーディング仲間としてnCreateに参加してもらえるとうれしいです！
ご閲覧ありがとうございました！
情報に誤りがあればご連絡ください。