読者です 読者をやめる 読者になる 読者になる

KaoLog

ぽんこつwebデザイナーのスキルのメモ

HTMLとcssについてまとめてみた

 

f:id:s2lybb:20170423134349p:plain

 

HTMLとは?

HTMLはHyper Text Markup Languageの略です。

HTMLはwebページを作成するために使用される使用されるマークアップの言語です。
(※マークアップ・・・しるしやタグをつけること)

f:id:s2lybb:20170423184921p:plain

 

マークアップにより、一つ一つのテキストに意味をもたせ、文章のどの部分にどんな枠割があるのかを示します。

マークアップにはルールがあり、必ず開始タグ終了タグが必要になります。

f:id:s2lybb:20170423194236p:plain

この開始タグ終了タグがあって、初めてマークアップ完成となります。 

 

HTMLの種類について

HTMLにはHTMLXHTMLHTML5があります。順にひとつずつ特徴をしょうかい紹介します。

 

◎ HTMLについて

・対応しているブラウザが多い

・記述に関するルールが少ない

・独自の要素の定義が不可

 

◎ XHTMLについて

・対応しているブラウザが多い

・記述に関するルールが多い

・独自の要素の定義が可能

 

◎ HTML5について

・記述的ルールが少ない

・他言語やファイルの読み込みが簡単

・検索エンジン等がより詳しくwebサイトの構造を把握できる

 

同じHTMLでも種類によって使用できるタグの数やDOCTYPE宣言、HTML構造が異なります。

今、世の中に出ているwebサイトの多くはHTML5がしようされていると思います。

 

cssとは?

次に、cssについてまとめていきたいと思います。

cssはcascading style sheetsの略です。

cssは文章の見栄え(レイアウトやデザイン)を指定する役割があります。

f:id:s2lybb:20170430192233p:plain

cssにより文字色を変えたり、線を引いたりなどより文章を伝えやすくすることができます。

 

cssの読み込み方法

cssの読み込み読み込み方には4つの方法があります。

1:直接指定する

<p style="color:blue;">文字が青色になります。</p>

htmlの開始タグにスペースを開け、style=と記入することで、cssの指定が可能となります。

 

2:htmlのhead内に記述して指定する

<style type="text/css">
p {
color: blue;
}
</style>

 

<p>文字が青色になります。</p>

htmlのheadタグ内にstyleタグを記入し、そこに指定を入れることで、cssが反映されます。

 

3:外部ファイルを読み込む

 

<link href="css/style.css" rel="stylesheet" media="all"/>

htmlのheadタグ内に上記のようにcssファイルを読み込みます

 

または@importを使用して、cssを読み込むことも可能です。

多くのwebサイトでは対応ブラウザが多いlink href=を使用しています。

また、cssを外部ファイル化することで、複数のページで同じスタイルを当てることができ、様々な箇所で流用することができます。

 

cssの書き方について

cssの書き方はとても簡単で、どこにどれをどのようにするかを指定します。

f:id:s2lybb:20170501163540p:plain

この「どこに」はセレクタと呼ばれ、「どれを」はプロパティ、「どのように」はと呼ばれています。

webサイトはこの基本を理解すれば後は指定する内容を変えるだけでいろいろな装飾をすることができます。