*

画像、CSS、JavaScript、Flash、など。HTMLに協力してウェブページを構成するファイルたち。

公開日: : 最終更新日:2013/11/14 ホームページ制作, 用語解説 , , , ,

ウェブサイトの構造。HTMLってなに?の続きです。

ウェブサイト・ウェブページを構成するベースとなるのが、HTMLと呼ばれる文書ファイルであることを話しました。
が、実際ほとんどのウェブサイトは文章だけで構成されているわけではありませんね。

どのサイトを見ても、そこには図版や写真などの画像ファイル、アニメーションや動画、場合によっては音声やゲームなどもありますね。
このブログなど、ほとんどテキストで構成されていますが、それでもfacebookのいいねボタンなど、全くゼロでもありません。

これらはさすがにHTMLのタグだけでは表現しきれません。
別に作ったファイルをHTMLの上に読み込むことで表現されています。

JPG、GIF、PNG。画像ファイル。

HTML以外に最も多用されるのは、やはり画像ファイルでしょう。画像ファイルはJPG、GIF、PNGの3形式が主流で、ウェブ上に存在する画像データはほとんどこのどれかでしょう。
それぞれに特徴、長所短所があるので、その画像で表現したい内容によって3形式を使い分けます。それぞれの特徴については別のエントリーで改めて説明したいと思います。

これらの画像をただ作っただけでは、ページの本体であるHTMLとの関連が分かりません。
画像は本文の内容を図で示したものだったり、商品の写真だったり、それぞれページの内容に関係したものであるので、特定の画像が特定の位置に表示されなければ意味がありません。

そこで登場するのが<img>タグです。
たとえば、HTML本文中にこんなことを書きます。

<p><img class="alignnone size-thumbnail wp-image-171" alt="247911_173186606076590_6207970_n" src="http://arigaria.com/wp/wp-content/uploads/2013/05/247911_173186606076590_6207970_n-150x150.jpg" width="150" height="150" /></p>
<p>Campagnolo Super Record</p>

これにより、<img>タグを書いた位置に、指定した画像が表示されるわけです。
「<img」の後に何やらたくさん文字が書き込まれていますが、これはどの画像を表示するのか、縦横どんなサイズで表示するのか、といった情報が書き込まれています。

実際の表示はこんな感じ。

247911_173186606076590_6207970_n

Campagnolo Super Record

 FLASH、動画。

ファイルを呼び出すHTMLのタグが異なりますが、動画や音声、FLASHなどのファイルも、基本的な考え方は画像の場合と同じで、読み込ませたいファイルの名前と位置、サイズなどの情報をHTMLで記述します。

これをやることによってHTML自体に何か変化があるわけではありませんが、そのページをブラウザで見ると、指定した形にHTMLと画像、動画などが配置されて一つのページとして閲覧できます。

ちなみにFLASHというのは、もともとウェブ上でアニメーションを表現するために開発された技術ですが、次第に役割を増やしていって、単なるアニメーションではなく、ユーザのクリックやドラッグなどのアクションに対してリアクションを起こすような、インタラクティブ(双方向的)なことができるようになっています。FLASHのゲームなどがありますが、あんな感じですね。
ただし、HTMLの最新バージョン、HTML5においてはFLASHは規定されていませんし、iPhoneやiPadでは利用できなくなっています。
いずれは別の技術に代替されてなくなっていくと思われます。

CSS、JavaScript

そのほかにHTMLと関連してページを構成する重要なファイルとしては、CSSとJavaScriptがあります。

CSSというのはCascading Style Sheetsの略。
HTMLは文章そのものと、その文章構造をデータにしたものですが、それに対してCSSはブラウザで見た場合の「見た目」をどう表示するのか、といったことを書いておくファイルです。
HTMLの<h1>タグは「一番大きい見出し」という意味なので、CSSで特に見た目を指定しなければ<h1>に書いた文はやたら大きい文字で表示されます。
確かにこれでも十分ここが大見出しであることは伝わるからいいのですが、味も素っ気もありませんね。
大見出しはブルーの文字で、左にマークが入って、グレーの太い下線を付けたい、とか、見た目をいじりたいですね。
これらのデザイン指定はCSSの方に書いておくわけです。
Style Sheets、の意味はこれで理解できますね。文書構造はHTMLに任せて、そのスタイルを書いたシート、というわけです。

