見出し画像
Photo by golchiki

HTMLとCSSの基礎について

YUTO

この記事はHTMLとCSSの基礎について説明したものになります。

HTMLの基礎

HTML(HyperText Markup Language)とは、ウェブページを作成するために開発された言語です。
ここで、HyperTextとは複数の文章を結びつけるためのテキストです。
Markupとは目印をつけるという意味であり、文章構造の各部分が、どのような役割を持つのかを示します。 例えば、見出し・段落・表・リストなど、文章構造の中で各部分が果たしている役割が分かるように目印をつけます。
こうした見出し・段落・表・リストなどの文書内の各部分を要素（element）と呼びます。
その要素を組み合わせることでウェブページができます。

要素について

要素は以下の書式にて書かれます。

<開始タグ>文章<終了タグ>

ここで、タグとは文書の中で果たしている役割を宣言するものになります。
また開始タグに属性を書くことがあります。属性とはその要素にどんな設定を付けて欲しいのかを書くものであり、属性名と属性値の組み合わせで書かれます。つまり、開始タグは以下のようにして書きます。

<要素名 属性名 = "属性値">

HTMLの基本的な文章構造について

HTML文書は一般的に以下のように書かれます。

<!DOCTYPE html>

<html lang="ja">

   <head>

       <meta charset="UTF-8">

       <title>サンプル</title>

   </head>

   <body>

       <h1>タイトル1</h1>
        <p>本文1</p>

    </body>

</html>

ドキュメントタイプ宣言
HTMLを書く時、先頭には必ず
<!DOCTYPE html>
と書きます。これを書く事でHTMLで書く事を宣言することになります。

html要素
HTMLで書かれた文書であることを指定する要素であり
<html>文章</html>
と書かれます。
ここで、
<html lang = "ja">
とは、html内に書かれる文章は日本語だと言う事を宣言する意味です。

head要素
ウォブページ本文に表示されない設定を記述する要素であり
<head>文章</head>
と書かれます。
ここで文字コードや文書のタイトル、CSSやJavaScriptの読み込み等を宣言します。また、NEMLOGではこの要素をユーザーには使えませんし、またJavaScriptを読み込む事はできません。

body要素
Webページに表示したい内容を記述する要素であり
<body>文章</body>
と書かれます。NEMLOGで記事を書く際は、body要素のみ書く事になります。

head要素の中に書く要素について

head要素に書く要素を紹介します。

title要素
ブラウザで表示したいタイトルを表示する要素であり
<title>文章</title>
で書かれます。

meta要素
ページのメタデータ(付属的な情報)を記述する要素であり
<meta 属性名 = "属性値">
と書かれます。またこの要素には終了タグはありません。
ここで属性名とはメタデータの性質名を表し、属性値とは具体的な性質を表ます。属性名と属性値を合わせて属性といい、その要素にどんな設定を付けて欲しいのかを書きます。
例として

<meta charset="UTF-8">

とは、文字コード(charset)はUTF-8をこのページでは利用すると宣言したものになります。

script要素
Javascriptで書かれたコードやデータをHTML内に埋め込む要素であり
<script 属性名 = "属性値" ></script>
と書かれます。これはhead要素内に書く事ができるし、body要素内にも書く事もできます。
例文として以下を考えてみます。

<script src = "nem2-sdk-0.13.1.js"></script>

この要素は、NEM2-SDK-0.13.1.jsというJavascriptファイルを読み込むという意味です。
それにより、プログラミング言語Javascriptで書かれたSymbolの機能を記述したライブラリ(SDK)を読み出すことができ、このSDKを呼び出すことでSymbolの機能をWEBページで使う事ができます。

body要素の中に書く要素について

body要素に書く要素を紹介します。

p要素
一つの段落を表す要素です。pとは段落(paragraph)という意味です。
<p>文章</p>と書く事で文章を書く事になります。

<p>Symbol</p>


