カテゴリー別アーカイブ: chiharu

『タグ』と『要素』の違い

「タグ」
タグとは、「 < 開始タグ 」記号と「 > 終了タグ 」記号を用いて構成されます。
例えば、開始タグと、終了タグを用いて「段落」が表現されます。

「要素」
要素とは、開始タグと終了タグを用いて構成される全体を指します。
画像で説明すると、開始タグから終了タグまでの間にある「こんにちは」という内容も含めて全部が「p要素」です。
ですので、「《p》タグと《/p》タグで構成される段落」は「p要素」となります。
逆に言うと《p》は「p要素の開始タグ」、《/p》は「p要素の終了タグ」と言えますね。

キャプチャ

margin paddingをスッキリ表示

CSSでmarginやaddingを使って余白を取る際、《right:20px;》 《left:20px;》と1つづつ表記することは間違っていません。
しかし、margin addingの定義としてこのように決まっています。

1111

コロン:とセミコロン;の間に2つの入れば「左⇒上下」、「右⇒左右」
コロン:とセミコロン;の間に4つ入れば左から時計回りに「上」「右」「下」「左」
※必ず数字と数字の間にスペースを空けます。

スッキリとしたCSSになります。

CSSのコメントの書き方

ソースが長くなると、後日直したい時に、どこに何を記述したのか分からなくなることがよくあります。
また、他人が書いたソースは、どういう意図でそう書いているのか分からない場合があります。 そんなとき、コメントで補足されていれば、ソースだけからは分からない情報を伝えたり思い出したりすることができます。

また、長いソースを目的別や適用場所別に区切って、読みやすくするためにも活用できます。
「ヘッダー」や「フッター」など、適用箇所を示したタイトルをコメントとして書いておけば、読みやすいソースになります。

キャプチャ

このように長くなればなるほどどこの部分のなにが書いてあるのか分からなくなります。
誰が見てもHTMLのどこの部分の装飾がされているのかわかりやすくするためコメントを表記するとよいでしょう。

コメントアウト

コメントアウトとは
タグの構造やページ構成を分かりやすくするため、一部のタグを『コメント』で囲みます。
その囲ったタグを一時的に無効にすることが目的です。
本来は正常に機能していたタグをコメントで囲むと、コメント内に書かれた内容はブラウザの表示されなくなります。

例)
《font color=”red”》赤字で表示《/font》 →赤文字で表示されます。

↑↑↑↑↑コメントアウトして表示されないようにします

《!–《font color=”red”》赤字で表示《/font》–》 →コメントアウトしたことによって表示されなくなります。

例えば四季の応じて表示を変更したい場合、あらかじめ春・夏・秋・冬の記事を書いておきます。
夏の記事だけをを表示させたい場合、残りの春・秋・冬はコメントアウトしておけば表示されません。
ですので、秋の記事に変更したい時はコメントアウトを変更するだけで簡単に記事の変更ができます。

キャプチャ

ホームページを作成するのに欠かせないもの

前回HTMLとCSSの役割を説明しましたが、その他にも必要なものがあります。

JavaScript
JavaScript(ジャバスクリプト)は、デザインを変化させたり、動作をつけたり、日付を計算したり、入力漏れを指摘したり、サブウインドウを表示させたりといった、様々な付加機能をウェブページに加えられる機能です。
知らなくてもウェブページは作れますが、知れば便利で面白いウェブページが作れるようになります。

PHP
PHPは、掲示板や送信フォームのように、入力した内容をサーバに蓄積したり、メールを送信したりするのによく使われます。ウェブ上で動作するものはこれらの技術で作られています。
自分で1から作るにはプログラミング言語の知識が必要です。

SSI
ウェブページの中に他のウェブページの内容を挿入(合成)したり、更新時刻を表示させたりできる機能です。 HTMLのコメントの形で指示を埋め込むことで使えます。

RSS
ウェブサイトの更新情報を伝えるのに便利な言語です。RSSリーダーやRSSに対応したブラウザに登録できるようにしておけば、更新したページの情報を実際にサイトに訪れさせることなく伝えることができます。

class属性とid属性の違い

スタイルシート(CSS)を書く際、「ある要素すべて」を一括して装飾するのではなく、「ある要素のうち一部だけ」を装飾したい場合、HTMLに付加する属性は2種類あります。
classと、idです。

ラウザ上での表示効果は全く同じです。では、「class」と「id」の違いは何でしょうか?

■class:
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える

■id:
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない
《div id=”header”》~《/div》
《div id=”topimg”》~《/div》
《div id=”left_navi”》~《/div》
《div id=”footer”》~《/div》

【全部にclass属性を使っても問題はありません】
もちろん、スタイルを適用する目的でHTMLに属性を加える場合は、全部の指定に「class」を使っても問題はありません。1回しか登場しないからといって、「id」を使わなければならない規則ではありません。しかし、サイトの規模が大きくなってデザインが複雑になってくると、 「どういう目的で用意されたスタイルなのか」「どこに適用されるスタイルなのか」といったことが分かりにくくなります。 そのようなとき、「class」と「id」を使い分けていれば、(全部が「class」だけで書かれているよりは)ソースを把握しやすくなります。

HTMLを書くには【divで囲んだ時のCSSの書き方】

前回HTMLでdivを使い、囲んだ上でCSSを使いスタイリングしていくと説明しました。

では、前回の場合のCSSの書き方

キャプチャ2

HTML
div class=”header”

と書いた時

CSS
div.(class)”header”

classの特徴
同じ文書内で、1つのクラス名を複数の要素に指定することができます。
例)
《p class=”dcs1″》pは段落です《/p》
《p class=”dcs1″》pは段落です《/p》
《p class=”dcs1″》pは段落です《/p》
※p は Paragraph(段落)の略です。《p》~《/p》 でひとつの段落を示します。

1つの要素に複数のクラス名を指定することもできます。
例)
《div class=”dcs1 dcs2 dcs3″》《/div》

HTMLを書くには【divを使ってみよう】

見出し・段落・表・リストなどの要素に分けて、情報の意味付けをしただけでは、CSSによるスタイリング(装飾)がしづらい場合があります。
このような場合には、HTML内の各部分を《div》~《/div》で囲んで、 ヘッダー・コンテンツ・フッターなどのレイアウト単位で分けると、CSSで装飾しやすくなります。

キャプチャ

HTMLを書くには【CSSとHTMLを使ってbodyの中を書こう】

実際にCSS(スタイルシート)を用いてこのBODYの中に書いてみましょう。

の、前に必ず知っておくといいこと。
CSS(Cascading Style Sheet カスケーディング・スタイルシート)

ホームページを《HTML》だけで作ることはもちろんできます。
ブラウザから見るとCSSを使った場合と使わなかった場合と見た目は同じです。しかし、CSSを使わず《HTML》だけでホームページを作りソースを見るとゴチャゴチャしてしまいます。
そこで!
《HTML》を用いてホームページを作る際、《CSS》を使って細かい指定(文字サイズ、文字カラー、表示位置、背景色、回り込み、デザインにおける全てをCSSから定義することが可能)をします。それによって《HTML》の中は綺麗に整理され、文章などもよみやすくなります。それがCSSの役目でもありますがもう1つ。
SEO対策!
Googleエンジンは余分なソースコードは読み込んでくれません。エンジンがもっとも重要視しているのは文章や単語です。
検索の上位にあげるために使うという役目もCSSにはあります。