HTMLタグ講座

ご案内

HTMLタグ講座 ver.1.04

information

ホームページ作成に便利なHTMLタグ講座です。
この講座はHTML4.01です。
ホームページ作成編集ソフトを使わなくてもメモ帳等を利用して編集できます。
是非ご利用ください。
タグの表記に大文字小文字が混在してます。気になさらないようお願いします<(_ _)>

準備

メモ帳では、ちょっとって思ったらテキストエディタを入手してください。
テキストエディタ：TeraPad⇒

ロゴ、アイコン、写真加工をして、ホームページに載せたい時には、画像制作編集ソフトを使用します。

GIMP ⇒
JTrim ⇒
Giam ⇒
下のGIF画像を作るには、Giamを使用します。

ブラウザをIE、Firefox、Chrome、Safari、をダウンロードし、作成変更したホームページをアップロードする前に表示を確認しましょう。

IE ⇒
Firefox ⇒
Chrome ⇒
Safari ⇒

制作変更したホームページを公開するのには、FTPクライアントソフトが便利です。
FTPクライアント：FFFTP⇒

掲示板BBSの無料サイト

html5で削除されるタグ

CSSメモ

margin（マージン）とpadding（パディング）の違いは簡単に言ってしまえば、
背景ごと移動するのがmargin（マージン）、中の文字だけ移動するのがpadding（パディング）です。
設定数値0＝余白＝0、数値が大きくなると余白が大きくなるということです。
余白設定の位置：
margin:上px 右px 下px 左px ;
padding:上px 右px 下px 左px ;

margin:上下左右px ;
padding:上下左右px ;

margin:上下px;左右px ;
padding:上下px;左右px ;

margin:上px;左右px;下px ;
padding:上px;左右px;下px ;

このサイトのCSSについてー暴露編

各ブラウザ（IE、FOX、Chrome）で崩れないように調整するのに結構大変って頭がわるいからしゃあないかww

HTML5では、フレームが使えないので、ブログでの3カラムを改造してみた。

head CSSで定義してません。
全体をcontainerを定義し width:1280px; margin-left:auto; margin-right:auto; text-align:left;
全体センタリングのためbody:text-align:center

box2とmain合わせて:wrapper width:1020px; float:left; margin-right:30px; box1で、marginを指定しspace確保