<h1>〜<h6>要素
この要素は文章の見出しを指定します。ここでhとは見出し(heading)という意味です。
h1が大見出し、h2はh1より下の見出し、h3、・・・、h6と続き、h7以降は存在しません。
この見出しをつける事で検索エンジンにページの構造を伝えます。また、h1はいくつも使っても構いませんが、できるならば1つのページにつき1つのみにした方が推奨されます。

<h1>見出し１</h1> 
 <p>本文</p>
<h2>見出し２</h2> 
 <p>本文</p>
<h3>見出し３</h3> 
 <p>本文</p>      
<h4>見出し４</h4> 
  <p>本文</p>                
<h5>見出し５</h5>
  <p>本文</p>  
<h6>見出し６</h6> 
  <p>本文</p>

br要素
文章中で改行を表すタグであり、<br/>と書きます。
この要素一つで開始タグと終了タグの両方の役割をしますので、<br/>と書くだけで改行したことになります。

<p>Catapultは<br/>テックビューロの技術です</p>

div要素
<div>文章</div>と書かれ、<div>で囲った部分を一つの要素としてグループ化することができる要素です。単体では何の機能を持ちません。ここでdivは分割(division)を意味します。

<div>
  <p>Symbolとmijinは</p>
  <p>Catapultエンジンを使った</p>
  <p>ブロックチェーンです。</p>
</div>

<div>
  <p>Symbolは</p>
  <p>エンタープライズ分野で活躍間違いなし!!</p>
<div>

divがなければ全体として5つのp要素で成り立つ文章したが、divタグがつく事で2つの要素で成り立つ文章になります。

a要素
a要素とは<a>文章</a>として書かれ、文章を書く部分がリンクになります。ここで、aはanchorの略称です。
a要素は属性としてhrefが使われ、リンク先を定義することになります。ここでhrefとはhypertext referenceの略で、直訳すると「ハイパーテキストの参照」という意味です。

<a href=“https://note.com/”>note</a>

この文章でnoteへのリンクを意味します。

img要素
img要素はimageの略称で、画像を表示する要素です。これは<img 属性/>で書かれ、終了タグはありません。
ここで、属性として以下があります。
　src : 情報元(source)を表し、画像ファイルの位置を表ます。
　width : 画像の横幅をピクセル値で指定します。省略すると元のサイズで表示されます。
　height : 画像の縦幅をピクセル値で指定します。省略すると元のサイズで表示されます。
　alt : 画像が読み込めない時に表示される文字列を出します。

<img src="https://storage.googleapis.com/nem-social/blog/50000/50000/50600/50645/1602858367imagetools1.jpg" alt="" width="544" height="726" />

ul要素、ol要素、li要素
この３つの要素はリストを作成する要素です。
ulとは順序なしリスト(unordered list)、olとは順序つきリスト(ordered list)、liはリストアイテム(list item)を意味します。ul、ol要素内にli要素を書く事で、項目を箇条書きで書く事になります。

ul要素は黒ポチのリストを作ります。

<ul>
  <li>bitcoin</li>
  <li>Ethereum</li>
  <li>Symbol</li>
</ul>

ol要素は数字のリストを作ります。

<ol>
  <li>alpaca</li>
  <li>bison</li>
  <li>cow</li>
</ol>

このほかに欲しい要素として
<span>要素、<table>要素、<form>要素、<input>要素、<select>要素、<textarea>要素、<botton>要素があり、それぞれ必要に応じて調べてください。
この他にいろいろな要素があるので、どんな要素があるのかを必要に応じて各々調べてみる必要があります。

id属性とclass属性について

HTML内にある要素は、好きな名前をつけることができます。その時に使うのがid属性とclass属性です。
以下はその例文です。

<p id = "data1">NEM</p>
<p class = "tag">Symbol</p>

id属性にある属性名をid名、class属性にある属性名をclass名といいます。CSSやJavascriptを使う時、id名やclass名を指定して装飾を加えます。
ここで、id属性の場合は同じid名を定義することはできませんが、class属性の場合は同じclass名は許されます。

目次リンクをつけてみる

