広く浅く

広く浅くをモットーに色々なカテゴリで情報を発信します

スポンサードリンク

【超初心者向け】HTMLとCSSの関係について

こんにちは。konta_01です!

本日は前回までの紹介記事のようなものではなく、少しまじめな記事を。

 

HTMLとCSSについて書いていきます。

 

「ブログを始めて少し経過して、自分のWebページもこだわってみたいな」そんな方に向けての記事です。

 

「HTMLとは」「CSSとは」そのくらいの基礎レベルでのお話をお届けします。

可能であればPCで閲覧していただき、一緒に練習していただけると把握しやすいかもです。 

 

ではいってみましょー!!!

 

HTML編

HTMLとは「HyperText Markup Language」の頭文字を取った名称で、webページを作成するためには欠かせないマークアップ言語となります。

今、私ははてなブログで記事を作成し、公開していますが、このページもHTMLで作成されていますね。

 

HTMLではwebページ内で「文字を入力」したり「画像を挿入」したり、「別ページに遷移させる(リンクを付ける)」といった様々なことを実行することができます。

 

この「文字を入力」「画像を挿入」「別ページに遷移させる(リンクを付ける)」という動作、ご自身のブログでやったりしていませんか?

そうです。

WordPressやはてなブログで記事を作成する時「本文を入力」のように、文字を入力するスペースがありますよね。そこに入力することでwebページに表示できる状態にWordPressやはてなブログ側がマークアップ言語として修正してくれているんですね。

 

自動修正箇所

 で、今作成している記事がWordPressやはてなブログが修正してくれてHTMLとして表示されていることは理解できたとしても、「そもそもHTMLってどういう構造になっていてどういう風に表示されるの?」という疑問が出てくるかと思います。

 

そこで基本的なHTMLの構造について簡単に説明します。

HTMLはタグと呼ばれるものを使って命令を書いてあげます。

どんなHTMLでもほぼ変わらないタグのテンプレートを記載しておきます。

<html>←「これから記載される文書はHTMLで処理するんだぞ」という命令

<head>←「ここに記載される文書はタイトルや外部ファイルの読み込み(後述するCSSの時に使います)をするぞ」という命令

</head>

<body>←「この中に記述されるものたちは『body』として一括りにまとめるんだぞ」という命令

</body>

</html>

※</○○>というものはどの命令がどこまでの範囲で適用されるかを示すために必要です。<body>だけあっても「どこまでがbodyの範囲なんだ?」となってしまうので「ここまでがbodyだよ」と記述してあげます。

<html>
<head>
</head>
<body>
初めてのHTML
</body>
</html>

上記の例の中身をコピーしてメモ帳に貼り付け、「test.html」という名前で保存してください。

保存したtest.htmlをダブルクリックするとこのページが表示されると思います。

 

firstHTML

で、このようにしてHTMLで表示させているわけなんですが、冒頭で「リンクを付けたり、画像を挿入したり様々なことができる」と説明しましたよね。

そこで重要なのが「タグ」になるんですね。

少し前に「タグは命令してあげるもの」とお伝えしましたが、いろいろタグが存在するんですね。

この「リンクを付ける」「画像を挿入する」ということもタグを使って実践してみましょう。

 

「リンクを付ける」

<html>
<head>
</head>
<body>
<a href="https://www.hiroku-asaku.com/">初めてのHTML</a>
</body>
</html>

 

<実行結果>

f:id:konta_01:20190614155640p:plain

赤文字の部分が「Aタグ」と呼ばれる「この文字にリンクを付けてね。リンク先はここだよ。」という命令になります。

https://www.hiroku-asaku.com/」ここの部分ですが私のブログのTOPページに飛ぶように設定しています。飛ばしたいところのURLに変更して実際に試してみてください!

 

「画像を挿入する」

<html>
<head>
</head>
<body>
<img src="https://cdn.profile-image.st-hatena.com/users/konta_01/profile.png?1559890658">
</body>
</html>

 

<実行結果>

f:id:konta_01:20190614155530p:plain

赤字の部分が「imgタグ」と呼ばれる「ここに画像を挿入してね」という命令になります。

タグには<body></body>のようにどこまでが適用範囲なんだ?ということを分からせるために</○○>で終わるようにとお伝えしましたが、上記には</img>というものがございません。これは「ここに画像を挿入する」という命令なので「○○から××まで画像を挿入する」というような設定ができないため</img>が必要ない例となります。

https://cdn.profile-image.st-hatena.com/users/konta_01/profile.png?1559890658」は私のプロフィールアイコンの画像を指しており、<img>タグで表示させています。

皆さんもgoogle画像検索等で適当な画像を検索して「右クリック」「画像アドレスをコピー」して「"(ダブルクォーテーション)"の中身にペースト」して実際に試してみてください!

 

ここまで読んでくださった方はHTMLがどういう構造になっていて、どうやって表示しているのか少しは理解できたかと思います。

ただ、あくまでHTMLは「表示する」ということを実行しているだけなんですね。

他の人のブログや企業のHP等をみても分かる通り「画像はこれくらいの大きさ」「文字の色を変える」というような『デザイン』の部分は基本的にHTMLでは行っていないんですね。

