HTML&CSS基礎知識

Webページ作成の基本となるHTMLとCSSについて勉強しましょう。
サイトマップ風に項目をまとめてみました。公開や更新作業について見てみましょう。

◎HTMLの基礎知識　
  • HTMLとXML
  • メモ帳でHTMLを作る
  • タグの基本ルール
    ・開始タグと終了タグ
    ・タグと要素
    ・タグに属性を追加する
    ・入れ子 構造
    ・コメント
  • HTMLファイルの基本構造
  • 覚えておきましょう
    ・改行と段落分けを使い分けよう
    ・連続スペース
  • ブロックレベル要素とインライン要素
  • ビルダーはタグを書き込んでくれます
    ・ビルダーで新規作成（白紙）
    ・段落や見出しの挿入
    ・リストの挿入
    ・範囲を設定する
  • 絶対パスと相対パス

◎CSSの基礎知識　
  • CSS（スタイルシート）とはなにか？
  • スタイルシートの記述場所
  • ＣＳＳの基本的な記述方法
  • セレクタ（スタイルの対象）について
  • スタイルシートをHTMLに適用する
  • フォントサイズ
  • CSSのコメント情報
  • ボックスの概念
  • ホームページビルダーとCSS


CSSの基礎知識

　 CSSについて勉強しましょう

CSS（スタイルシート）とはなにか？


スタイルシートとは、文書の構造と見栄えを分離させて表す仕様のことです。HTMLは、もともと文書の論理構造を記述するために作られた言語がインターネットの普及とともにページの見映えが重視されるようになり、デザインに関する要素を指定するためのタグが多様されるようになりました。

おまけにMicrosoft社やNetscape Comunicacation社が、自社のブラウザのシェアを伸ばすため独自のタグを追加したため、HTMLはますます複雑なものになっていきました。こういった傾向が問題視され、デザイン的な要素はHTMLと分離させようというで生まれたのがCSSです。

Web上で使われるスタイルシートにCSS（Cascading Style がSheets）があります。文字の色や大きさ、画像の配置など見栄えに関する命令文をHTMLから分離させてCSSとして記述します。

CSSはHTMLと同様、メモ帳などでＣＳＳを記述した後、拡張子「.css」を付けて保存すればＣＳＳファイルが作れます。CSＳの基本を学ぶのに好都合です。ビルダーには、バージョン11からCSSエディタが搭載されており、簡単にCSSが記述できるように工夫されています。

スタイルシートの記述場所


CSSの記述場所は

  • ①タグ内部に書く場合
  • ②<HEAD>内に記述
  • ③HTMLの外部にCSSを書く方法があります。

①～③の方法には適用の優先順位があります。一番高いのは「①タグ内部」で、一番低いのは③外部スタイルシートです。例えば、外部スタイルシートを使っているけど、ページ内のこの部分だけ違うスタイルシートを適用したい場合に、一番優先順位が高い「①タグ内部」の記述方法が使えます。

HTMLソースコードの見やすさや維持管理の手間を考えると、基本的には③外部スタイルシートを使うようにして、個別のページで必要に応じて①や②の方法を取ればと思います。なお、いずれの方法を使う場合でもhead要素内に、以下の記述（宣言）が必要です
<meta http-equiv="content-style-type" content="text/css">

（例）
①タグ内部に書く
　<p style="color:blue; line-height:1.5;">HTMLとは</p>


②<head>内にstyleタグを作成し、そこに記述する方法
　<head>
　<style type="text/css">
　<!--
　h1 { color: red; }
　-->
　</style>
　</head>

※スタイルシート部分を<!-- -->でコメントにするのは、スタイルシートに対応していない古いブラ　ウザで<style>要素の内容がそのまま表示されてしまうのを防ぐためです


③head要素内にlink要素で外部スタイルシートファイルを設定する方法
　 <head>
　 <link rel="stylesheet" type="text/css" href="xxx.css">
　 </head>

　外部CSSにはh1 { color: red; }と記述

CSSの基本的な記述方法

スタイルシートを使うには、HTMLファイルの<head></head>の間で次のように宣言します。「このHTMLファイルはCSSというスタイルシート言語を使います」という意味です。
<META http-equiv="Content-Style-Type" content="text/css">


ＣＳＳは、３つの要素（セレクタ、プロパティ、値）を設定することによって、定義します。
「どこの」「なにを」「どうしたいか」ということです。

  • セレクタは、スタイルシートを適用する対象を 　　　
  • プロパティは、HTMLでいう属性の部分を
  • 値は、HTMLでいう属性値の部分です。
※コメントアウト、フォント名以外は半角英数字を使用します。
　ちなみにHTMLソース中で、<!-- -->で囲まれた部分がコメントになります。




セレクタ（スタイルの対象）について