これまで覚えた内容を活かして、記事に目次を付けてみます。

p要素もしくはh要素にID名を付ける

リンク元について
リンク元は以下のようにしてください。
<a href="#好きなID名">テキスト</a>
但し、好きなID名は小文字アルファベットのみになります。

リンク先について
リンク先は以下のようにしてください。
<p id="好きなID名">テキスト</p>
ここではp要素を使ったが、<h1>〜<h6>要素でも利用可能です。

例文

<h3>目次</h3>
<ul>
<li><a href="#a">タイトル1</a></li>
<li><a href="#b">タイトル2</a></li>
<li><a href="#c">タイトル3</a></li>
<li><a href="#d">タイトル4</a></li>
</ul>
<p>&nbsp;</p>
<h3 id="a">タイトル1</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3 id="b">タイトル2</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3 id="c">タイトル3</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3 id="d">タイトル4</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>


アンカー要素を用いて目次を作る

リンク元について
リンク元は以下のようにしてください。
<a href="#好きなID名">テキスト</a>
但し、好きなID名は小文字アルファベットのみになります。

リンク先について
リンク先は以下のようにしてください。
<a id="好きなID名"></a>
ここで、好きなID名は半角アルファベットのみになります。

例文

<h3>目次</h3>
<ul>
<li><a href="#a">タイトル1</a></li>
<li><a href="#b">タイトル2</a></li>
<li><a href="#c">タイトル3</a></li>
<li><a href="#d">タイトル4</a></li>
</ul>
<p>&nbsp;</p>
<h3><a id="a"></a>タイトル1</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3 > <a id="b"></a> タイトル2</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3> <a id="c"></a>タイトル3</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>
<h3><a id="d"></a>タイトル4</h3>
<p>タイトルの内容</p>
<p>&nbsp;</p>

CSSの基礎

HTMLの見た目を変更する言語であるCSSについて説明します。CSS(Cascading Style Sheets) とは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定する言語」です。それにより、ウェブページの見た目を変更することができます。
CSSの書き方は以下のようになります。

セレクタ{プロパティ:値;}

ここで、値の最後には「 ; 」をつけてください。
波括弧の部分が『宣言ブロック』と呼ばれます。その中にあるプロパティで変更したい項目を指定し、そのプロパティを具体的にどのようにして決めるのかを記述するのが値になります。
具体的に以下の例文について説明します。

p { font-size: 18px;}

pはセレクタであり、p要素に対して適用することを宣言します。宣言ブロックをみると、プロパティはfont-sizeとなっています。これは、p要素で書かれている文字サイズについて適用することをいっています。値が18ptなので、p要素にある文章の文字サイズは18ptにするという意味になります。

本項目では、くわしくCSSについて説明をしていきます。

CSSを記述する場所について

CSSを記述する方法は3つあります。

(1)外部CSSファイルに記述する
『.css』という拡張子をつけたテキストファイルにCSSを記述する方法です。
記述したら、head要素内にlink要素を書き、その外部CSSファイルを読み込ませます。

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

　relはrelationの略称であり、今書いているHTMファイルとhrefで指定したファイルとの関係性を指定しています。ここでは、stylesheetと書く事でhrefで指定しているファイルはCSSファイルであることを言ってることになります。
　hrefではCSSが書かれたテクストファイルのPC上の場所を記述します。

(2) style要素の中に記述する
style要素の中にCSSを書く方法です。これはhead要素の中に記述します。

<style>
    p {
        font-size: 18px;
        font-weight: bold;
    }
</style>

ここで、style要素はbody要素内では書かない事に注意してください。

(3) style属性として要素内に記述する
要素内にStyle属性として直接記述する方法です。

<p style="font-size: 12px ; background-color: red ; ">Symbol</p>

セレクタについて

セレクタとはどの要素に対して装飾を適用したいのかを書くものになります。ここでは3つに絞って紹介します。

(1) タイプセレクタ
指定した要素の全てに{ }で囲んだ事を適用するというセレクタです。

