デザイナーのためのWeb学習帳（1）
まずはHTML。ハイパーなタグ付き言語
江原顕雄
2008/8/26
Webページを構成する技術を超初心者向けに説明。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを一緒に解読しましょう
インターネットはHTMLでできている？
インターネットの利用者は総務省の調べによると、平成18年度のおととしの時点で8754万人に達したそうです。人口に対する普及率は68.5％で、およそ7割の人が、インターネットを利用していることになります。言われてみれば、60歳以上の年配の方が、メールやチャットでのコミュニケーション、サービスや製品の評判や性能を調べたり、通販やオークションサイトで商品を手に入れたりしていると聞いても、そんなに驚かなくなってきました。
どっぷりとインターネットが生活にしみこんできているのですが、そんな中で、一番皆さんの目に触れやすいのがWebページだと思います。
そして、この記事を読んでいる人は、Webページ制作にかかわっている人が多いと思います。Webページを構成する技術はたくさんありますが、まずは基本の基本である「HTML」について前編・後編の2回に分けて連載をしたいと思います。
Webページを司る多彩なファイルたち！
Webページで文章を表すときにはいろいろな表現方法があります。言い換えると、作り方はさまざまでも、ブラウザで表示すると同じような見た目になります。同じテキスト「インターネットは広大です」をHTML、画像、Flash、JavaScript、Dreamweaverからそれぞれ作成して同じように表示させてみます。
・HTML
| 画面1 HTMLファイルからでも同じように表示できます（画面をクリックすると、htmlファイルを表示します。同内容のテキストファイルはこちら） |
・画像
 |
| 画面2 もちろん、画像ファイルからでも同じように表示できます（画面をクリックすると、画像ファイルを表示します） |
・Flash
| 画面3 Flashでも同じように表示できます（画面をクリックすると、Flashファイルを表示します） |
・JavaScript
| 画面3 JavaScriptでも同じように表示できます（画面をクリックすると、JavaScriptファイルを表示します。同内容のテキストファイルはこちら） |
「文字を見せたい！」という一点突破であれば、HTMLでも画像データでも、Flashでもなんでもいいわけです。
閲覧者のOSやブラウザが違うとフォントや文字同士のすき間のサイズが違ってくるHTMLのページは、デザイナー泣かせです。「イラストレーターで配置して、JPEGで書き出した方がよくない？」と考えた人も多いでしょう？
しかし、現在のWebページは基本的にHTML（もしくはXHTML）で構成されています。なぜそこまでHTMLが利用されているか、HTMLの機能や利点についてチェックしていきましょう。
 |
| 画面4 Dreamweaverからでも同じような見た目のWebページが作成できます ワープロソフトのように自由に配置ができるWebページ制作ソフトは、裏で自動的にHTML・XHTMLに組み直してくれている |
| 1/5 |
| INDEX | ||
| デザイナのためのWeb勉強帳（1） まずはHTML。ハイパーなタグ付き言語 |
||
| Page1 インターネットはHTMLでできている？ Webページを作っているもの！ |
||
| Page2 HTMLの特性 文章同士をリンクさせる「ハイパーリンク」 |
||
| Page3 文章を構造化する「マークアップランゲージ」 |
||
| Page4 マークアップランゲージの利点 |
||
| Page5 HTMLとデザインの話 |
||
デザイナーのためのWeb学習帳 バックナンバー 連載インデックスへ»
- 第1回 まずはHTML。ハイパーなタグ付き言語
| 「デザインハック」コーナーへ |
- まずはHTML。ハイパーなタグ付き言語 （2008/8/26）
Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを攻略しよう - オブジェクトで通信するAMFとS2JDBCによるDB接続 （2008/8/22）
Flex＋Java開発においてS2BlazeDSを使うと、AMFを使った通信が使え、S2JDBCによる簡単なDB接続で生産性が上がります - コンバージョンとランディングの改善ポイントを探せ （2008/8/21）
「仮説」からはじめるコンバージョンとランディングの改善。まずは「仮説」を疑おう。指標の裏に隠された真の改善ポイントはどこだ？ - 1つのコードでAjax、Flash、Adobe AIRを作るには？ （2008/8/18）
RIAの使い分けに悩んでませんか？ OpenLaszloを使えば開発者もユーザーもAjaxかFlashかで悩む必要はありません
|
|
スポンサーからのお知らせ
- - PR -
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜eラーニング編〜
| ◆ | New!
【工事進行基準】対策をチャンスに！ プロジェクト「見える化」で効率アップ！ |
| ◆ | New!
【工事進行基準】システム業界も導入！ 新時代のプロジェクト管理はこれで決まり |
| ◆ | New!
看護休暇、時短勤務、育児フレックス……。 各種の支援で「柔軟な働き方が可能な環境」 |
| ◆ | New!
『こうあるべし』ではなく、全ての人が 力をフルに発揮できる職場環境を考える |
| ◆ | 宅急便もサーバも、止めない・止まらない これが、クロネコヤマトのデータセンター |
| ◆ | 高評価の技術採用で“いいところ取り” 低価格なのに機能は“フル”な次世代UTM |
| ◆ | “超高速”なのに“低価格”なUTM その性能の高さの秘密とメリットに迫る！ |
| ◆ | 金融業界でのBPM適用＜成功ケース＞紹介 BPMシステムの導入のための5つのポイント |
| ◆ | 間違いだらけのセキュリティ対策から脱却 「脅威の見えない化」対抗する2つの特徴 |
| ◆ | “Windows”も“Linux”も“Solaris”も SAP運用に最適な【x64サーバ】とは？ |
| ◆ | Office製品ともシームレスに連携―― “マイクロソフトだからこそ”のERPとは |
| ◆ | ITアーキテクトの仕事の“本質”は「汎化」 〜エンジニア・キャリア進化論（第9回）〜 |
| ◆ | サーバ仮想化構築のハードルを解消！ USBスティック1本から仮想化環境を構築 |
| ◆ | 「コスト削減を最初から目指さない」 ITILの導入“見える化”から始めよう |
| ◆ | ただ連携させるだけじゃない！―既存IT 資産を活かしたSOAが生み出す新たな価値 |
| ◆ | 転職した理由は「社風が合うと感じたから」 入社2カ月“勝ち組エンジニア”に話を聞く |
ソリューションFLASHPR
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。