何に{ }内のCSS命令を適用するか選択（セレクト）する部分をセレクタと呼び、主に以下の３つがあります。

  • 要素セレクタは、ＨＴＭＬ要素にスタイルを設定
  • クラスセレクタは、特定のＨＴＭＬ要素にクラス属性を設定し、スタイルを設定します
  • ＩＤセレクタは、特定のＨＴＭＬ要素にＩＤ属性を設定し、スタイルを設定します



◎万能タグ<div>は“id”属性と”class”属性で使いこなそう
タグによる指定だと、そのタグの全てに効果が付与されてしまいます。「この<p>タグだけ文字を赤色にしたい」といった場合、id属性とclass属性を使います。また、<p>タグでも<h>タグでもない文章は<div>タグで囲み、id属性とclass属性を使って個別の名前を付け、CSSを適用します。


（例）
<html>
<head>
<title></title>
<style type="text/css">
#example { color: red; }
</style>
</head>
<body>
<p id="example">このテキストは赤くなります。</p>
</body>
</html>


[表示例]
このテキストは赤くなります。



スタイルシートをHTMLに適用する

スタイルシートを一括で記述したCSSファイルを別途用意し、外部ファイルとしてHTMLで読み込ませ、HTMLのデザインをまとめて制御する方法です。この方法が最もスタイルシートを効率よく利用する方法で、スタイルシートの特徴を最大限に引き出す使い方です。

◎書き方
スタイルシートのURIを指定したら、link要素をHTMLファイルの冒頭に挿入します。具体的には、HTMLの<head>～</head>間に挿入します。

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

※URIにはみ込むスタイルシートのアドレスを。相対パス、絶対パスどちらでも可。


◎スタイルシートの定義

　　

フォントサイズ

ホームページを閲覧する環境は、OSの違いや、ブラウザの違いの違いにより、同じホームページを閲覧した場合でも、表示される文字の大きさは異なります。 見え方を左右するフォントの問題は複雑で大きな問題です。

CSS （スタイルシート）では、font-size フォントサイズプロパティで文字の大きさを指定することができます。スタイルシートで指定する前は、ブラウザの標準設定で文字の大きさが決められます。スタイルシートで指定することで、読みやすく、しかも見た目にもきれいな文字使いができます。

数値で指定

数値にpxやemやなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。emは、1文字分を表している単位です。ページでfont-sizeを何も指定していない場合、どのブラウザでも16pxなので、1em=16pxとなります。

複数行に対するコメント
「％で」指定 　

％値で指定します 。

CSSのコメント情報

/*から*/で囲んだ範囲はコメントとなります。 コメント部分はブラウザには無視されるので、一時的にCSSを無効にしたりCSSソース内にメモを残す際などに使用します。 コメントを入れ子にすることはできません。
（例）
/*
複数行に対するコメント
複数行に対するコメント
/*

CSSでスタイルを確かに定義してるのに、なんだか部分的にスタイルが適用されてない部分がある場合、コメントの終わりは「*/」ですが、直前に全角文字があると、コメントの"閉じ"が効きません。半角文字や半角スペースが直前にあると、大丈夫です。
（例）
/* １行コメント */

ボックスの概念

CSSでは各要素がボックスと呼ばれる四角い領域を生成されます。この領域は、以下の４つの部分から成り立っています。

内容領域
要素の内容が表示される領域です。この領域の幅と高さは、widthプロパティとheightプロパティで指定します。
マージン
ボーダーの外側の余白です。要素に指定された背景はこの部分には表示されず、常に透明になります。marginプロパティで指定します。
ボーダー
要素の周りに表示させることの出来る枠の部分です。borderプロパティ（border- プロパティ含む）で指定します。
パディング
ボーダーの内側の余白です。要素に指定された背景はこの部分に表示されます。
ボックス全体の幅
ボックス全体の幅は、 左右のmargin＋左右のpadding＋左右のborder＋widthの値をすべて足したものになります。

ホームページビルダーとCSS

ビルダーでは、スタイルシートの書式を知らなくても、表示されるダイアログボックスやCSSテンプレートを使えば、スタイルシートを使ったホーページを作ることができます。
CSSの記述場所は

  • ①タグ内部に書く場合や
  • ②<HEAD></HEAD>タグ内部に書く場合や
  • ③HTMLの外部にCSSを書く方法があります。

①右クリックから「スタイルの設定」でスタイルを指定すると、選択した要素のみ設定されます。タグに直接style属性が記述されるため使いまわしはできませんが、適用の優先度が最も高いので 外部スタイルシートなどで指定されたスタイルを打ち消したりできます。

②スタイルシートマネージャーでスタイルを追加するとヘッダで定義されます。classなどで指定しておくとページ内で使いまわす事ができます。 外部スタイルシートの定義と重複した場合はこちらのが優先されます。


ホームページ・ビルダーで対応しているCSSプロパティはこちらを参考にしてください




inserted by FC2 system