2009年08月20日

divという要素はなんでしょう 実はレイアウトに関係してきます。

 ホームページの、レイアウトに必須な div要素。

 最初は、何の暗号なんだろう?と思ったのが、このdiv要素になります。

 文法上では、「汎用ブロックレベル要素」と記載されていますけど、じゃあブロックレベルって何?と聞きたくなってきます。
 
 htmlで文章を作りますけど、サイトページの構造については、CSSスタイルシートで決定するのですが、じゃあ、その決まり事自体を、htmlページのどの部分に適用するのか?と、いった部分の指定とかもこのdiv要素で決めていきます。

 このブログで説明しますと、一番上にはサイトのタイトルや見出しを記載してあります。

 画面の左側にはサイド・メニューという形で、バナー広告や今までの記事を記載してありますね。
 その右側が、メインの文章記事という形で、一番下が、「フッター」と呼んでいますけど、このサイトはどこが管理しているのか?といった内容が記載されています。

 以上の様な構成パターンは、「左2カラム」という名称で呼んでいます。サイド・メニューが右でしたら、右2カラムになりますね。文章が中心で、両サイド側にメニュー案内が来るパターンは、3カラムと呼んで使っています。

 さて、この様な2カラム構成を作るには、どうすればいいのでしょうか?
 CSSへの記載方法は後にして、htmlファイルとcssファイルの連動性を、まずは覚えておく必要があります。
 スタイルシートでは、画面の背景、枠線の太さや長さ、メニューの横幅やホームページ全体の幅や、サイト全体の文字や、見出し文字の大きさなどなど、とても細かい要素まで決められるのですけど、
 スタイルシートの記入項目は、htmlファイルのどの部分を指定しているのかなどを、あらかじめ指定しておかないと、自分が意図している構成にならなくなってしまいます。

      (例)        
     html・ファイル                    style.CSS    | header               |
  div id="header"(タイトル部分)       #header     |______________|
  div id="main" (メイン部分)            #main      | sade |      main  |
  div id="side" (サイド・メニュー部分)     #side.left   |___  _|________ |
  div id="footer"(一番下)               #footer     |  footer              |
  
  簡素に記しましたが、こんな感じで連動させて、htmlファイルとcssファイルのセットでホームページが出来ます。
 この二つのファイルは、あらかじめリンクさせておきますが、CSSファイルで指定している項目を、htmlファイルに反映させるために、このdiv要素を活用していくと覚えて下さい。

 スタイルシートへリンクしていますよ、というhtmlでの書き方は

 <meta http-equiv="Content-Style-Type" content="text/css">

 と、文章宣言の後に、記載しておきます。
 次回は、ブロック(一塊)要素の中に含まれる、一番記載する機会が多いインライン要素について、いってみましょう。
 


posted by アラフォー親父 at 09:38 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年08月19日

文字の色を変える(ブログでは簡単・ではHPでは?)

 はい・・またお会いいたしましたね、今回は文字の色を変えるタグの説明になります。

 結構サクサクと進んできましたが、HTMLに関する本を読んでも、最初の説明で???となり、投げ出し気味になる事も
 多いみたいですが、どんな感じでしょうか?
  とりあえず、表題が「文字の色変更」ですから、とりあえず進めてみましょう。
 
 ホームページを作っている時、CSSスタイルシートでサイト全体の色や、見出しなどの文字色・大きさなどは指定しているのですが、少し長めの文章などの時に、このポイントは読んでほしい!という処で、

 文字の大きさを変える!
 文字の色を変える!
 文字の形式(ゴシックからポップとかですね)を変える!

 などと、文字を変えて読んでもらおうと考えます。
  サイトでなくても、新聞のチラシとか見ると判りますよね、伝えたい文字を目立つようにしています。
  
 色を表すタグは<color>カラーと言います。通常文章は「黒」か「グレー」で表した方が、背景が濃い色で無い限り(黒や紺)文章は読みやすく感じます。

 タグ表記の例としては、

 <font color="ff0000">赤い色です</font>と、表記すると、

           赤い色です
     と、画面には表示されます。

 このタグを記載する時、注意しなければいけない事は、font(文字)とcolor(色)の間に、半角スペースを入れる事
 colorの後には =(イコール)を入れ、必ずカラーコードを""(ダブル・クオテーション)で囲む!事が大事になります。
  
