Webデザイナーの為の情報Blog「HTMLMAKER」 tag:www.htmlmake.com,2008-04-17://1 2008-06-30T07:34:41Z HTMLを勉強したい！デザイン、レイアウトを独習したいWeb初心者さんの為の入門講座blogです。 Movable Type Publishing Platform 4.01 リンクタグ tag:www.htmlmake.com,2008://1.15 2008-06-18T02:14:43Z 2008-06-30T07:34:41Z honjo

リンクをつくるaタグの紹介です。

リンクの基本。

<a href="">リンクテキスト</a>

テキストをリンクにする。

<a href="" target="_blank"></a>

リンクを押した時のウィンドウの表示の仕方を指定する。

  • _blank
    新しいウィンドウを新規に開いてそこに表示します。
  • _self
    アクティブなウィンドウに表示
  • _top
    フレームに分割されてる場合分割を解除してそこに表示
  • _parent
    フレームに分割されてる場合1段だけ分割を解除して親フレームに表示。
<a href=""><img src="" /></a>

画像をリンクにする。

ページ内リンク

<div id="hoge"></div>
ページ内のリンク先として指定
<a href="#hoge">リンクテキスト</a></pre>

「hoge」というidまたはnameが付けられた場所までページ内リンクします。

<a href="URL#hoge">リンクテキスト</a>

別ページのパスを指定した後、id名またはname名を指定して別ページ内リンクをつくる事が出来る。

メールリンク

<a href="mailto:sample@address.ne.jp">お問い合わせはこちら</a>

リンクをクリックする事でユーザーのデフォルトメールソフトが起動
指定したメールアドレスへのメールを送信できる。

<a href="mailto:sample@address.ne.jp?subject=件名&body=本文">お問い合わせはこちら</a>

上記のメールリンクにあらかじめ件名と本文を指定しておく事が出来る。

]]> イメージタグ tag:www.htmlmake.com,2008://1.14 2008-06-12T07:44:00Z 2008-06-30T07:35:02Z honjo

画像表示の為のimgタグを紹介です。

画像を表示

<img src="" />

画像を表示。

<img src="" width="" height="" />

画像の横と縦のサイズを指定します。

<img src="" border="" />

※HTML4.01非推奨
画像に枠線をつけます。

<img src="" galleryimg="no" />

IEの独自拡張機能のイメージツールバーを無効にします。(デフォルトはyes)

画像と文字の配置

<img src="" align="" />

※HTML4.01非推奨
画像と並ぶテキストの位置の指定出来ます。

  • absbottom
    画像の下辺を行の下辺に合わせます。
  • absmiddle
    画像中央よりテキストを表示
  • baseline
    画像の下辺を同じ行のテキストのベースラインに合わせます。
  • bottom
    画像の下辺を行の下辺に合わせます。
  • left
    画像を左寄せで配置し、その後の文字を回り込ませます。
  • middle
    画像中央よりテキストを表示
  • right
    画像を右寄せで配置し、その後の文字を回り込ませます。
  • texttop
    画像の上辺を同じ行のテキストの上のラインに合わせます。
  • top
    画像の上辺を同じ行のテキストの上のラインに合わせます。
<img src="" vspace="" hspace="" />

※HTML4.01非推奨
画像の周囲に余白を入れる。

  • vspace
    上下のマージンをピクセル数で指定します。
  • hspace
    左右のマージンをピクセル数で指定します。

<br clear="" />

※HTML4.01非推奨
文字の回りこみの解除。

  • left
    左寄せ画像の右側にある文字の回り込みを解除します
  • right
    右寄せ画像の左側にある文字の回り込みを解除します
  • all
    両方の回り込みを解除します

イメージマップ

<img src="" usemap="" /><map name=""><area /></map>