じゃあCascadingとはなんなのか。
辞書的な意味で調べると「(連鎖的につながったタイプの)滝みたいな」といった意味しか出てこないので理解できないわけですが、これはCSSのルールに、上位の取り決めは、細かい部分に特に指定がなければ細かいところにも適用される、という法則があるからです。上流の水がどんどん下の滝に流れていくイメージが言いたいんでしょう。

諸々の具体例はCSSの話をするところでいずれ。

JavaScriptというのは、ブラウザ上で動くプログラムです。HTMLが文書構造、CSSが見た目、そこに載っている画像や動画がJPG、GIF、PNG、FLASHなどという役割分担で、JavaScriptが担当するのはざっくり言うと「画面の動き」です。
例えばGoogle Calendarなど、予定をドラッグして時間や日付を変えたりできますが、こういう動きはJavaScriptでコントロールされています(それだけじゃないけど)。

それぞれについてはもう少し細かくいずれ書きますが、今日のところは、自分が見ているウェブページ一つとっても、実はいろいろなファイルが関わって構成されているんだな、とご理解いただけたら結構です。

adsense

関連記事

cropped-icon.jpg

ブログを始めよう。

ちょっと思うところあってブログを始めるわけですが、全く誰からも相手にされないブログをやっていても仕方

記事を読む

d1f7b72244ac11a859d6c3eeaf6a98e1_s

ホームページ制作の依頼。いったい何に注意すればいいの?

自分でホームページを作る!という話はとりあえず置いておいて、今回は外注業者に何を伝えて発注すべきか?

記事を読む

82f03e2f34742a2b81777059556de0de_s

ホームページ制作業者に制作を依頼!完成までにいったいどのようなやり取りをするの?

このシリーズでは前回どういうことに注意してホームページ制作業者を選定・発注するのか、というあたりを話

記事を読む

no image

ホントに必要?ホームページを作る目的を考える。

昨日は格安でホームページを作ることはできるけど、ホントにそれでいいの? そもそもホームページを作る

記事を読む

20131118131450

Googleの広告とは?検索結果・キーワードに沿った広告を表示するAdWordsの仕組み。

昨日までのウェブサイトが完成してからの流れを受けて、ウェブサイトは作るところよりも、むしろ作ってから

記事を読む

no image

ホームページ制作の相場は?値段は適正?見積・提案はどこを見る?

2日前に話を戻します。 ホームページを制作業者に発注するにあたって、予算をごまかして伝えるな、とい

記事を読む

no image

ホームページとwebサイト。違いってあるの?

すでに私のブログ内でも表記が混在している「ホームページ」と「ウェブサイト」。 何か違いはあるのでし

記事を読む

20131031125137

ウェブサイトの構造。HTMLってなに?

YahooやGoogle、ニュースサイト、楽天やamazonなどのショッピングサイト、faceboo

記事を読む

no image

ホームページが欲しいです。格安ホームページ制作ってどうなの?

「ウチのお店にもホームページを立ち上げたい。予算がないから安く、できればかっこいいホームページが作れ

記事を読む

no image

GoogleのAdSenseというサービス。

制作会社に発注する話の途中ですが今日は違う話です。続き期待されていた方すみません。 初心者向けとい

記事を読む

adsense

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

adsense

175e9dbbeda770ece907171de8870db7_s
予算がなくても自分でできる、ブログからのマーケティングを考える。

ウェブサイトをデザイン制作から行って立ち上げるのは、自分で作るにしろ、

20131028
悪質なSEOと、それへのgoogleの対応とは?

googleのウェブマスター向け公式ブログでガイドライン違反を繰り返す

20131031124731
画像、CSS、JavaScript、Flash、など。HTMLに協力してウェブページを構成するファイルたち。

ウェブサイトの構造。HTMLってなに?の続きです。 ウェブサイト

2663742b95d37f59d55514b2f81f90f9_s
リファラースパムがやってきた!迷惑なサイト訪問者たち。

こんにちは。今日はこのブログのアクセス解析をしていたのですが、リファラ

20131031125137
ウェブサイトの構造。HTMLってなに?

YahooやGoogle、ニュースサイト、楽天やamazonなどのショ

→もっと見る

PAGE TOP ↑