< font color = "カラーコード ">赤い色< / font>

  文字の色  は 赤で指定 ここから 文章 ここまで

 と、いう様に指定していきます。

 文字の色は、カラーコードで指定しますけど、あまりにも種類が多いので、基本色ぐらいにしておきます。
 #ffffffが白、#000000が黒、#ff0000,が赤という具合に表記しますけど、カラーコードの記載には、#を頭文字に据えますので、これが忘れてはいけないポイントになります。
 次から、CSSや画像ファイルとの連携などを踏まえつつ、考察していきます。
posted by アラフォー親父 at 09:22 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年08月18日

テーブル(表)の作り方・コピーして使いましょう

 前回から続いて、今回はテーブル・パターンの表現方法です。
 
 テーブルと言っても、ピン!とこない方がいるはずですから、簡単に言いますと、一覧表を作る!の方が判りやすいかもしれません。

 マイクロ・ソフトのオフィス・ソフトに入っている、エクセルと同じ表現の仕方と覚えるのも、一つの方法です。

 初めの内は、馴染みにくいかもしれませんが、HTML4.01では時々使いますから、覚えておく必要があるかもしれませんね。

 まずは、一覧表の一つのマス(四角く囲ってある部分)の事を、「セル」と呼んでいます。
 (ドラゴンボールのセルではないですけど・・・)

 表をことを、<table>〜</table>タグで全体の指定を行い、この<table>〜</table>のタグの間に
 表題の事を<caption>〜</caption>で囲みます。
 見出しの事を<th>〜</th>
 横に並ぶ行の事を、<tr>〜</tr>
 項目の事(セル)、<td>〜</td>
 で囲んでいきます。
 
 <table>
<caption>今夜の晩御飯</caption>  <!--ここが表題になります-->
<th>おかずの材料</th><th>分量</th> <!--一覧表の見出しです-->
<tr><td>豚肉</td><td>100g</td></tr><!--セルのtdを行のtrで囲んで、一覧表を作ります-->
<tr><td>キャベツ</td><td>一個の半分</td></tr>
<tr><td>ニラ</td><td>一束</td></tr>
</table>              <!--最後のテーブル要素を忘れずに-->


  と記載しますと、実際の画面では

     今夜の晩御飯
  おかずの材料    分量
    豚肉      100g
   キャベツ    一個の半分
    ニラ      一束

 と、画面で確認出来るはずです。

 ちょっと、このテーブル要素で使うタグは、頭文字が全てTから始まりますので、th・tr・tdが頭の中で、
 ゴチャ混ぜになりやすいのですが、tdのセルの部分は、tr(行)で囲んであると、覚えるといいでしょう。
 今夜の晩御飯の文章を、自分が馴染んでいる言葉に代えて、自分が覚えやすくしておくか、面倒くさいなぁ〜
 と感じたら、コピーして、なにかの時に使うと便利だと思います。
 
 次回は、文字の色を変えるタグの説明をします。それでは、さいなら・さいなら・さいなら。

posted by アラフォー親父 at 08:26 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年08月17日