画像内の指定座標をリンクにする。
イメージマップはまずimgタグでイメージを読み込み、mapタグで画像をマップとして定義、areaタグで座標を指定してリンクを定義します。

  1. まずはimgタグで画像を読み込み
  2. imgタグに「usemap=""」を追加。ページ内リンクのように「#hoge(hogeは任意の名前)」でマップに名前をつける。
  3. mapタグに「name=""」を追加して前行で指定したマップ名を記述
  4. mapタグの中にareaタグをリンクの数だけ記述
  5. areaタグに「href=""(リンク先)」「alt=""(代替テキスト)」「coords=""(座標)」「shape=""(ボタンの形状)」を追加して記述して完成。

ボタンの形状の種類

  • rect
    矩形
  • rectangle
    矩形
  • poly
    多角形
  • polygon
    多角形
  • circ
    円形
  • circle
    円形

座標指定方法

rect(矩形) の時は左上、右下の座標を 「x1,y1,x2,y2」 と指定
poly(多角形) の時はそれぞれの座標を 「x1,y1,x2,y2,x3,y3」 と指定
circle(円形) の時は中心の座標と半径を 「x,y,r」 と指定

]]> パスの指定方法 tag:www.htmlmake.com,2008://1.13 2008-06-11T03:12:17Z 2008-06-30T07:18:44Z パスとは？ 「パス(URL)」とはファイルなどの場所を示すためのものです。 リ... honjo

パスとは？

「パス(URL)」とはファイルなどの場所を示すためのものです。
リンクや画像ファイルの場所を指定する事で、リンクをつくったり、画像を配置したり出来ます。

絶対パスと相対パス

パスの指定方法は「絶対パス」と「相対パス」の二つがあります。
両者の違いは・・・

  • 絶対パス
    対象ファイルへのURLを全文記述して指定する方法。
    http://から始まるものの事ですね。
    別サイトへのリンクなどは必ずこの方法になります。

    • 相対パス
  • 記述するファイルの位置(現在地)を基準とした相対的な指定方法。
    同一サイト内のリンクや画像ファイルの読み込みなどは通常こちらで指定します。

絶対パスの指定方法

対象となるURLを全文記述するだけこのブログのトップページを指定するなら

http://www.htmlmake.com/

と記述する。

相対パスの指定方法

基本的に4パターンの指定ルールがあります

例図
  1. 同一フォルダ内へのリンク
    ファイル名または「./」の記述の後にファイル名を記述。
    例：
    <a href="sample1.html">
<a href="./sample1.html">
  2. 下位の階層にリンクする時
    フォルダ名/ファイル名で記述。さらに深い階層の場合はファルダ名/フォルダ名/ファイル名のようにする。
    例：
    <a href="about/sample2.html">
<a href="about/about2/sample2.html">
  3. 上位の階層にリンクする時
    1階層上の場合には../ファイル名と記述。2階層上ならば../../ファイル名のように「../」の数と何階層上のファイルを指定するかは比例する。
    例：
    <a href="../index.html">
<a href="../../index.html">
  4. 同じ階層の別フォルダにリンクする時
    1度上位の階層に上がってから1階層下がるので前述の応用。
    ../フォルダ名/ファイル名
    例：
    <a href="../img/sample.jpg">
]]> DOCTYPE宣言 主要一覧と説明 tag:www.htmlmake.com,2008://1.12 2008-05-27T06:51:50Z 2008-06-30T07:19:22Z 今回はDOCTYPE宣言をずらずらずら～っと書き並べてみようと思います。 僕自... honjo

今回はDOCTYPE宣言をずらずらずら～っと書き並べてみようと思います。
僕自身指定が無ければXHTML 1.0 Transitionalで書いちゃいます。
このサイトもそうです。
まずはDOCTYPE宣言について知りましょう。

DOCTYPE宣言とは？

HTMLで作られてるサイトは1行目にDOCTYPE宣言って言うものがあります。
このサイトはこのバージョンのHTML（またはXHTML）でつくられてますよ。って明記する事です。

文法を正しく解釈するためには、「どのバージョンのHTMLで書かれたものなのか」を示す必要があって、ブラウザもまずはここは理解してから表示させています。

