CSSの基本、それとCSSの芭蕉については以下をご覧ください。
HTML・CSSの書き方基本のまとめ
HTML・CSSを実際に書きながら使い方を復習してみます。
エディタを用意
まずテキストディタにHTMLで記述をしてみます。
HTMLとCSSを書くにはテキストエディターが必要です。
メモ帳のようなものから高度の機能を備えたものがありますが。
例えばATOMとか。
今回はシンプルなのに高機能な「Sublime Text」を使ってみます。
他のものでもよいのですが。
もしご興味があれば使ってみてください。はじめにsublime textのダウンロードページにアクセスします。
すると画面の上に以下のように表示されています。
MacならOS Xをクリック。
Windowsの場合、パソコンが32bitならWindowsを、64bitならWindows 64bitをクリックするとダウンロードが完了します。
ダウンロードしたファイルをクリックするとインストールが開始され。
インストールが完了すればすぐに使えるようになります。
HTML・CSSでの記述の仕方
タグの基本については以下で解説をしておきました。
文書の構造に目印をつけるための記号として使用されるHTMLタグを使用することで。
PCはその目印を認識し。
画面にどのような表示をすればよいかを理解します。
規則はそれほど難しくはありませんので。
もし私のようにHTMLを見ただけで散る肌が立つようなデジタルデバイドの方であってもなんとかなると思います。
またリンクを埋め込むことで画像やリンク、動画を埋め込むことができます。
さらに記事を装飾するCSSをHTMLとリンクすることによって記事の装飾ができます。
HTML文書と同じフォルダに入れてあるCSSファイルの名前を「external file.css」にした場合。
以下のように記述して紐付けをします。
<link rel="stylesheet" type="text/css" href="external file.css">
HTMLで上記内容を記述をしたら一つフォルダを作ってそこに保存していきます。
リンクは別として埋め込みたい動画や画像、またはCSSは同じフォルダに入れておく必要があります。
フォルダを作るのはそのフォルダに要素をまとめておくことが反映させるのに必要だからです。
同じ階層に入れておかないと反映されません。
今回は「HTML・CSS練習」と名前をつけておきます。
そこで例えば今回はデスクトップに「HTML・CSS練習」という名前をつけてフォルダを一つ作ってみました。
今回の簡単な記述のために同一フォルダの中に以下のものを入れました。
HTMLとCSS,画像と動画です。
実際にHTML・CSSを使って記事を書いて記事を作ってみよう
これらの素材を使って簡単な、以下のようなページを作ってみました。
HTMLの記述は以下のようにしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="external file.css">
<title>鳥は可愛い</title>
</head>
<body>
<h1>セキセイインコを飼いました。</h1>
<p>かわいいよ😁</p>
<img src="インコ３.jpg" alt="" width="400" height="533" />
<br>
<a href="https://maliajoy.com/" target="_blank" rel="noopener">サイトのトップページ</a>
<h2>インコはどこで飼う</h2>
<p>
眠る以外は部屋で放し飼いです。
<br>
<span >私の部屋</span>から隣の部屋に行ってもいいんですが
<br>
<span>うんちをする</span>のが困りものですね。
</p>
</dl>
<dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>
<table border="1">
<tbody>
<tr>
<th>インコ</th>
<th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td>
<td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td>
<td>性格は温厚であり人懐っこく長生き</td>
</tr>
<tr>
<td>コザクラインコ</td>
<td>ベッタリと甘えてくるよ</td>
</tr>
</tbody>
</table>
<h2>おまけ</h2>
インコはこんな動画に興味を持ちました。
<video src="Atoms - 132321.mp4" controls loop autoplay muted width="400px" height="300px"></video>
</body>
</html>
以下説明をしていきます。
宣言
まずこの文書は（HTMLまたはXHTMLの）どのバージョンで記述をしているのかということ表すために
今回はHTML5desuga,それを以下のようにして明らかにします。
<!DOCTYPE html>
<html>タグ
次にこのHTML文書は日本語で記述してあることを明らかにします。
<html lang="ja"> <html/>
<head>タグ
<html>の下に<head>タグを入れます。
<head>タグは必ず<html>タグのあと、<body>タグの前に置きます。
<head>タグで囲まれた内容はhtmlファイルの<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定するもので。
さらにスタイルシート（CSS）やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませます。
<meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="external file.css"> <title>鳥は可愛い</title> </head>
今回は文字化けしないやめにUTF-8という文字コードを指定し。
<meta charset="UTF-8">
別に作っておいた「external file.css」というCSSに紐づけしてあります。
<link rel="stylesheet" type="text/css" href="external file.css">
ちなみに紐づけした先のCSSは先程のHTML文書と同じフォルダに収納してあり。
以下のように記述してあります。
charset "UTF-8";
body {background-color: red}
span{color:yellow}
CSSフィルを開くと確かに以下のようになっています。
つまり、まず文字化けしないように文字コードを指定。
背景は赤。
それから<span>タグで囲まれた部分の文字を黄色に指定しました。
このようにしておくと紐づけされたHTML文書にその設定が反映されます。
後は<title>タグですが。
<title>鳥は可愛い</title>
<head>タグ内にあるタイトルは記事中ではなく。
お気に入りとか、タブにタイトルとして表示されるものです。
<body>タグ
<body>タグの中が実際に画面に表示されるものです。
今回はここによく使われるものをいくつかピックップして載せておきました。
<h1>セキセイインコを飼いました。</h1> <p>かわいいよ😁</p>
見出しは記事をわかりやすくするために重要で。
以下のように数字が小さいほど見出しが大きくなります。
見出し1です。
練習しています！
見出し２です。
練習しています！
実際の表示では以下のようになりました。
次に画像を貼ってみました。
<img src="インコ３.jpg" alt="" width="400" height="533" />
画像はimgタグで終了タグがありません。
タグの中に画像の場所を指定します。
画像は名前をつけてHTML文書と同じフォルダに入れておきます。
src="インコ３.jpg" alt="
サイズを指定します。
幅400px高さ533pxにしてあります。
" width="400" height="533"
次にリンクを張っておきました。
<a href="https://maliajoy.com/" target="_blank" rel="noopener">サイトのトップページ</a>
<a href=”リンクしたいページのURL”>ウエブ上に表記される文字</a>
が基本形です。
サイトのトップページと入れた場合実際の画面では以下のように表示されます。
「a href」はアンカーエイチレフと読み。
aタグは「以下はリンクである」ということを示し。
その次にはどんな種類のリンクかを表す属性タグが続きます。
hrefはhypertext referenceの略で「ハイパーテキストの参照」という意味で別ページに飛ばすリンクを指定するタグです。
今回はこのサイトのトップページに飛ぶようにしましたのでa href=の次に
を挿入します。
その他に以下のように記述しています。
target="_blank" rel="noopener"
target="_blank"
はリンクを別ページで開きなさいという指示をします。
<target >タグはリンク先の文書を開くフレームやウインドウを指定するための属性となっており
_blankは開くウインドウは新しいページで開きなさいという指示をします。
しかし現在その脆弱さが指摘されていて。
フィッシング詐欺にかかりやすくなるそうです。
そこで。
それを防ぐために
rel="noopener"
というものを入れてカバーします。
<rel>タグはrelation（関係）の略で。
noopener（関係ありません）を指定することで。
リンクを指定したページとリンクされたページは関係がないから辿れないようににします、という意味です。
<p>タグ<br>タグspanタグ
次は以下のように記述しました。
<h2>インコはどこで飼う</h2>
<p>
眠る以外は部屋で放し飼いです。
<br>
<span >私の部屋</span>から隣の部屋に行ってもいいんですが
<br>
<span >うんちをする</span>のが困りものですね。
</p>
すると実際の表示は以下のようになります。
<h2>は先程も説明したとおり見出しタグです。
Pタグは「Paragraph」の略で、「段落」を意味するタグです。
<p>~</p>まで一塊になります。
<br>タグは改行をしたい場合に使います。
一般的には<diiv>タグで囲うとそのまとまりの後は改行されますので
そちらを使うほうが多いとおもいます。
<span>タグはそれ自体では意味を持ちませんが。
そのタブに含まれるフレーズをグループ化することができます。
<diiv>タグも同じような働きをし。
<span>タグと<diiv>タグはまとまりを作るためのタグで。
これはCSSの活用のときに重要な働きをします。
今回はCSSの方に
span{color:yellow}
として<span>タグに囲まれた部分の文字は「黄色」にすると指定しておきました。
すると確かにその部分が黄色に表示されています。
この様に<span>タグはCSSで範囲を指定するときによく使われます。
同じような利用法としてclassとidがありますが。
これはまた別のHTML文書のところで解説をします。
リストを作成する<ol>・<ul>・<li>、<dl>・<dt>・<dd>
リストを付けるタグは4種類あります。
<li></li>はlist itemの略で<ol>?</ol>（順番のあるリスト）あるいは<ul>?</ul>（順番のないリスト）内の各項目を作成するときに使用します。
今回は説明付きリストを記述してあります。
<dl>はDefinition Listの略で、<dl>～</dl>の範囲が定義リストであることを表します。
定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。
<dt>とは「definition team」の略で、定義語を表すタグです。
<dd></dd>は「definition description」の略で、定義の説明を表すタグです。
定義リストを表す<dl>タグとその説明を表す<dd>タグを組み合わせて定義リストを記述します。
<dl> <dt>セキセイインコ</dt> <dd>かわいいかわいいかわいい</dd> <dt>オカメインコ</dt> <dd>とってもかわいい</dd> <dt>コザクラインコ</dt> <dd>めちゃくちゃかわいい</dd> </dl>
すると以下のように表示されます。
テーブルを作成する<table>・<tr>・<td>・<th>
次に表を作ってみました。
テーブルを作成するには以下の４つのタグが必要です。
table：表全体をはさむタグ。<table>～</table>の範囲が表になります。
tr：Table Row（テーブル行）の略。このタグを使用した数だけ行が追加されます。
th：Table Headerの略。テーブルの見出しのセルに使用します。
td：Table Dataの略。trの中でセルになります。表の中身が記述されるセルとなります。
また<table border=”1″>のborderは表の枠線の太さを決めるもの でこの場合線の太さを１pxに指定しています。
<table border="1"> <tbody> <tr> <th>インコ</th> <th>特徴</th> </tr> <tr> <td>セキセイインコ</td> <td>値段が手頃で声真似が得意</td> </tr> <tr> <td>オカメインコ</td> <td>性格は温厚であり人懐っこく長生き</td> </tr> <tr> <td>コザクラインコ</td> <td>ベッタリと甘えてくるよ</td> </tr> </tbody> </table>
実際の表示は以下のようになります。
動画の埋め込み
<h2>おまけ</h2> インコはこんな動画に興味を持ちました。 <video src="Atoms - 132321.mp4" controls loop autoplay muted width="400px" height="300px"></video>
実際の表示はこんな感じになります。
動画埋め込みタグにはifarmeタグとvideoタグがあります。
YouTubeの動画はifarmeタグを使っていますが。
ifarmeタグは廃止になるということです。
なのでvideoタグが使えるようになっていれば良いと思います。
HTML文書と同じ階層（フォルダ）に動画ファイルを用意し。
その名前を入れればそれだけでOKです。
<video src="動画の名前" controls></video>が基本の形になります。
controlsはコントロールパネルを表示します。
これがないと不便ですので大概の場合は入れていきたいものです。
controlsのあとに autoplay（自動再生） loop（繰り返し再生）width/height（横幅と高さを指定する）などの属性を付け加えることができます。
まとめ
HTML・CSSは実際に作業をしながら覚えていくのが一番楽だと思います。
次にCSSの使い方を中心にしたものを作りながらCSSのセレクタとプロパティと値の基本についてやっていきたいと思います。
次の記事
この記事へのコメントはありません。