その『デザイン』を可能にするのがCSSです。

CSSの説明をしますのでそのままCSS編をどうぞ!!! 

CSS編

CSSとは「Cascading Style Sheets」の頭文字を取ったもので、HTML等で作成されたwebページをスタイリングしてくれるものです。

ここでいうスタイリングするというのはwebページに表示される「文字」や「画像」という素材に対して「大きさ」や「色」 「配置」といった見え方に関する部分を整える役割を持っています。

 

ブログとか日記とかでよく文字の色・大きさが変わっていたり、中央寄せになっている文章を見かけませんか?

それはCSSでコントロールしているんですね。

 

早速ですが、一つ前のHTML編で作った「test.htm」にCSSを適用させてみましょう。

CSSは基本外部から「.css」という拡張子のファイルを読み込んで適用させるのですが今回はCSSに触れてもらうことに重点を置いているので先ほど作った「test.html」の中で一緒に記述しちゃいましょう。

 先ほど作った「test.html」の中身を少し修正します。

<head></head>というタグがありますよね。

そこを下記のように変更します。

<html>
<head>
<style type="text/css">ここでCSS使うよと宣言
body {text-align:center;}ここで「bodyで囲われている範囲に対して『text-align:center』を適用すると宣言」
</style>ここで閉じる
</head>
<body>
<img src="https://cdn.profile-image.st-hatena.com/users/konta_01/profile.png?1559890658">
</body>
</html>

 

<実行結果>

f:id:konta_01:20190614155845p:plain

{text-align:center;}の部分は{text-align:right;}で右寄せになり、{text-align:left;}で左寄せになります。

で、今上記でやったものが「bodyの領域すべてを中央寄せにする」というCSSでの処理になります。

「bodyの領域すべてを中央に寄せたい!!」という人がいれば上記の書き方で対応できるのですが、、、、そう、、「body中のテキストだけ中央に寄せたい」という人はこのやり方だと対応できないんですね。

その場合は以下のようになります。

<html>
<head>
<style type="text/css">
p {text-align:center;}
</style>
</head>
<body>
<p>テキスト1</p>
<img src="https://cdn.profile-image.st-hatena.com/users/konta_01/profile.png?1559890658">
<p>テキスト2</p>
</body>
</html>

 

<実行結果>

f:id:konta_01:20190614160521p:plain

文字だけ中央寄せにすることができましたね。

これはHTMLの「Pタグ」と呼ばれるタグ(pタグは段落を作りたいときに使用します。)を使い、画像は<body>の中に入っている状態。テキストは<body>の中の<p>の中に入っている状態という様に条件分けをしています。

条件分けをしたうえで「pタグ」にのみCSSを適用させています。

 

また先ほど記述した「p{text-align:center;}」ですがこれを以下のように変更してみます。

p{

text-align:center; (中央寄せ)

font-size: xx-large; (文字を大きく)

color:yellow; (文字の色を黄色に)

}

 そうすると実行結果はこうなります。

f:id:konta_01:20190614161721p:plain

このようにしてCSSで各素材たちに対してスタイリングするわけですね。

 

余談ですが私のブログのここもCSSで変更しています。

f:id:konta_01:20190614161942p:plain

これもCSSでこの「HTML編」と記載されている領域を囲うというようなCSSを記載しています。

 

最後に

本当に簡単にHTMLとCSSについて紹介しました。

HTMLで表示内容を作成してCSSでデザインをするといった構造になっていることは理解していただけましたでしょうか。

 

今回紹介した内容を少しまとめますね。

・HTMLの基本構造は<html><head></head><body></body></html>からなっている。

・「テキストの表示」や「リンクを付ける」「画像の挿入」といった様々なことを実行できる。

・実行するためには「タグ」が必要でそれぞれのタグでできることが限られている。

 「aタグはリンクを付けられる」「imgタグは画像を挿入できる」

(この他にもたくさんタグがあるので、この記事が需要ある様でしたらさらに発展させた記事を作成しましょうか...)

・CSSはHTMLで表示される内容を「どう見せるか」といったデザインの部分をコントロールすることができる。

・HTMLに記載した「任意のタグ」に対して別々にCSSでコントロールすることができる。

(CSSでコントロールできる範囲は非常に大きいので、今回は「大きさ」「色」「配置」という箇所に絞って説明しました。CSSについてももっと深いところまで学びたいという声があれば続編の作成を考えます!)

 

 

以上HTMLとCSSについてでした。

今回紹介した内容はほんっっっとうに入門の入門くらいのレベルなので簡単だったかもしれません。

ただ、私の伝え方的に「ここが分かりづらい!!!!」「分からない!!!」ということであればTwitterの方に連絡いただくか、本ブログのCONTACTからメール、または本記事にコメントをお願いいたします。一人ひとり解決できるまでお教えいたします!!

 

せっかく自分のwebページを持っているんだから、こういったwebの知識を得てオリジナルのデザインを作ってみたいですよね。

何かあれば相談に乗りますし、一緒に豊かなwebライフを目指しましょう!!

 

それではまた^^