2009年11月12日

携帯からのアクセスが主流

 
 少しとりとめのない話しなのですが、大体このブログアクセスは1日平均130位になります。
 えっ?少ない。
 少ないですよね・・月間で換算すると、約390から400ちょいという数字になります。
 
 しかし、どの位のアクセスがあったのか?
 と言う事をシーサーブログが解析しているのですが、パソコンからのアクセスよりも携帯などの外部端末からのアクセスが昔も今も多くなっているのが現実です。

 結構プラウザの種類やOSの種類まで、解析出来ているみたいですが、不明なプラウザという項目パーセントが多く、
 「何じゃろうか?」という疑問がありました。
 
 携帯などのアクセスだったわけです。
 そうだったんだ〜的な感じですが、携帯からですと画面サイズもデザインも違いますから、良く解らない部分もあると思います。
 なんせスクロールに時間がかかりますから、中々他の部分までは目が届いていないでしょうね。
 
 携帯からのアクセスが多いのに、パソコンプログラムの話題が多くていいもんだろうか?という疑問があるのですが、
 え〜携帯ホームページを作る場合でも、基本は同じですし、テンプレートの利用率は携帯サイトの方が多いと思いますが、
 携帯ホームページ用テンプレートは、以外と簡単に作れます。
 
 しかし、この作業を携帯で行うと・・・・物凄く時間がかかります、やはりパソコンの方が、ホームページ作りになどでは、時間も掛からず便利かな?と考えたりしていますね。
 
 本当に、取りとめのない話題ですなぁ〜。

 


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

レンタルサーバー


 まだレンタルサーバーを使った事が無い方?

 ここで筆者がメインで使用している、ハッスルサーバーについてちょっと解説しておきます。

 よく独自ドメインの使用が、SEO的にも有効なので使いましょうとなりますが、じゃあどうやったら独自ドメインとレンタルサーバーを使えるのか?と最初は考えます。
 ややこしい事は、面倒ですからね。
 
 そんなわけで、未だに無料サーバーだけを使用している方も多い事と思います。
 
レンタルサーバーを借りる借りないは、個人の自由ですが、使い方は知っておいても損はしません。
(アフリエイトにしても、ショッピングサイトの運営にしても、独自ドメインが何かと優位に働きますからね)

そんなわけで、勝手に進行して行きます。

 まずはバリュードメイン、もしくはお名前.COM。ムームードメインから独自ドメインを取得します。
(独自ドメインが無くても、後で追加できます)

 ここでは、適当にドメインを取得するのではなく、出来る限り自分が製作するサイト名に近いドメインの方がいいと思います。

例えば、本の紹介をするようなサイトを作る場合に、bookやbooksの文字が入ればドメインだけでも解りやすく検索エンジン側も拾いやすいドメインになりますね。

 ドメインの価格などは、高いものは以外ですがjpなどが高く、安めなのがnetやcomになります。

 このドメインですけど、高いから良いとかはあまり関連性がありません。人気の度合いで価格がきまっているようです。


 そしてレンタルサーバーを借ります。

 ここではハッスルサーバーを例にして説明しますが、申し込んで決済が済んだら、早速使う事が出来ますし、無料レンタル期間が10日間ありますので、その間に試してみてから決めてもおそくありません。


 筆者は最初に一括で払い込みましたが、月割りで計算すると¥208円と激安なのに、php5にMySLQ5が使えて月208円。しかも次の年からは、年額が¥1000円安くなります。

 おまけにサブドメイン指定を行えば、32個ものサブドメインが使えますから、お得といえばハッスルサーバーと言えます。
 上を見たらキリがありません。
 なので、低予算でOKという所から使っていく方がいいでしょう。

 他にもロリポップやさくら、チカッパなど低予算で使用出来るサーバーがありますから、比較検討してみるといいと思います。
 
 そして契約した後に、FTPサーバー名とユーザー名、パスが渡されますが、こいつが一番大事な項目です。

 絶対に忘れないようにする必要がありますね。
 
 そして次のステップですが、このFTPサーバーにアクセスできるようにFTPソフトを設定しておきます。

 そして、ハッスルサーバーの場合ですが、まずwwwというフォルダを作り、これをFTPでアップさせます。

 このWWWフォルダが無いと、ファイルマネージャーから何から使えませんので、まずはWWWというフォルダを作って、FTPでアップさせると覚えて下さい。
  
 筆者は何も知識が無い時に、このWWWというフォルダを作ってアップさせるという部分をしっかり理解しておらず、オタオタした経験があります。

 特に、それまで無料サーバーを使っていたりした場合などに、なんで使えないのだろう?と思う事がありますから、ハッスルサーバーの場合ですと、WWWフォルダが必要と、チェックしておいて下さい。

