HTMLとCSSの基礎知識 P.1 | NOR NO HACO / デザインのハコ

HTMLとCSSについて、初心者の方向けに記事を書いていきます。

私も独学で学びましたが、その際につまずいた箇所や注意する点など、なるべきわかりやすく書いていきますので参考になればと思います。

スポンサードリンク

HTMLとCSSの関係性

HTMLとCSSはとても重要な関係性にあります。ホームページなどはこの2つでほとんどが成り立っているといっても過言ではありません。まずは一つずつ理解していきましょう！

HTMLについて

WEBサイトに文字などを表示する為に必ず必要なデータになります。ヘッダー、サイドバー、フッターなどもHTMLに打ち込むことで存在しています。 HTMLにはバージョンがあり、今はHTML5が主流になっています。バージョンによっては、新しい機能や文章構造が増え、それにより需要のなくなったものが使えなくなっていくという感じです。例えば HTML4.01のマークアップ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> /* pagetitle */ </title>
<style type="text/css"> /* CSS */ </style>
<script type="text/javascript"> /* JavaScriptコード */ </script>
</head>
<body>

/* ココに記述したものがWEBサイトに表示される */

</body>
</html>

HTML5のマークアップ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> /* pagetitle */ </title>
<style> /* CSS */ </style>
<script> /* JavaScriptコード */ </script>
</head>
<body>

/* ココに記述したものがWEBサイトに表示される */

</body>
</html>

とても簡単になりましたね！

<!DOCTYPE>　・・・　HTMLのバージョンを宣言する言語です。

<html></html>　・・・　この中にHTMLを記述します。

<meta charset=”utf-8″>　･･･　文字化けを防ぐために記述します。

<title></title>　・・・　このHTMLのタイトル/ページ名を記述します。

<style></style>　・・・　CSSはHTML内にも記述できます。その際はこの中に記述します。※省略できます

<script></script>　・・・　javascriptを使用する際はこの中にコードを記述する必要があります。※省略できます

お気づきだと思いますが、HTMLでは開始タグ（<セレクタ>）と閉じタグ（</セレクタ>）を使うことがほとんどです。

開始タグと～閉じタグで挟んだものに、セレクタごとの指令を出す。といった感じです。下図のようにマークアップとタグとテキストによってWEB表示されるイメージ。

<div>とはタグで囲んだ単体・複数に名前を指定しグループを作ることができる万能タグです。指定する種類は「id」や「class」がありますが、2つには違いがあります。「id」は1つのHTMLページで1度しか使えませんが、「class」は何度も使うことができます。 HTMLは上に記述したものから処理を行っていきますが、その中で何度も使うグループか、そうでないかで使い分ければいいと思います。

CSSについて

HTMLに記述をしたもの、idやclassをつけたものに対し、大きさや色など様々な視的効果をつけるのがCSSです。まずは、外部CSSファイルをHTMLと関連付ける必要があります。下図のように同じフォルダに入れてあげます。

imageフォルダにはサイト内で使用する画像を入れておきます。 HTMLに外部CSSを関連付けるコードはコチラ。（同じ階層にある場合）

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

/* HTML5ではtypeを省略可能 */
<link rel="stylesheet" href="./style.css" />

CSSにそれぞれの値を入れておけば、例えば下図のような表示になります。

この例では、ヘッダー・コンテンツ・サイドバー・フッター、それぞれの幅や高さと背景色を指定しています。ちなみにCSSにもバージョンがあり、今はCSS3が主流になっています。 CSS3ではどんなことができるのか、こちらの記事をご覧いただくとビックリですよ！

新着記事

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

ちこういった動的な構築ができるのは、ページに個性を出せる１つのポイントですね！次の記事では、実際のHTMLとCSSの記述に関して書いていきますので、ぜひ続きをご覧ください。

投稿日: 2016-03-01
カテゴリー: CSS | 投稿者: NOR

全コンテンツ新着記事

iPhone Xに機種変更して気付いたiTunesの落とし穴
2017年11月3日発売だったiPhoneX（アイフォーン10）。

予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

続きを読む

iPhone6sをそこそこの値段で買い取ってもらいました
私は機種変更をする時に、下取りには出しません。

だいたい1万前後でしか下取りしてくれないから。

今回、iPhoneXに機種変更した際にiPhone6sをネットで売った手順をご紹介しておきます。

続きを読む

Facebookの記事シェア時に画像が表示されなかった時の対処
あまり気にもとめてなかったSNSのシェア後の表示について。

今回、広めたい記事を自分のFacebookでシェアしようと思ったところ、画像が表示されていませんでした。

その時の対処を備忘録として。

続きを読む

mac for excel クラッシュ時の一時保存フォルダの場所
macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

そんな時、Office製品はしっかり一時保存データを残してくれています。

macでの一時保存フォルダを備忘録で残しておきます。

続きを読む

【Photoshop】簡単にドット柄を作る
最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

私の環境はPhotoshop CS6 for Macです。

続きを読む

【Photoshop】簡単にストライプ（ボーダー）柄を作る
最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にストライプ柄、ボーダー柄の作り方を備忘録で残しておきます。

私の環境はPhotoshop CS6 for Macです。

続きを読む