リスト(箇条書き)項目の書き方

 はい・・・リスト項目の説明です。

 リストと言っても、一瞬 ん?・・となる場合がありますので、簡単に言いますと、箇条書きで文章を表す項目と捉えて下さい。
 リストと言うより、箇条書きの方が覚えやすいのはずですので。

 ではタグの説明に入ります。
 まずは、順序が決まっていない、箇条書きの場合です

 これには、<ul>〜</ul>というタグと<li>〜</li>のタグを組み合わせて使います。

 例えば
 <ul>
    <li>パスタはおいしい</li>
    <li>ソースは、何がおいしい</li>
    <li>好みが分かれる</li>
 </ul>

  これが、実際の画面では

  ・パスタはおいしい
   ・ソースは、何がおいしい
   ・好みが分かれる
  
   と、・の後に文章が記載される状態になります。基本の形は、この<ul>〜</ul>で、箇条書きの部分には<li>〜</li>を使う と覚えて下さい。

   では、番号を表示する時は、<li>の後に、数字を入れれば・・・・いえいえ、そんな時には、<ul>タグの代わりに

   <ol>〜</ol>を使います。

   表記の仕方は、先程のulと形は同じです。箇条書きの書き方自体が、この形になりますので、覚えておくと便利です。

   また、番号の代わりとして違う表現をしたい時には、

   <ol type="A">ABCDでの記載になります、終わりのタグは</ol> 間には<li></li>で箇条書きの項目を記載

  <ol type="a">abcdでの記載になります、終わりのタグは</ol> 間には<li></li>で箇条書きの項目を記載

  <ul type="square">黒四角での記載になります、終わりのタグは</ul> 間には<li></li>で箇条書きの項目を記載

  <ul type="circle">白丸での記載になります、終わりのタグは</ul> 間には<li></li>で箇条書きの項目を記載

  <ul type="disc">黒丸での記載になります、終わりのタグは</ul> 間には<li></li>で箇条書きの項目を記載

  と、こんな感じで使い分けて見て下さい。
  
  次は、同じ箇条書きでも「定義リスト」という記載方法があります。
  
  これは、「用語」と「説明」で表す、箇条書きの部分と考えて下さい。

  全体を<dl>〜</dl>で囲み、用語を<dt>〜</dt>で囲みます。用語の説明を<dd>〜</dd>というタグで囲んで表現します。

  これは〜の用語集と言った形で表される場合が多くあります。仕事場では、このパターンの箇条書きが多いはずです。

  例えば・・・
  <dl>
    <dt>課長</dt>
    <dd>午後より、打ち合わせで、(株)◎++会社へ</dd>
    <dt>山田</dt>
    <dd>午後クレーム処理のため、千葉市中央区へ平塚と同行</dd>
  </dl>

  こんな感じですけど、上の内容をサイトでは商品情報で記載したり、会議での発言(誰が、何を発言したのか?)みたいな
  パターンでも使用します。
  
  箇条書きについては、この2つの書き方が判れば、さほど悩まずにすみます。
  次回は、テーブル表記方法について、ご説明してみます。
  
posted by アラフォー親父 at 11:12 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年08月15日