posted by アラフォー親父 at 16:42 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年11月05日

XHTML+CSSで作ったメールフォーム (コピーしてお使い下さい)


 ちょいと暇だったので、役に立つ?メールフォームの作り方をば・・・

一般にメールフォームの作り方とかを検索しますと、大抵HTML4.01でつくられているのですが、
これをXHTML1.0とCSSスタイルシートで作ってみたので、もしよかったらコピーして使って下さい。

 下がソースです。まずはXHTMLからです。

<?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-Style-Type" content="text/css" />
 <meta name="author" content="WEB−EDIT" />
 <meta name="description" content="メールフォームです" />
 <title>メールフォーム</title>
<link href="form.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form>
 <h1>お問い合わせフォーム</h1>
  <form method="post" action="contact.cgi">
<p>入力が完了したら、「送信する」ボタンを押して下さい<span class="required">*</span>印は必須項目です</p>

<fieldset><!--一つ目のフィールド-->

<legend>お客様情報</legend>
<table>
  <tr>
    <th><label for="name">お名前<span class="required">*</span></label></th>
    <td><input type="text" id="name" class="text" tabindex="1" /></td>
  </tr>
  <tr>
    <th><label for="name">フリガナ<span class="required">*</span></label></th>
    <td><input type="text" id="name" class="text" tabindex="2" /></td>
  </tr>
  <tr>
    <th><label for="radio">性別<span class="required"></span></label></th>
    <td><input type="radio" name="item3" value="性別:男" checked>男性</td>
    <td><input type="radio" name="item3" value="性別:女">女性</td>
  </tr>
  <tr>
    <th><label for="name">電話番号<span class="required"></span></label></th>
    <td><input type="text" id="name" class="text" tabindex="4" /></td>
  </tr>
  <tr>
    <th><label for="name">メールアドレス<span class="required">*</span></label></th>
    <td><input type="text" id="name" class="text" tabindex="5" /></td>
  </tr>
</table>
</fieldset>

<fieldset><!--二つ目のフィールド-->
<legend>お問い合わせ内容<span class="required">*</span></legend>
<textarea id="comment" rows="7" cols="40" tabindex="7"></textarea>
</fiedset>
<div class="submit"><!--送信ボタン-->

  <input type="submit" class="submit" value="送信する" tabindex="8" />
 </div>
<p>ご協力ありがとうございました。</p>
<a href="../index.html">ホームページに戻ります</a>
</form>
</body>



 いいでしょうか?

CSSスタイルシートが無くても、白地で表示されるはずです。


では、このXHTMLに対応しているCSSスタイルシートをば・・・

 
@chaerset"utf-8";
html{
}

/*フォームスタイル*/
form{
    padding: 15px1 15px 5px 15px;
    border: 2px solid #c8eca6;
    background: #e3f7bc url(bg.png) repeat-x top left;/*背景用グラデーション画像を横方向にリピート*/
}                            /*画像アドレスは任意です、自分の好きな色か画像を使うといいでしょう。*/