下記から各DOCTYPE宣言を紹介していきます～

HTML 4.01

HTML 4.01 Strict （厳密な）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

HTML 4.01 Transitional （移行期）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

HTML 4.01 Frameset （フレームセット）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">

現在のHTMLの最新バージョンは4.01。 見たとおり三つのバージョンが存在します。

  • Strictは推奨しないタグ・要素や属性・フレームを使用する事が出来ません。
    最も、正確なDTDになります。
  • Transitionalは推奨しないタグ・要素や属性は使用出来ますが、フレームは使用する事が出来ません。
  • Framesetは推奨しないタグ・要素や属性・フレームも使用する事が出来ます。

ちなみに主流はTansitionalです。

XHTML 1.0

XHTML 1.0 Strict （厳密な）

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML 1.0 Transitional （移行期）

<?xml version="1.0" encoding="Shift_JIS"?>
<!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">
<!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">

XHTML 1.0 Frameset（フレームセット）

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

現在最も主流のXHTML+CSSで制作する場合には上記のDOCTYPE宣言を記述しましょう。
Strict、Transitional、Framesetの定義はHTML4.01と変わりませんが、冒頭にXML宣言を記述する場合としない場合があります。
ここで出てくる問題がIE6・・・IE6は冒頭にXML宣言はつくと「後方互換モード」というものに変わってしまいます。
「後方互換モード」はWeb標準に準拠していない古いブラウザとの互換性を優先させます。標準準拠モードほど文法の正確性を求めませんが、ブラウザごとの表示の違いが明確に現れてしまいます。
よって正確にマークアップしたサイトの表示が意図しない方向に・・・；；
ってわけで冒頭にXML宣言を書かない方がまずは無難です。

こちらも主流はTansitionalです。

XHTML 1.1

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

XHTML1.1は最も新しいXHTMLのバージョンです。
ですがあまり普及していません。
何故かと言うと1.1ではStrictしかDOCTYPEを選ぶ事が出来ず、より厳密なマークアップを求められてしまうからです。
逆に言うと作る時窮屈なんですよね＾＾；

っとざっくりDOCTYPE宣言について書いてみました。
参考になれば幸いです。

]]> HTML5とは？ tag:www.htmlmake.com,2008://1.11 2008-05-14T04:13:23Z 2008-05-14T02:14:35Z Web標準の策定を手がけてる「W3C（World Wide Web Conso... honjo

Web標準の策定を手がけてる「W3C（World Wide Web Consortium）」ってところが策定中の時期HTMLです。 現在の主流はXMLとHTMLをミックスしたXHTMLで、その次はHTML4が主流です。 予定ではXMLが機械処理と相性がよい事で移行していくと見られてましたが、扱いの難しさからか当初の想定より普及が遅れた事でシンプルでHTML4の機械的貧弱さをカバー出来る言語として策定中だそうです。

そもそもHTML4が策定されたのは1997年。 およそ10年ぶりのアップデートという事で注目を集めています。

HTML5では 2次元画像の描画や、音声および動画コンテンツの埋め込みと制御、クライアント側での永続的なデータ管理や利用者側での対話的な文書編集のためのAPI群など、多くの新機能が盛り込まれる予定だそうです。

]]> 自分のサイトに簡単セキュリティ「HTMLエンティティ化」 tag:www.htmlmake.com,2008://1.10 2008-04-28T02:39:38Z 2008-04-30T03:05:20Z 自分でつくったWebサイトにmailto:example@example.ne... honjo

自分でつくったWebサイトにmailto:example@example.ne.jpみたいにメールアドレスを記述すると、スパムメールがすごく来るようになった。
なんて事よをよく聞きます。
そんな時に有効なのが、エンティティ化。
記述するメールアドレスをエンティティ化して、ソース上ではメールアドレスと分からなくしちゃう技術です。
スパムを送ってくる業者っていうのはソース上にある＠を判定してメールアドレスを取得しているようなので、これである程度おさえる事が出来るようですよ＾＾ｂ