box2 width:495px float:right space 30px main width:495　float:right; margin-left:30px space 30px box1 width:223 (枠線3pxいれて合計230px）
float:left
text-align:left
width:100%

footer
clear:left
width:100%

スマートフォン用ホームページタグのメモ　「jQuery Mobile」でスマホらしいページデザインを簡単に作る

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <title>jQuery Mobile のサンプルページ</title> </head> <body>  <div data-role="page" id="pcontents"> <div data-role="header"> <h1>jQuery Mobile のサンプル（目次ページ）</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">CONTENTS</li> <li> <a href="#p1"> <h2>jQuery Mobile サンプルページ1</h2> <p>単一のHTML内に複数のページを含められます。</p> </a> </li> <li> <a href="#p2"> <h2>jQuery Mobile サンプルページ2</h2> <p>実際の表示とHTMLソースとを比較してみて下さい。</p> </a> </li> </ul> </div> <div data-role="footer"> <p>フッター</p> </div> </div>  <div data-role="page" id="p1"> <div data-role="header"> <h1>jQuery Mobile のサンプル（中身1ページ目）</h1> </div> <div data-role="content"> <p>ここは、独立した1つのページに見えますが、ソースを見ると全ページが同じHTML内に含まれていることが分かります。</p> <p><a href="#pcontents" data-rel="back" data-role="button" data-icon="arrow-l" data-inline="true">目次に戻る</a></p> </div> <div data-role="footer"> <p>フッター</p> </div> </div>  <div data-role="page" id="p2"> <div data-role="header"> <h1>jQuery Mobile のサンプル（中身2ページ目）</h1> </div> <div data-role="content"> <p>ページの移動には、デフォルトではスライドのエフェクトが掛かっています。</p> <p><a href="#pcontents" data-rel="back" data-role="button" data-icon="arrow-l" data-inline="true">目次に戻る</a></p> </div> <div data-role="footer"> <p>フッター</p> </div> </div> </body> </html>

スマートフォン　その2

「jQuery Mobile」で１ページを表す記述＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝１つのHTMLファイル内に複数のページを含める場合、「jQuery Mobile」では、以下のようなdiv要素を使って１ページの範囲を表します。 …………………………………………………………………………………………… <div data-role="page" id="xxx"> ～ </div> …………………………………………………………………………………………… data-role属性に値「page」を指定し、 id属性には任意の（他と重複しない）名前を記述します。この範囲が「１ページ」になります。以下のように記述すると、３ページ分のデータを含めたことになります。 …………………………………………………………………………………………… <div data-role="page" id="apple"> ～ 1ページ目～ </div> <div data-role="page" id="orange"> ～ 2ページ目～ </div> <div data-role="page" id="grape"> ～ 3ページ目～ </div> …………………………………………………………………………………………… ブラウザでアクセスした際に表示されるのは、最初に記述された１ページ目の中身だけです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝２ページ目以降を表示させるリンク＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝他のページへは、以下のように「ページ内リンク」を作る要領でリンクを記述することで移動できます。 …………………………………………………………………………………………… <a href="#orange">2ページ目へ</a> <a href="#grape">3ページ目へ</a> …………………………………………………………………………………………… したがって、以下のように記述すると、１ページ目が「目次」として機能するようになります。 …………………………………………………………………………………………… <div data-role="page" id="apple"> ～目次ページ～ <a href="#orange">2ページ目へ</a> <a href="#grape">3ページ目へ</a> </div> <div data-role="page" id="orange"> ～ 2ページ目～ <a href="#apple">目次へ戻る</a> </div> <div data-role="page" id="grape"> ～ 3ページ目～ <a href="#apple">目次へ戻る</a> </div> …………………………………………………………………………………………… 以上の記述だけで、横方向にスライドする効果を伴った、ストレスないページ移動が実現できます。ただ、上記の記述では「指で押しやすいメニュー」にはなっていません。その作り方については、次回にご紹介いたします。

スマートフォン　その3

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝指で押しやすいメニューを作る＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝前々回にご紹介したサンプルHTMLソースから、メニューを作っている部分だけを抜き出すと、以下のようになります。 …………………………………………………………………………………………… <ul data-role="listview" data-inset="true"> <li data-role="list-divider">CONTENTS</li> <li> <a href="#p1"> <h2>jQuery Mobile サンプルページ1</h2> <p>単一のHTML内に複数のページを含められます。</p> </a> </li> <li> <a href="#p2"> <h2>jQuery Mobile サンプルページ2</h2> <p>実際の表示とHTMLソースとを比較してみて下さい。</p> </a> </li> </ul> …………………………………………………………………………………………… 上記は、ul要素とli要素で作る一般的な「リスト」の形になっています。 ul要素にdata-role属性を加えて値に「listview」を指定すると、「jQuery Mobile」のリストビュー機能によって、リスト項目（リンク）が画面の横幅いっぱいに表示されます。他には特に何も指定しなくても、各項目の右端に矢印アイコンが加えられるなど、スマートフォンらしいデザインで描画されます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メニュー項目を作る＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝各メニュー項目は、li要素を使って作ります。特別な記述を付加する必要はなく、ただli要素を使ってリスト項目を作り、その中にa要素を使ってリンクを作るだけで、スマートフォンらしいデザインになります。上記のサンプルでは２項目しかありませんが、個数に制限はありませんので必要なだけ追加して下さい。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝リストのヘッダ部分やグループ分け部分＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ li要素にdata-role属性を加え、値に「list-divider」を指定して以下のように記述すると、「メニューのヘッダ」や「メニュー項目をグループ分けするための特殊な項目」が作れます。 …………………………………………………………………………………………… <li data-role="list-divider">CONTENTS</li> …………………………………………………………………………………………… 使わなくても問題ありませんが、リストの先頭に指定しておくと、見栄えの良いメニューになるでしょう。これまで３回に分けて、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、見やすいメニューを用意し、ストレスないページ移動を可能にする方法をご紹介いたしました。ぜひ、活用してみて下さい。

パソコンで表示を確認する。

パソコン上で仮想的なスマートフォンを動作させ表示確認できる便利なソフトウェア「Android スマートフォン・エミュレータ」をご紹介します。 ※Android用アプリ開発のために無償配布されている「Android SDK」　というソフトウェアに含まれているエミュレータです。このツールを利用すると、ウェブサイトがスマートフォンでどう見えるのかを、実機を用意することなく簡単に確認できます。準備に少々手間がかかりますが、一度用意すれば、スマートフォンでの見え方を手軽にパソコン上で確認できるようになりますから、ぜひ活用してみてください。それでは今回は、「Android スマートフォン・エミュレータ」の準備とインストール手順をご紹介してまいります。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●事前準備／「JDK（Java Development Kit）」をインストール＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「Android SDK」の動作には、「JDK（Java Development Kit）」と呼ばれるソフトウェアがインストールされている必要があります。まずは、JDKをダウンロードしてインストールしましょう。 JDKも無償配布されています。配布元であるオラクル社の「Java SEダウンロード」ページ（下記URL）を表示させ、「Java Platform, Standard Edition」と書かれた枠内にある「JDK」項目内の「Download」ボタンをクリックしダウンロードしてください。 ⇒http://member.accesstrade.net/cgi-bin/mmlink?mid=682&lid=13397 　※JREではなく、JDKの方が必要ですから間違えないよう注意してください。ダウンロードしたファイルを起動すると、「Java SE Development Kit」のインストール画面が出てきます。特に何も変更せず「次へ」ボタンを押し続けインストールすれば問題ありません。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●導入作業／「Android SDK」をインストール＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝次に、「Android SDK」をダウンロードしてインストールしましょう。配布元である「Android Developers」サイト内にある「Android SDK」ページ（下記URL）からダウンロードできます。 ⇒　http://member.accesstrade.net/cgi-bin/mmlink?mid=682&lid=13398 　　※英語サイト Windows版・MacOS版・Linux版がありますから、お使いのOSに合ったものをダウンロードしてください。 Windowsの場合は「(Recommended) 」と表記のある「インストーラ付き版」の方が、ウィザード形式でインストールできて便利です。（以下の手順は、主にWindows版での操作方法です。）ダウンロードしたファイルを起動すると「Android SDK Tools Setup」というインストール画面が出てきます。特に何も変更せずに「Next＞」ボタンをクリックし続けてインストールすれば問題ありません。最後に、「Start SDK Manager」項目にチェックを入れた状態で「Finish」ボタンを押せば、セットアップが終了し、「Android SDK Manager」というソフトウェアが起動します。 ※チェックを入れ忘れてセットアップを終了させてしまった場合は、スタート　メニューの「Android SDK Tools」項目内にある「SDK Manager」をクリック　することで起動できます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●初回準備／必要なパッケージを追加インストール＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「Android SDK Manager」を起動すると、追加ダウンロードできるパッケージの一覧が表示され、どれを使用するのかの選択が求められます。エミュレータで使いたいAndroidのバージョンなどを選択してください。例えば、Android 3.0を搭載したスマートフォンを使って表示確認をしたい場合、「SDK Platform Android 3.0」をインストールするよう選択します。全項目を選択しても構いませんが、その場合の総ダウンロード量は1GBを超えますので注意してください。必要なパッケージをすべて選択した上で「Install」ボタンをクリックすると、パッケージのダウンロードとインストール作業が始まります。よほど高速な回線でない限り、ダウンロードにはとても時間がかかりますので、時間に余裕があるときに作業すると良いでしょう。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝以上で、「Androidスマートフォン・エミュレータ」を使う準備は完了です。あとは、望みのスマートフォンをエミュレートする設定を作成し、実際にエミュレータを起動して使ってみてください。その設定の具体的な作成方法や、エミュレータの使い方に関しては、次回にご紹介いたします。

エミュレータの使い方

前回は、アクセス者の利用機器を判別して、 PC版サイトとスマートフォン版サイトを自動振り分けする方法として、以下の6行のソースをご紹介いたしました。 …………………………………………………………………………………………… <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /sp/ [R,L] </IfModule> …………………………………………………………………………………………… 今回は、各行の意味と、カスタマイズ方法についてご紹介いたします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●1・2・6行目＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝この3行は、mod_rewriteモジュールを利用するために必要な記述です。そのまま修正せずに記述してください。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●3行目＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ここでは、ユーザエージェント名を調べて、自動移動させるかどうかの条件を作っています。ソース中の (iPhone|Android.*Mobile|Windows.*Phone) という記述は、　───────────────────────────────── 　1.「iPhone」という文字列が含まれる　2.「Android」と「Mobile」という文字列が同時に含まれる　3.「Windows」と「Phone」という文字列が同時に含まれる　───────────────────────────────── 上記の3条件のうち、最低1つに合致する場合に、次の条件判定へ進むという指示です。条件は、半角「|」記号を使って必要なだけ追加できます。最後に付加している [NC] は、「大文字・小文字を区別しない」という指定です。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●4行目＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ここでは、クエリー文字列（URLの末尾に「?」記号を付加して指定する文字列）を調べて、自動移動させるかどうかの2つ目の条件を作っています。 URLの末尾に「mode=pc」という文字列が付加されている場合には、自動移動させないようにするためです。ソース内では、「!mode=pc」のように「!」記号が付いています。これは、否定を表す記述です。これによって、「mode=pcという文字列が『なければ』次の条件判定に進む」という指示になります。なお「mode=pc」という文字列は何でも好きな文字列で構いません。例えば「view-pc-version」など、何でも自由な文字列が使えます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●5行目＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ここでは、スマートフォン用サイトへの自動移動（リダイレクト）処理を記述しています。直前までに指定した条件（3行目と4行目）がすべて成立している場合にのみ、自動移動が実行されます。例えば、　───────────────────────────────── 　(A) PC用サイトのURLが http://www.example.com/ 　(B) スマートフォン用サイトのURLが http://www.example.com/sp/ 　───────────────────────────────── のとき、 PC用のURLである「(A) http://www.example.com/」に　───────────────────────────────── 　(1) スマートフォンでアクセスすると　　　→ (B) http://www.example.com/sp/ へ移動　(2) スマートフォン以外でアクセスすると　　　→ (A) http://www.example.com/ のまま　(3) スマートフォンでアクセスしても、　　　URLが http://www.example.com/?mode=pc であれば移動しない　───────────────────────────────── となります。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●6行目＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝最後に付加している [R,L] は、「リダイレクトする」・「Rewriteルールはここで終わり」という 2つの意味を表しています。特に修正せず、このまま記述してください。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●5行目のカスタマイズ例＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝先の例では、スマートフォン用サイトを「spディレクトリ」に用意しています。しかし、独立した別のドメインに用意したい場合もあるでしょう。スマートフォン用サイトを、例えば「http://s.example.com/」に開設した場合は、5行目を以下のように修正します。 …………………………………………………………………………………………… RewriteRule ^$ http://s.example.com/ [R,L] …………………………………………………………………………………………… ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ●うまく自動移動しない場合＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝もしうまく移動しない場合は、「^」記号と「$」記号との間に半角の「/」記号を1つ追記してみてください。例えば以下のようにです。 …………………………………………………………………………………………… RewriteRule ^/$ /sp/ [R,L] RewriteRule ^/$ http://s.example.com/ [R,L] …………………………………………………………………………………………… 今回は、アクセス者の利用機器を判別して、 PC版サイトとスマートフォン版サイトを自動振り分けする方法をご紹介いたしました。 PC用サイトに加えてスマートフォン用サイトを新たに開設した場合には、ぜひ活用してみてください。

▲TOP

HTMLタグ講座