HTMLとCSSを使ってブラウザに表示
2022/03/25
今週のコラムを担当する金苗です。
初めてコラムを書きますが、皆さんに面白いと思ってもらえるよう頑張ります。
今回は難しいことをせずに、ブラウザに自分が作ったものを表示させる方法を紹介したいと思います。
Webサイトを作るときにまず必要になってくる、HTMLとCSSについて簡単に説明します。
まず、HTMLはコンピュータが理解できる、文章構成を指示する言葉です。
「この文章は見出しです」というような、注釈のようなものですね。
例えば、上記の「この文章は見出しです」をHTMLで書くとこうなります。
<h1>この文章は見出しです</h1>
このように書くと、<h1>~</h1>で書かれているものが、見出しにしたいとコンピュータが理解できます。
そしてHTMLにはひな形がありますのでこちらを見ながら解説をします。
あくまでひな形ですので、ここに追加で必要なものを足したり、不要なものを削除します。
<----------------------------------------->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトタイトル</title>
<style>
</style>
</head>
<body>
<!----- header----->
<header>ヘッダー</header>
<!----- /header ----->
<!----- main ----->
<article>
<h1>この文章は見出しです</h1>
<section>
<h2>見出し２</h2>
<p>コンテンツの内容</p>
</section>
</article>
<!----- /main ----->
<!----- footer ----->
<footer>フッター</footer>
<!----- /footer ----->
</body>
</html>
<----------------------------------------->
<!DOCTYPE html>
HTMLのバージョンなどのドキュメント情報をブラウザに伝えるために記述します。
おまじないのようなものなので、必須で記述しましょう。
<html lang="ja">
HTML文書で必ず必要なhtml要素です。
「lang=”ja”」で日本語であることを示しています。
<title>サイトタイトル</title>
ここで指定した文書は、ブラウザのタブに表示されます
<style></style>
ここでデザインを指定します。
<body></body>
bodyの中身は作成するWebサイトによって異なりますが、基本的には「header」「main」「footer」で構成されます。
次に、CSSはHTMLで作成された、文書のデザインに指定をする際に使う言葉です。
CSSの書き方はとてもシンプルです。
<----------------------------------------->
セレクタ {
プロパティ: 値
}
<----------------------------------------->
CSSの構文は上記の基本形を覚えるだけです。
ただし、CSSをマスターするためには「セレクタ」「プロパティ」「値」の理解が大切になります。
以下の例を基にそれぞれの基本用語について解説します。
例えば、先ほどのひな形の見出しの文字を赤色にしたいとなった時に書くとこうなります。
<style>
h1(セレクタ) {
color(プロパティ):#FF0000(値);
}
</style>
セレクタは、デザインを適用する対象を指定するものです。
HTMLで構造化された文章の「どの部分のデザインを変えたいのか？」をセレクタで指定します。
プロパティは、何を変えるかを指定します。
上記では、h1タグの「color」すなわち色を変えるということを指定しています。
プロパティの値は、どのようにデザインを変えるのかを決めています。
上記「#FF0000」というのは、色のコード値です。
この二つを使って実際にブラウザに表示させましょう。
デスクトップにindex.txtを作成します。
作成したテキストファイルにHTMLのひな形をコピーして貼り付けて保存します。
そのあとに.txtを.htmlに変更してブラウザで見てみましょう。
文字がブラウザで表示されていたら成功です。
このように、ちょっとした所からでも作る楽しさを積み上げて、
難しいことにもチャレンジしていきましょう。
以上になります。
ご清覧頂きありがとうございました。
----------------------------------------------------------------------
株式会社AQUARIZE
〒531-0072
大阪市北区豊崎3-6-8 TOビル404
電話番号 : 06-7777-2927
税理士の業務に合ったシステム
----------------------------------------------------------------------