HTML4.01とXHTML1.0の、ドキュメント宣言 (コピーして使いましょう)

 前回は、文章宣言について、微力ですが記載してみましたが、難しい事を言われてもね・・・
 と、いった方に向けてホームページを記載するために、必要な文章宣言から、メタ・まで一応記載しておこうと思います。
 ようは、これをコピー&ペースト(貼り付け)をすれば、とりあえずホームページの雛型になりますよ!
 といった、タグを記載してありますよ、てな感じです。
 
 (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=shift_jis">
<meta name="Keywords" content="<!--サイトのキーワードを、カンマ( , )で区切って入れる部分-->">
<meta name="Description" content="<!--このサイトは、どんなサイトなのかを説明する部分-->">
<meta http-equiv="Content-Script-Type" content="JavaScript"><!--ジャバ・スクリプツを使う場合は明記して下さい-->
<title> ホームページのタイトルです </title>
<link href="style.css" rel="stylesheet" type="text/css"><!--スタイルシートを使う時には、必ず記載する-->
</head>
<body>
<!--この間に、実際の画面で見れる、ホームページの情報を記載する。-->
</body>
</html>

<!---->このカッコで囲まれた部分は、コメントとして扱われ、実際の画面には表示されませんので、上に記載してあるタグをそのまま、テキスト・エディタもしくはメモ帳にコピーして、ファイルの拡張子をhtmlにしますと、実際に自分のパソコン画面で、インターネットを見るような感じで表示されます。
試しに、<title>〜</title>の部分に、好きなタイトル文字を入れてみて下さい。

では次に、XHTML1.0で、文章コードがS-JISではなく、UTF-8(ユニコード)で、日本語を表記するといった感じの
文章宣言です。上のHTNL4.01と、共通している部分と、違う部分をよく把握して下さい。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta name="description" content="●内容説明●" />
 <meta name="keywords" content="●キーワード●,●キーワード●" />
 <title>●文書のタイトル●</title>
</head>
<body>
<!--=ホームページの内容を記載する部分です=-->
</body>
</html>

 どうですか?違いが判りますか?HTML4.01では、body〜bodyの間に大文字でのタグが入っても、文法上問題無く処理してくれますが、XHTML1.0では同じbody〜bodyの間に入れるタグは、絶対に小文字でなければいけないという、文法の違いがあります
 
 文法の違いは後に説明していくつもりですので、とりあえずあんまり大げさに考えずに、ホームページを作る時には、上に記載したいずれかのタグパターンを記載すれば、間違いがありませんので、一つの形としてメモ帳にコピーして役立てて下さい
 
 次からは、実践的なタグの使い方を説明しておきます。
 これが判れば、HTMLエディタorテキスト・エディタで、タグを入れて文章を入れれば、十分ホームページが作れますので、
 次はタグの入れ方からという事で・・・・。

posted by アラフォー親父 at 09:26 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
2009年08月13日

HTML言語は、何を採用するのか?また注意点は。

 さて、いよいよホームページを作る為にも、必要なHTMLについて少しずつ記載して行こうと考えています。

 HTML言語というものはHTML2.0から始まり、HTML4.01へと移行してXHTML1.0となりXHTML1.1となっています。

 言語の種類にしても、Stricという文章型が一番厳格になり、Transitionalが移行型で、Framesetというのが、CSSスタイルシートを、ほぼ使わないフレーム・レイアウト向けの文章型になります。

 この中では、Transitionalという移行型が一番使われています。

 理由としては、サイト制作時に、a(アンカー)要素のtarget(ターゲット)属性を指定する事になりますが、この属性がStricでは認めてもらえていないので、必然的にTransitional形式を採用するようになります。

 Framesetもあるでしょう?と意見がありますが、フレームレイアウト自体SEOやアクセンビリティ上、デメリットが多いので、製作しているサイトのユーザー数やターゲットが絞りこめる場合でないと、中々採用しないのが一般的になります。

 ただ、いくらTransitionalが便利だからと言って、Strictで認められていない要素を乱用しますと、ページをすっきりとした構造に出来なかったり、ソースコードが長くなりすぎて、CSSが適用しにくくなったりする事が起きてしまいますので、Transitionalを使用するけど、Strictで賄いきれない要素の補填として採用していく様に務める事をお勧めします。

 先に説明した、文章型のXHTML1.1ですが、現状を考えますと、XHTML1.0に代えて採用していくメリットが殆んど無い為、(IE6での不具合が多い)という事で、あまり採用されるケースがありません。

 そんな訳で、現在はXHTML 1.0 Transitional + CSS・スタイルシートやHTML 4.01 Transitional + CSS・スタイルシートの組み合わせで、サイトの制作を行うケースが殆んどになります。

 試しに、どのサイトでも構いませんから、マウスで右クリック&ソース表示などで、確認して下さい。

 サイトの一番上が、文章宣言というソースの記載がありますけど、殆んどのサイトがDTDに続くアルファベットが、XHTML1.0Transitionalか、HTML4.0Transitionalという形式になっているはずです。

 次回は、文章宣言について・・いきましょうか。
posted by アラフォー親父 at 10:05 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする
最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。