fieldset{
       margin: 0 0 20px 0;
       padding: 0;
       border: none;   /*デフォルトでラインが出るので非表示*/
       font-size: 90%;
}

legend{
       margin: 0;
       padding: 0 0 10px 0;
       font-weight: bold;
}

*html legend{
        margin-left: -6px;  /*IE6対策(要素が右に寄るのを修正)*/
}
*:first-child+html legend{
  margin-left: -6px;        /*iE7対策(要素が右に寄るのを修正)*/
}

input.text,textarea{
      padding: 0.3em;
      border: 1px solid #ccc;
      width: 270px;
      color: #666;
      font-size: 100%;
}

textarea{
       width: 402px;
}

/*フォームパーツ選択*/

input.text:focus,textarea:focus{
             color: #000;
             background: #fff8ee;
}

div submit{
      padding: 0.8em 0;
      width: 500px;
}

input submit{
      padding: 0.3em 1em 0,3em 1.1em;
      color: #fff;
      background: #54af17;
      letter-spacing: 0.1em;
      font-size: 100%;
      cursor: pointer;/*ポインター型カーソル*/
}


 そんなこんなで、コピーして使って下さい。

 同じフォルダに拡張子をそれぞれhtml cssとして、置いてもらえれば対応します。

 慣れている方なら、これを更に修正して使って下さいな。
  あ〜・・PCの前は寒い・・・。

posted by アラフォー親父 at 10:41 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年10月15日

ほんとうにこれでいいのか?


 何と言いますか、最近はブログの投稿にモチベーションが出てきません。

理由は本当にCSSの事を記載していて果たして役にたつのかどうか?なんですね。

ホームページを作ろうと思い立たない限り、CSSの事などは知らなくても良い情報です。XHTMLタグにしてもしかり・・。

ましてやPHPとかでしたら、全然でしょう。


 自問自答で
「別に勉強したければ、自分で本でも買ってやればいいんじゃないかと・・」とまあ、ブログ記事の制作モチベーション(やる気ですね)がかなりの割合で低下しているわけですね。

 特に最近は、なんですかね“タグの手打ちでサイトを作る”といった事などは、CMSの普及などであまり行わなくなるのではないかという考え方が出てきたわけです。
 CMSというものですが、ムーバブル・タイプ、ワード・プレス・Xoops(ズープス)・Joomla(ジェームラ)などのソフトを、自分が使いたいサーバーに、FTPソフトでアップして使えば、タグの意味やCSS・PHPの事など知らなくてもホームページは作れてしまいますから、何を今更XHTMLやCSSだ!みたいな感じはしてきます。

 サイトのデザインも、CMS専用のテンプレートを使えばいいこったぃ!と、いう感じですから、一々タグの手打ちでサイトを作る必要性が、プログラミングを仕事にしていない人にとって、果たして有益なのかどうなのか?という疑問もあります。

 筆者自身もコンピューターの仕事をしているわけではありませんので、1ユーザとしての目線で物事を判断しています。

 そんなわけで、時代の流れ的にはCMSを使う記事の方が、有益なのかな?という感じはしてきます。
(これもseesarブログですから、タグやCSSは知らなくてもいいわけですねぃ)

 SEOとか特に行わなくても、このブログはping通信位で、Google検索やYahoo検索に引っ掛かりますので、最近どうでもよくなってきてしまいがちなんですよ。

 SEOに関するネタを暴露してみようかな?とも考えましたが、つい最近のYahooアリゴリズム変更に伴って、データーが不足しているのも事実ですし、どんな記事を記載していても要は大きいサイトからの外部リンクが多少あれば、検索順位が上がるわけですから(Googleページランクとかは、その最たる例です)

 正攻法でサイトを作らなくても、どうでもいいサイトなどが検索順位上位に来てしまうのが現状なので、記事の内容というホームページで一番評価してほしい部分は、検索エンジンには無関係な気すらしてきます。

 
posted by アラフォー親父 at 09:14 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年09月27日