HTMLエンティティ化

HTMLエンティティ化

使い方は簡単で、＠マークだけ打ち込んで変換するもよし、全文記述して変換するもよしです。

]]> 海外デザイナーさんのハイクオリティなデザインブログ「BittBox」 tag:www.htmlmake.com,2008://1.9 2008-04-28T01:52:30Z 2008-04-28T01:54:35Z 今回紹介するのは海外のデザイナーさんによるTipsやTutorialの紹介サイ... honjo

今回紹介するのは海外のデザイナーさんによるTipsやTutorialの紹介サイト♪
僕自身は英語全然読めないですけど、Web翻訳を駆使してチェックしてます。結構有益な情報がいっぱいですよ。
デザインも上手いなぁって思います。
ホントデザインが僕の課題です＾＾；

BittBox

BittBox

海外のサイトを見ると英語のみでつくれるのが羨ましくなってきます＞＜
日本語フォントはたまに面倒くさい事になっちゃいますから・・・

]]> HTMLの基礎講座 まずは環境を整えよう tag:www.htmlmake.com,2008://1.7 2008-04-25T02:41:22Z 2008-04-25T02:41:59Z HTMLを勉強する為に貴方のパソコンの設定を少しだけ変えてあげましょう。 とは... honjo

HTMLを勉強する為に貴方のパソコンの設定を少しだけ変えてあげましょう。
とは言ってもすぐ変更出来るので下のチュートリアルに従って設定してみて下さい。

練習用フォルダをつくろう。

デスクトップやマイドキュメントなどにでも練習用のフォルダを作って下さい。
名前はご自分でお好きなものを「Tutorial」や「HTML練習用」等わかりやすいといいと思います。

拡張子を表示させよう

拡張子を表示させないと作業がやりにくいので表示させます。
設定は簡単なので、拡張子を表示させたくない時もすぐ設定できます。

まずはどこか適当なフォルダを開けましょう。
そして「ツール」⇒「フォルダオプション」をクリックしてフォルダオプションを開き「表示」タブをクリックします。
(「スタートメニュー」⇒「コントロールパネル」⇒「フォルダオプション」でもいけます。)

表示タブをクリックして表示される画面

「詳細設定：」となっている部分を下までスクロールさせます。
おそらく「登録されている拡張子は表示しない」にチェックが入ってるのでチェックを外し、「適用」＆「OK」をクリック

表示タブをクリックして表示される画面

これで拡張子が表示されます。

]]> HTMLの基礎講座 はじめに・・・ tag:www.htmlmake.com,2008://1.6 2008-04-25T02:23:02Z 2008-04-25T02:25:06Z 今更ながらHTMLの講座ですｗ たくさんの方がHTMLのサイトをつくってるので... honjo

今更ながらHTMLの講座ですｗ

たくさんの方がHTMLのサイトをつくってるので僕は僕なりのやり方でわかりやすく教えれたらいいなぁっと思っています。

以前と違って、現在のWeb制作はXHTML+CSSでの制作がメインとなっていますが、とは言ってもやっぱり全ての基本はHTMLです。

実際にサンプルのソースなどを配布していきますので、イジりながら覚えましょう。
僕自身も無い知恵絞ってわかりやすく頑張ります。

次は「もっと知るHTML」です。
HTMLの事をもっと詳しく知っていきたいなんて方に実際使うテクニックなんかも織り交ぜてお伝えできたらな～なんて思います。

後、このサイトはDreamweaverとかホームページビルダーとか使わずにメモ帳とタイピングだけでWebサイトがつくれる用に教えていくつもりです。
特にWeb制作者になりたい方はそういうソフトを使わずに、最初は手打ちで覚えましょう。
マークアップの理解に繋がります＾＾

このサイトが貴方のお役に立てれば幸いです。

]]>