HTML タグ関連解説

無料ブログ＆アクセスアップ関連広告

無料のデータベース作成ツール（簡単ホームページ作成）
無料の高機能検索サイト作成ツール『too-search』
無料ＳＥＯ対策ツールが使い放題！【AS─TOOLS】
ブログのアクセス数を増やすことができるブログランキングサイト「ブログセンター」
会員同士が簡単に相互リンクをが出来る【リンクボックス】

▼ リンクスタッフ各社への新規登録で、全員に3000円キャッシュバック中！▼
検索エンジン登録代行・検索エンジン上位表示でアクセスアップ！ 1980円～！

div要素とID・クラス(class)

2009/11/16(月)

ホームページやブログを制作、カスタマイズするうえで、HTML（XHTML）の要素を理解することは基本中の基本ですが、意外と要素についてよく理解されないままにホームページやブログのカスタマイズをされている方がいらっしゃるようです。

HTML（XHTML）の本文を構成する要素（body要素）には、大きく分けて「ブロックレベル要素」と「インライン要素」の２種類がありますが、ここでは、見出し、段落、リスト、表など、文章を構造化する基本要素であるブロックレベル要素の中でも特に基本となる「div要素」について解説します。

ページ内のコンテンツは、ヘッダー、ナビゲーション、メイン部分、サイド部分、フッターなどおおまかな範囲に分かれるのが普通です。このような範囲を示すためにdiv要素を利用します。（divは「区画」や「部門」を意味する「division」の略）

div要素に「ID（ID属性）」を振り、「ここはこういう範囲」ということを具体的に示します。ページ内で複数出現する範囲については「クラス（class属性）」を割り振りします。

このように、IDとクラスは「ページ内で一つだけ使えるか、それとも複数使えるか」という違いがあります。

通常のホームページやブログなどWebサイト制作では、ページを実際につくりはじめる前に、「ワイヤーフレーム」といわれるページ構成図（ページのどの部分に何を配置するかという見取り図）を作成しておきます。

▼div要素によるコンテンツの範囲決め

　<div id="header">　ヘッダー部分

　<div id="navigation">　ナビゲーション部分

　<div id="main">　メイン部分

　<div id="side">　サイド部分

　<div id="footer">　フッター部分

※ワイヤーフレーム（ページ構成図）サンプル

なお、IDとクラス（ID属性とclass属性）で利用できる文字は、アルファベット（a～zとA～Z）、数字（0～9）、ハイフン（-）、アンダースコア（_）、ピリオド（.）です。必ずアルファベットではじめる必要があり、例えば「id="01"」と指定することはできず、「id="a01"」などと指定する必要があります。ただし、「id="a01"」のような通し番号的なIDやクラスは使わず、きちんとそのコンテンツの役割に基づいた値をつけるように心がけましょう。

記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ブログランキングくつろぐＪＲＡＮＫブログランキング

≫[ div要素とID・クラス(class) ] の続きを読む

トラックバック：0 | コメント：0 | Page Top↑

編集できるブログやホームページの作り方

2009/05/28(木)

通常のブログやホームページなどのWebサイトでは“見るだけ”しかできないのが普通ですが、「contentEditable 属性」を利用することで、ブログやホームページ（Webサイト）の文章の削除や装飾をしたり、写真や画像のサイズを変更したりすることができるようになります。

例えば、訪問者が印刷するであろうと想定できるような内容のページを作成した時に、この機能を使って「このページは、文字や画像の編集機能つきです。印刷する際には、ご自由に編集をしてご利用ください。」などと明記しておけば、訪問者に喜ばれるかもしれません。

ホームページに表示される特定の部分（ブロック）の文章や画像を編集可能にするには、編集可能にする部分を「DIV」タグや「P」タグのブロック要素タグに、「contentEditable」という属性（値なし）を記述するだけです。これで、訪問者が自由に、表示された文章の編集や画像のサイズを変更したりすることができるようになります。

<DIV contentEditable>～</DIV>で囲ってある、以下のスペースに文章や画像などを記述します。

この青い枠線内の文字や写真は編集が可能です。
試しに文章や写真を編集してみてください。

※編集例
　・画像サイズの変更や削除
　・テキストの追加や変更、削除など

</DIV>

●ホームページ全体を編集可能にする方法
ホームページ全体を編集可能にするには、BODYタグに contentEditable 属性を指定します。これで、訪問者が自由に、ホームページ全体に表示されている文章の編集や画像のサイズを変更、削除したりすることができるようになります。
ホームページ（Webサイト）全体を編集可能にしておけば、編集したページは印刷結果にそのまま反映されるため、訪問者に不要な画像や文書を削除してもらい、欲しい部分だけを印刷してもらうことができるようになります。

▼記述例
<BODY contentEditable>
　：
　：
</BODY>

なお、この機能が有効となるのはInternet Explorer 5.5以降です。Netscapeなど、一部のブラウザでは正しく機能しない場合もあります。（IE8、Firefoxにて確認済み）

気が向きましたらならクリックをお願いします ↓
　

人気blogランキング！

ＪＲＡＮＫブログランキング

ブログランキングくつろぐ

トラックバック：0 | コメント：1 | Page Top↑

RGB値を英字で指定して薄めの色を配色したカラーサンプル

2008/07/05(土)

色（カラー）を指定する時には、RGB値かカラー名を指定するのが一般的ですが、RGB値は、00が最も暗く、FFが最も明るい色となります。
　※参考記事：RGB値とは（色の指定方法）

その特性を利用して、背景色などの薄めの色（カラー）を指定して配色したい場合には、A、B、C、D、E、Fの6個の英字のみでRGB値を指定すれば、薄めの色（カラー）を指定することが容易にできます。英字の配列順序を少し変えて組み合わせるだけでも、以下で紹介するカラーサンプルのように、色々な薄めの色や、明るい色が表現できます。

▼RGB値に、6個の英字をランダムに配列指定した時のカラーサンプル

#abcdef

#acdefb

#adefbc

#aefbcd

#afbcde

#bacdef

#bcdefa

#bdefac

#befacd

#bfacde

#cdefab

#cefabd

#cfabde

#cabdef

#cbdefa

#defabc

#dfabce

#dabcef

#dbcefa

#dcefab

#efabcd

#eabcdf

#ebcdfa

#ecdfab

#edfabc

#fabcde

#fbcdea

#fcdeab

#fdeabc

#feabcd

#fedcba

#fdcbae

#fcbaed

#fbaedc

#faedcb

#edcbaf

#ecbafd

#ebafdc

#eafdcb

#efdcba

#dcbafe

#dbafec

#dafecb

#dfecba

#decbaf

#cbafed

#cafedb

#cfedba

#cedbaf

#cdbafe

#bafedc

#bfedca

#bedcaf

#bdcafe

#bcafed

#afedcb

#aedcbf

#adcbfe

#acbfed

#abfedc

記事の内容にご満足戴けましたならクリックをお願いします ↓
人気blogランキング！ FC2ブログランキングＪＲＡＮＫブログランキング

≫[ RGB値を英字で指定して薄めの色を配色したカラーサンプル ] の続きを読む

トラックバック：1 | Page Top↑