骨休みでCMSを・・

   今回は少し骨休みです。

 なんで骨休みなのか・・単純に、CSSスタイルシートに関して記載してきているのですが、最近興味が出てきた物に、「CMS」というものがあります。

 CMS・・コンテンツ・マネージメントというものなのですが、要はレンタルサーバーを借りて、そのサーバーに設置して、ホームページやブログを作りましょう!というやつなのです。

 ここで使っている、無料ブログシーサーの方が、はっきり言って簡単なんです。

 好きなデザインがあれば、そのデザインを使って文章を書いていく。

 しかもこのシーサーブログでは、作りたいブログがあれば多数作る事ができます。
 (小説を書きたい人なんかも、いいかもしれません。)

 特にこだわりが無ければ、CMSは無理に使う必要はないでしょう。

  とは言いつつも、トレンドとして押さえておくべきか?使いやすい面があるから、使うのか?
  実際に使ってみないと、良さや不便さは判らないので実際に筆者が使っている、ハッスルサーバーに導入しております。

  使い方を覚えるまで、しばらく放置している状態なので、これからCMSに関係する記事もボチボチあげていく予定です。

 まあ、これからの課題はphpの制覇です。

 コンビニで売っているphpではありませんよ、php言語です。

 CSS言語はまだまだ続きますが、その合間合間にCMSやらphpに関して記事にしていきます。
 
posted by アラフォー親父 at 13:17 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月28日