p{color:#ff000;}　/* p要素全てに適用 */
div{font-size:12pt;} /* div要素全てに適用 */
h2{background-color: red;} /* h2要素全てに適用 */

(2) idセレクタ
#を先頭につける事で、指定したid名の要素について{ }で囲んだ事を適用するセレクタです。

#xyz{color:#ff000;}

(3) classセレクタ
.(ピリオド)を先頭につける事で、指定したclass名の要素について{ }で囲んだ事を適用するセレクタです。

.xyz{color:#ff000;}

プロパティと値について

プロパティとは、指定したセレクタに対して適用させたいスタイルの種類のことを言います。その例は色やサイズ、位置などであり、それが値として記述することになります。
ここでは、外部CSSファイルにコードを記述するとし、代表的なものに絞って紹介します。

(1) colorプロパティ
　文字の色を指定するプロパティです。
　redやblueといった決められた色のキーワードや#000FFといったRGB16進数、grgba("225,0,0,1)といったRGBA10進数を値として記述することで文字の色を指定します。
　ここで、rgbaの第４引数は透明度を表し、0で透明、1で不透明とし、小数点2桁で記述します。

p{color:red;}
p{color:#ff000;}
p{color:rgba("255,0,0,1);}

(2) background-colorプロパティ
　背景色を指定するプロパティです。
　redやblueといった決められた色のキーワードや#000FFといったRGB16進数、grgba("225,0,0,1)といったRGBA10進数を値として記述することで文字の色を指定します。

p{backgroud-color:red;}
p{backgroud-color:#ff000;}
p{backgroud-color:rgba("255,0,0,1);}

(3) font-sizeプロパティ
文字サイズを指定するプロパティであり、emやpx、％で指定します

div {
font-size: 20px;
}

ここで値は、以下のようにして書きます。
10px ; ピクセル単位による文字サイズの大きさ
12pt : ポイント単位による文字サイズの大きさ
16em : あるピクセルを1としたときの倍率です。16pxを1emとしたとき、1.2emは19.2pxとなります。
80% : ブラウザの文字基準サイズに対する％の値です。

(4) font-weightプロパティ
文字の太さを指定するプロパティです。100~900で指定し、値が大きいほど太字です。

p{font-wight:500;}

(5) widthプロパティ
要素の幅を指定するプロパティです。

p{width: 200px;}

(6) heightプロパティ
要素の高さを指定するプロパティです。

p{height: 100px;}

(7) borderプロパティ
要素に枠線を指定するプロパティであり、「border:線種 幅 色」と書きます。

p{border: solid 1pt #ff0000;}

これで、要素を実線1px 赤色の線で囲むということです。
ここで線種について
solid : 実線
double : 二重線
dashed : 破線
dotted : 点線
など・・・

ここでは最低限の事のみを紹介したが、他にもプロパティがあるので、適宜どのようなプロパティがあるのかを調べる必要があります。

CSSフレームワークについて

　CSSフレームワークとは、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まったCSSファイルです。
　一からウェブページを作る際はCSSも最初から作る事になりますが、それでは手間がかかります。そこで短期間でWebサイトを実装したい場合や、デザイナー不在のチームがWebサービスを作る場合、CSSフレームワークを利用することによってデザイン実装の手間を減らせます。また、自作のCSSや複数のフレームワークと組み合わせて使う事もできます。どのようなCSSフレームワークがあるのかは、検索してみて確かめる必要があります。
　もし使うのならば、HTMLのhead要素内にlink要素を書き、そのCSSフレームワークを使う事を宣言してください。
　CSSフレームワークの一例としてUIKitがあるので、ぜひ調べてください。

参考資料

「ノンプログラマのためのjavascriptはじめの一歩」 外村和仁 (技術評論社)
ホームページの基本、HTMLとは何か？やさしく学ぶ基礎知識(https://nandemo-nobiru.com/web-5214)
CSSとは?(https://udemy.benesse.co.jp/development/web/what-is-css.html)

この記事が気に入ったらサポートをしてみませんか？