CSSの書き方について(マーク・アップの仕方)


  今回は、CSSの書き方についてご説明致します。

  CSSでは、セレクタとプロバディに値という、3つの用語を記載して表します。

 セレクタは、スタイルを適用する対象です・・と、言っても、よく判らないと思いますので、HTMLタグの<P>段落や、全体のbo dy、リストの<ol>などの事なんですね。HTMLの要素の名前と考えて下さい。

 プロバディはfont-size(文字の大きさ)だったり、color(色)であったり指定したい部分の事を言います。

 値は、font-sizeであれば、12pxとか1emなどで、指定します。colorであれば、redやカラー・コード#ff0000で赤を指定 するわけです。
 
 なんとなく、解ってきましたか?

 そして、このセレクタ・プロバディ・値を区切る時には、: コロン ; セミコロンで区切ります。

 表記例として、h1の部分をCSSスタイルシートで指定するとします。
 h1は見出しですから、通常のホームページの字よりも、大きく見やすくしたい!と考えたとしましょう。
 通常の字の大きさが12pxであれば、h1は16pxとして大きくし色を赤にしたいとします。

   記載の仕方は、
   
    h1{font-size: 16px; color: #ff0000;}

 となります。しかし、この様に一行で書いてしまうと、指定するプロバディが増えてしまいますと、大変見にくい状態になってしまいますから、
プロバディごとに改行して記載していくのが一般的になります。

 ですので、この場合ですと
    
  h1 {
      font-size: 16px;
      color: #ff0000;
  }  
 
  と、この様に記載(マーク・アップ)していくやり方ですね。
  これに前回ご説明した、自分のコメントを記載しておけば、どの部分のCSSなのかが、後で見ても一目瞭然というわけです。
 
 /****************************/
 h1 {
      font-size: 16px;   /*見出しの文字*/
      color: #ff0000;       /*文字の色*/
  }  
 /*****************************/
 
  と、こんな感じですね。
 
  後で見ても(自分位しか見ませんが、会社単位でしたらコメントは必須になるかもしれません。)
  判るようにしておくことが、大事ではないでしょうか?
  次は、値の単位について、少しかじってみましょう。
  では、また。
posted by アラフォー親父 at 09:38 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月26日

さて、次回からは・・・

 前回は、HTML言語に特化しているエディタをご紹介してみましたが、いかがだったでしょうか?
 既に使っている方、まだ使っていない方、様々だと思います。
 
 ホームページを作る時に、どの様な形でタグを入れる方法がいいのかは、これはキーボードに慣れているかいないのかで、その人のスタイルが決まってくると思います。

 なんでもキーボードで処理していきたいタイプと、どちらかと言えば、マウス処理の比重が多いタイプに分かれてくると思います。
 初めてパソコンに触れる人は、どうしてもマウスでの処理が多くなりますので、このあたりのから意識的にキーボードの操作を体に染みこませると、後々助かって来る事は事実ですからね。
 
 しかしいくらキーボードに慣れていても、やはり大文字と小文字の切り替えは、少しめんどくさいと感じる人は、エディタ画面上部にアイコンとして、タグ入力が出来るタイプの方がスピーディに入力出来きるのではないかと感じました。
 
 ヘテムルクリエィター・HTML Project2・TTT Editerなどは、その最たるソフトで、大文字で日本語入力をしていても、アイコンをポチッとクリックするだけで、タグを入れてくれます。 Tera Padなども、ツール・ファイルの改良を行えば、先に紹介しているソフトと同じ機能になってしまいます。

 ごく普通のエディタでも、入力補助の部分で、文字切り替えを行わずに出来るタイプもありますが、一般的なエディタですと、中々そこまで出来るソフトは少ないのが実情です。

 英語圏の国で、ホームページを作る時は、この大文字小文字の入力に関しては、あまり気を使わなくていいのでしょうけど、この国の言語は日本語ですから、どうしても大文字入力中にタグを入れる事が多いですからね。

 時々、このマウスが、勝手に動いてくれたら!とか考える事もありますね。(めんどくさがり屋ですね)
 
 まあ冗談はさておいて、これらのソフトがフリー(無料)で使えると言う事は、大変ありがたい事でもあります。
 まだまだ、自分自身の知識が足りないので、これらの様なソフトを自分で作る事が叶いませんが、いずれは!と、心の中で呟いている昨日・今日です。

 HTMLタグに関しては、大体今までの説明で、ほぼホームページ内の内容は表記出来るはずです、もっと詳しく知りたい方は、各自リファレンス・サイトなどを御覧になって覚えて下さい。

 次回からは、現在デザインの主流になっているCSSスタイルシートについて、一緒に考察していきましょう。
 理論や理屈で覚えるよりも、じつはサイズの違う紙を重ねていく!という感じで覚えていきますと、以外と理解のスピードが早くなりますので、ひとつ宜しくお願いします。
posted by アラフォー親父 at 18:27 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月25日

フリーのHTMLエディタは、シェアウェアとほぼ同等の能力があります。

 前回、なにげにSEO対策の話になってしまいましたが、今回は少し骨休みではないですけど
 HTMLエディタについて、お話をしてみたいと思います。
 
 サイトの制作をする時、ホームページ・ビルダーでは、余計なタグなどが入り、W3C基準で考えると、文法の間違いが多い
 という話は、過去させていただきました。
 同じマイクロソフトでも、Dreamweber(ドリーム・ウエーバー)やExpression Web(エクスプレション・ウエブ)の方が、全然性能的には上になります。
 しかし、相変わらず高価な事には変わりがありませんので、フリーエディタを使う事をお勧めしました。
 
 その中でも、特にHTML言語を記入する時、上記のシェアウェア・ソフト並みの実力がある、フリーHTMLエディタを簡単に紹介してみようかと、考えました。(あくまでも独断ですからね)
 
 ◎HTML Project2・・・・・このソフトがフリーで提供されている事自体、奇跡に近い位です。Suseiプラグイン(フリー)を導入しさえすれば、ドリームウエーバーを購入するよりも、断然お得です。アイコンをクリックすれば、タグを入れてくれますので、あまりHTMLの知識が無くても、十分使えます。
 
 ◎Hetecreクリエィター・・このソフトも、先程紹介したHTMLプロジェクト2と同じです。普通でしたら、この2つでHTML文章は十分すぎる程でして、アイコンが日本語なのも使いやすさに繋がっています。
 
 ◎Crescnt Eve・・・・・・中級車向けですが、使い慣れると手放せません。文法チェックもしてくれますので、自分が勉強する為に使うのもお勧めです。ちなみにキーボードで入力しますので、ある程度タグを覚えてからの方がお薦めです。

 ◎ToEditer forHTML・・キーボードの操作に慣れているなら、こちらもお勧めです。タグ入力がCtrl+I&タグに応じたアルファベット・キーですから、ある程度タグの理解は求められますが、 使いこなせれば非常に楽にタグの入力が出来ます。ビューアでの画面確認が非常に早いのも特徴ですね。

 ◎jsh.html・・・・・・・あまり知られていませんが、ホームページの雛型を作りたいときなど、物凄く助かります。
 アイコンをクリックするだけで、ドドッ!とタグを入れてくれますから、違うエディタで文章を作り、このJshでタグをいれたページにコピー&ペーストすると、一気にページが出来あがります。
 
  ファイルの改造を前提にしますと

 ◎TTT Editer ・・・・・・タグファイルを、全て小文字に変更できますので、このファイルを調整しますと、XHTMLにも対応出来ます。開発が止まっていますが、ヴェクターからダウンロードして使うと、大変便利です。
 
 ◎Tera Pad・・・・・・・え!? Tera Padという方、このソフトのツールを改良しますと、ウソみたいにHTML言語入力が楽になります。フリーでOSが95からVistaまで何も問題無く対応出来るソフトですから、古い中古のパソコンを使っている方が、まだメモ帳をつかっているなら、このTera Padに変更する事をお勧めします。超強力なソフトに変身出来ますから、ほんと使って損はありません。
 
 ザァ〜とご紹介してみましたが、以上のソフトは使って損はありませんので、ぜひ一度お試し下さい。
 しかも、フリーですから、お金は一切かかりませんから、安心して使えます。
posted by アラフォー親父 at 19:52 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月24日

いきなりSEO対策だったりする


 SEO対策では、文章内に強調の意味を持つタグが入っていると、効果的とか言われていましたが、最近の傾向ではそんな事は無くなって来まし  た。ロボットによる検索の判定方法が少しずつ変化してきている事があり、文章の内容をチェックしてくる傾向が出てきたからです。

 つまり、昔は有効だった方法が、現在では通用しなくなってきた・・と言った方がいいでしょうか。
 顕著なものに、タグでは強調の部分があります。
 つまり
 <em>や<strong>といったタグの使い方ですね。
 
 以前は<strong>で表記している部分は、よくロボット検索では有効とされてきましたが、現在CSSデザインが進んできた事などもあり、視覚性のタグとして認識される様になりましたので、SEO対策に有効という考え方で用いる事は、かえってデザインを損ねてしまいます。

 要は、内容のある文章なのか?がこれから大事になってきます。
 
 よく調べたい事を検索しますと、もう全然関係の無い、サイトとかが現れるケースが最近は少なくなってきましたが・・・

 例えば、少し具体的な内容を検索すると判りますが、きゅうりで検索するとかなりランダムなのに比べて、きゅうりの作り方で検索すると、色々なサイトが出てはきますが、その全てがきゅうりの栽培に関係している内容ではありません。

 きゅうりの販売や、きゅうりのアフリエイト(普通ありえませんが)サイトなどが、栽培方法に比べて以外と上位で表示されてしまいますね。

 もう少ししてきたら、多分このあたりの対策が行われてくると思いますので、内容の無いサイト(つまり単純なアフリエイトや販売サイト)ですと、今までの様に、上位表示が出来なくなってくる可能性が出てきます。

 これは、ユーザー側が検索をしても、全然欲しい情報サイトが見つからない!という苦情に、大手検索エンジンの会社が対応しつつある事実があるからなんですね。

 実際、Yahoo検索はマイクロソフトとの提携で、実際の検索エンジンシステムは、マイクロソフトのシステムに変更されてしまいましたので、マイクロソフト自体が、グーグルの検索を大いに意識したシステムへと変わりつつありますから、ある日を境にして、ガラッ!と検索順位に変動が生まれるかもしれませんね。

 つまりこれからは、サイトの内容が問われてくるシステムが、構築されていくだろうと読んでいます。
 タグの紹介をするつもりでしたが、なぜかSEOの話をしてしまいました。
posted by アラフォー親父 at 17:15 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月23日

画像を入れるタグ(インライン要素)

  タグの説明から、いきなり全体要素の構成に飛んでみましたが、よく言われる「タグ・リファレンス」なる文章を、チラッと見た時など、
何が書いてあるのか判らない、もしくは理解出来たとしても断片的な部分での理解が多いのではないかと、考えましたので、途中で一度、全体の構造を少し理解してから、再びタグ内容の理解を進めてみましょう。
 
 タグに関しては、前回は行に関係する部分をご紹介していますので、今回インライン要素(行内の一部)である、img(画像です)に関係するタグを考えてみましょう。

  ホームページを制作する時、このimgタグは、サイトに画像を張り付ける為に使います。

  画像タグのimg(イメージ)タグそのものだけでは、ホームページに画像を張り付ける事は出来ません。

 他のタグと組み合わせて、初めてその望む効果を得られる、面倒くさいというか、そんな感じのタグです。

 でも、一回覚えてしまえば、大体こんなもんだ!でOKとなりますから、必要なタグなので是非覚えましょう。

 (記載例)
 <img src="フォルダ名/ファイル名.jpg" alt="画像の内容" width="写真の横幅" height="写真の高さ" />
  @ A   B     C   D E        F         G       H

 一般的には、この様な記載で自分が張り付けたい画像を表示する事が出来ます。
 とりあえず、番号順に説明をしていきましょう。

 @ img 画像を表すタグになります。とりあえずこれが付いていないと、違う意味になってしまいます。
 A src 画像のアドレスを指定します。ちなみに、画像ファイル名(拡張子)はjpg.gif.pingとなります。
 B フォルダ名 画像ファイルを入れているファイル名になります。通常はimgファイルとして、画像を保存します。
 C ファイル名 画像ファイル内の、ファイルの名前です。番号だったり、アルファベットだったりしていますね。
 D ファイル拡張子 もうこれは、画像の種類がjpgかgifやpingという拡張子の種類です。
 E alt これは、画像を見れない場合・・なぜ見れない?健常者ならば、画像は確認出来ますが、視力に問題を抱えている人がパソコンを使う時、音声でサイトを読みあげてくれます。
  この時、どんな内容の画像が張り付けてあるのかを、このaltタ  グで内容を記載していると、読み上げてくれます。「別に、見れないのだから、alt="0"でもいいじゃん」という意見もあり  ますが、人間には想像力がありますから、「ここには、空の写真があります」という音声でどんな風に想像するのでしょう。
 F width これは、画像のサイズで“幅”を表します。通常px(ピクセル)の単位で200とかを″″ダブル・クオテーションで囲みます。
 G height これは、写真の高さです。単位は幅の width と同じです。画像ファイルを確認すると、サイズが確認出来ますのでそのサイズを基準にするといいでしょう。
 H / >終了タグです。XHTMLで記載しています。HTMLでしたら、> だけでOKです。
  
 この他にも、CSSファイルで画像の指定がしていない場合などは、heightの後に、align="left" (画像は左)

 align="right" (画像は右)align="center"(画像は中央)などと指定する事もあります。
 
 これはHTML4.01では以外に使う事がありますので、覚えておくとべんりでしょう。
  次は、めったに使わないけど、知らないと困るかも?と、云ったタグを説明してみます。
posted by アラフォー親父 at 12:16 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月22日

空要素というタグのジャンル分けは?

 はい、今回は空要素についての説明です。

 日本語で考えると、空?ん?何も無い事?と、なりがちでして(私だけかな)最初は、なんじゃ〜これ?と思ったのですが、

  前回までの間で説明してきました、ブロック・インラインなどの要素では、必ず開始のタグと終了タグで、内容を囲みます。
 ここから、ここまでが段落文章。ここから、ここまでがリスト(箇条書き)と、いった感じなのですが、このテキスト(文章)のなかで、特にこれといった内容を含まない要素として、空要素という指定をしています。
  
  ちょっと、判りにくですよね・・・私は、この説明で混乱しましたので
  
  空要素の意味としては、「単に、そこに埋め込むだけ!」という意味で考えて下さい。
  
  要素としては、水平線(hr) 改行(br) 画像(img)などの内容で、前回説明したインライン要素(行内の一部)の中に
 埋め込まれる要素の事を、空要素と呼んでいます。

  ブロック要素などは、ここから、ここまで!という形で、タグをマークしますが、この空要素では、
 ここに水平線を埋め込む、ここで改行を行う、ここに画像を埋め込む、といった、ピンポイントな要素の事を示します。
 
 この空要素は、HTML4.01では、タグをパッと見ただけでは、さほど区別しにくくなっていますが、

 XHTMLでタグのマーク・アップを行う時には、終了タグでは無く、簡易終了タグで記述して区別しています。

  要素の後に、必ず半角スペースとスラッシュを入れる!という事で、区別されていますので、

 この空要素をマークアップする時には、HTMLとXHTMLを混同しやすくなりますので、注意が必要になります。

   HTML    <br>     <hr>     <meta"〜">    <img src="〜">  
  XHTML    <br />   <hr />   <meta〜" />   <img src="〜" />

    こんな感じで、タグのマーク・アップの時には、気を付けなければいけません。
posted by アラフォー親父 at 10:24 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
2009年08月21日

インライン要素と、サイトのツリー(木)構造

(ページ本文)                                      インライン要素の説明をする前に、
 body-----div (ブロックレベル)                         HTML本文を構成しているページ本文
           |----h1                           の構成を把握しておきましょう。
           |    |----p--em ⇔インライン要素  
           |    |----p                         左図の通り、一つのブロック(塊り)の中に
           |                               文章や画像などを、まさしく「はめ込んで」
           div(ブロックレベル)                   作っていくのが、ホームページの基本的な構造
           |----h2                             になります。
           |    |----ul                           ブロックレベル要素の中には
           |    |    |--li                        h1〜h6などの見出し
           |    |    |--li                        p などの段落
                                            ul・ol・ilなどのリスト
                                           tableなどの表
                                          以上のコンテンツ(内容)のブロック(塊り)を表します
                             
       では、インライン要素とは? 実は「行内の一部」という意味がありまして、a アンカー(くさび・碇)
       em・strong(強調)の要素を指しています。

       以前は、「テキスト・レベル要素」と言われていたものでして、ブロックの中にテキスト文章や画像
      といった、内容を埋め込む為の要素になります。
     
      タグ内容も大事なのですが、この全体の構造を頭に入れていると、HTML言語でタグ入力を行う際に、
      自分のサイトがどんな構造になっているのかが、大体把握出来てきます。
     
      インターネットの情報は、ツリー(木)構造と言われていますが、まさしくこのツリー(木)の構造だと
     いう認識があれば、比較的タグなども覚えやすいかと思います。

      文章宣言が木の根として考えると、bodyが木の幹になり、divなどのブロック要素が枝になりますね。
     当然、インライン要素は葉として考えると、イメージがしやすいかと考えて説明してみました。
    
      次は、言葉だけですと、何を言っているのかよく判らない、空要素について説明してみます。
posted by アラフォー親父 at 09:14 | Comment(0) | TrackBack(0) | ホームページを作る | このブログの読者になる | 更新情報をチェックする
最近のコメント
×

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