Category Archives: html

WEBページの定番要素

こんにちは。クリエイターズアカデミーの事務員です。
前回はWEBページデザインの考え方の基本についてお話しました。今回はもう少し具体的なWEBページの定番要素をご説明します。デザインは1から考えるというよりは必要なものをどう見せるかというパズルに近い感覚です。なので必要な要素を知っていれば後は組合せだけなので(この組み合わせの仕方がまた難しいのですが!)まずはこの必要な要素を知っていきましょう。

・WEBページに必ずあるもの

みなさんはWEBサイトをいくつも見ていく中で、共通点のようなものに気づくことはありませんか?たとえば大抵のサイトは左上にロゴがあって、クリックするとTOPページに戻ったり、ページの下には小さくサイトマップやサイトを運営している会社の情報があったり…などなど。
こういった配置やデザインは少し前にご紹介したパララックスサイトのような「最近のWEBデザインブーム」というものではありません。これはWEBを利用するユーザーが長年WEBサイトを見ている中で学習された形であり、初めて訪れるサイトでもページ遷移や構造に迷わない為の地図に近いものなのです。

前回お話しましたUXの観点からも、この「ユーザーがガイド、地図として認識している要素」を考慮してWEBページのUIを考えることが重要です。ではこの「ユーザーがガイド、地図として認識している要素」とは何なのか。そんなところを説明していければと思います。
※私なりに噛み砕いているので他の解説サイトと若干異なる事を言っているかもしれません。が、まずはこんなものなんだと取っ掛かりとして見てもらえればいいのではと思います。

 

・WEBページの3つのブロック

WEBページには大きく3つのブロックがあります。それはヘッダーとコンテンツとフッターの3つです。この三つはそれぞれ、

①ヘッダー:
最初にユーザーの目に入るWEBページの顔です。企業、サイトのロゴやメインコンテンツのメニュー等が含まれている場合が多いです。主にユーザーを引き付ける、興味を持たせる事を目的としています。

②コンテンツ:
WEBサイトの内容。実際の商品や記事が表示される部分で、ユーザーが欲しい情報を具体的に集める場所です。ここではさらにユーザーに買ってもらう、適切な情報を提供して満足してもらう事を目的としています。

③フッター:
WEBサイトの裏の顔。ページ下部にある企業情報や問い合わせ先等、サイト内の詳しいリンクなど、ヘッダーとほぼ同じような役割ですが、ヘッダーとは逆にきめ細かいフォローをする部分です。

この3つの要素はPCサイトだけでなくスマートフォン用のサイトにも見ることが出来るブロックです。なぜこのブロック分けがPCやスマートフォンサイトで採用されているほど重要なのか。それはユーザーがWEBページを開いて3秒でそのWEBページに価値があるかどうかを判断するからです。

体感として3秒以上見るよと思う方がいるかもしれませんが、あくまでこの3秒は平均値です。これより長い人もいればもっと短い人もいます。このように多種多様なユーザーがいるなかで自社のWEBページを見てもらう為にこの3つの要素が必要なのです。

・具体的に何を考えればいいのか

3つのブロックが分かったところで、ではそれぞれのブロックで何を気をつけなければならないのかをさらに詳しくお話していきます。

①ヘッダーは分かりやすく魅力的に!
先程の説明でもお話しましたが、ヘッダーはサイトを訪れたユーザーが最初に目にする部分です。この部分でいかにユーザーに「お!」っと思わせるかでユーザーがそのサイトを利用してくれるかどうかが決まります。
この「ユーザーが最初に目にする部分」というのを「ファーストビュー」とも言いますが、ファーストビューにはコンテンツの一部も含まれます。しかしユーザーが使用している端末によってファーストビューの範囲は異なるので、コンテンツの全てをファーストビューで見ることはできません。そんな時、いつも必ず目に入ってユーザーにサイトに対して期待を持たせ続けるのがヘッダーの役割でもあるのです。
CarrKnowledge_ResponsiveDesign2

ではヘッダーからどうやって期待を持たせるのか。

1.企業のロゴやイメージ画像から安心感を持ってもらう
2.メニューバー(グローバルナビ)からユーザーが求めている情報がある事を示す
3.フォントや配色から他の類似サイトと差別化してユーザーに覚えてもらう

このようなことがヘッダーでは求められます。主に①と②ですかね。③は個性に走りすぎると使い辛さに繋がるので可能であればという感じです。
また、大体ヘッダーの縦範囲は150pxくらいが平均のようです。(参考:http://nh-lab.com/header-desighnheight/)
左上に企業ロゴ、右上に検索やログイン等の主要機能や、営業時間や電話番号などの企業情報という配置を踏襲しながらWEBサイトを見に来るユーザーが何を求めて見に来ているのかを予測しながら画像やフォントを選択していければ自然と分かりやすく魅力的なヘッダーになっていくと思います。

②コンテンツは配置が命!!
ヘッダーは無意識にみる要素ですが、コンテンツはユーザーが意識して見る要素です。なので見やすさが一番重要です。
基本的にWEBページでは文字は横書きなので左から読みます。なので自然とユーザーの目線は左に寄っていきます。ですから画像を左に配置して右側に文章をつけていくというやり方は画像を見て興味を持ったユーザーがそのまま文章も読んでくれやすい配置と言えます。
また、コンテンツは商品の説明や情報の発信を行うスペースなので必然時に文章量も増えていきます。そんな時に気にしたいのが文字の間隔と行間です
行間について詳しく知りたい方は下記をどうぞ。読みやすい行間とはという事でとても分かりやすく説明されています。
(参考:http://www.actzero.jp/developer/report-3439.html
その他にもレイアウトについて参考になりそうな記事のリンクをつけておきますのでいろんなサイトを見る際にこんなことを思い出しながら見ていただきたいです。
(参考:http://webdesignrecipes.com/web-design-beginner-learning-dtp-design/
(参考:http://wp.yat-net.com/?p=3633)

③フッターは丁寧に補足
フッターとヘッダーの内容は共通する部分が多いですが、先程も説明した通り、この二つは目的が違います。ヘッダーはぱっと見の印象で勝負しますが、フッターはある程度そのサイトやWEBページに興味のある人が見る部分です。ですからヘッダーよりもきめ細かい情報やヘッダーには載せきれなかった情報までフッターがカバーする事が必要になります。
情報量が増える事からヘッダーよりも広いスペースをもっつフッターも見かけますが、どこもヘッダーと比べればシンプルで見やすさを重視しているように思います。
(参考:http://handywebdesign.net/2013/10/my-footer-design-gallery/)

フッターもコンテンツ同様行間に気をつけてレイアウトする事が重要です。またサイト内の案内を兼ねる場合には関連する内容をどうまとめるかというところにも注意していかなければなりません。色々なサイトを見ながらどんな情報がなくてはならないのか、どんな情報があると親切なのか研究していくといいでしょう。

・百聞は一見に如かず!!

WEBページの3つのブロックについてどんなことを気にするべきかという事で今回お話してきましたが、しかし分かっていても実際に組み上げるのが難しいのがデザインです。そこでうまくデザインをするにはどうすればいいのか。それは多くのサイトを見て自分の中に情報をストックしていくことです!
どんなサイトが見やすくてどんなサイトが見づらいのかは、実際に見てみないと分からないことが多くあります。まして自分で作ったものの見やすさ、見づらさに気づくのはとても難しいです。ですから、日頃から色々なサイトを見て、自分の中で良いイメージ、悪いイメージをストックしていくのです。そうすれば自分のデザインが良いイメージを踏襲しているか、悪いイメージを踏襲しているかを判断する力が付いてきます。そういった日々の研究の中からいいデザインが生まれていくんですね。

というわけでこれについても参考サイトを見つけてきました。
Webデザインや配色をサポートする新サービス   Croppy(クロッピィ)
Croppy(http://croppy.org/)
こちらはヘッダーやフッター、グローバルナビやサイドバーといったカテゴリ別にデザインを見ることが出来るサイトです。どんなデザインの仕方があるのか、まずは数を見て目を養っていくのが上達の近道です。

WEBページの構造ってどうなってるの?

こんにちは。クリエイターズアカデミーの事務員です。
前回HTMLとCSSデータの作り方をご説明しましたが、皆さん無事にサンプルページなど作れたでしょうか?私は初めてhtmlファイルを作ってサンプルページを開いた時には「私でもホームページが作れた!」と感動しました。そんな体験をされた方がいれば嬉しいです。

さて今回はWEBページの構造についてちょっとご説明いたします。
企業サイトや通販サイト等、とにかく一つのWEBサイトにはページがたくさんあります。その1ページ1ページにhtmlファイルが存在するのですから膨大なファイルを管理しなければなりません。もちろん画像もたくさんあります。
さすがにこれらすべてを一つのフォルダに入れて管理していたのでは何か更新をしたくても目的のファイルを探すだけでも一苦労です。そこでWEBページの構造をご説明し、更新しやすいファイル整理の方法をお教えします。

・整理のロジックは異なってもやることは一緒!

ファイルの整理の仕方は現実のお部屋の整理の仕方と同じように、人それぞれ異なります。一般的に本は本棚に、小物は引き出しに等の慣習?はありますが、本をタイトル順に並べるか大きさで並べるか、収納されていれば順番は気にしないなどは個人で違います。
これは企業にも言えることで、その企業がどのようなロジックでファイルを整理しているかは企業によって異なります。

しかしロジックが異なるだけで整理する事が必要なのは変わりません。今回はその整理の仕方をご説明します。

・まずはロジックを決めてフォルダを分ける
ファイルの整理と言ってもただフォルダに入れるだけでは整理とは言えません。まずは整理するときの規則を決めます。これは必須の作業ではありませんが、更新を行って将来的にどんどん画像やhtmlが増えていくことが分かっている場合は最初に規則を決めておくことで効率のいい作業が出来るようになります。
説明が進むにつれご理解いただけると思いますが、WEBサイトのファイル整理は後から行う事が大変難しいです。一度整理してしまったらずっとその規則のまま作業し続けなければならなくなりますので甘く見てはいけません。

まずはサンプルとして下のようなページを用意してみたので、これを整理していきたいと思います。
sample15sample16

①関連の強いものを一まとめにしていきましょう
規則を考える時の一つの例ですが、関連の深いものを一つのフォルダにまとめていきましょう。下の図はイメージですが、このような感じに分けていくと分かりやすいのではないかなと思います。
※企業では複数の方が同じ作業をすることがあります。誰が見ても分かる構造にすることもお仕事です!!
※sample03とsample04はこの後の説明の際に比較として使うので分けてあります。
sample17

②規則に沿ってファイルを収納しましょう
①で決めた規則に沿ってファイルを収納していきましょう。
sample18
ここまでは難しくないと思います。
さて、それではindex.htmlを開いて整理した各ページを確認してみましょう。
するとどうでしょう!?見れなくなってしまったページや画像が表示されなくなったページがありますね?

これがWEBサイトの構造を知らないと起こってしまう大きな問題であり、WEBサイトのファイル整理を難しくする原因です。

・整理されて表示できなくなったファイル、画像を表示できるようにする
ページが表示できないままではWEBサイトとして成り立たないので、整理されたファイルがしっかりと見れるように修正していきたいと思います。
修正の内容は簡単。どこのフォルダに入っているファイルなのかを指定してあげればいいんです。

HTMLのリンクタグや画像タグではリンクする先のファイル名を入力しますが、基本的にただファイル名を指定するやり方は、リンク元のページ(今回のサンプルではindex.html)のHTMLファイルの入っているフォルダ(今回のサンプルではweb-siteフォルダ)と同じフォルダにリンク先のページデータ、画像データがあるものとして機能します。
ですから別のフォルダ等に分類してしまうと同じフォルダ内にデータが無くなってしまうので表示エラーを起こすのです。

ファイルを分類したフォルダを指定するにはどうすればいいのか。
実はフォルダ名をファイル名の前に入れてあげるだけでいいんです!!

リンクで指定するファイル名はリンク元と同じフォルダに入っていることが前提ですが、フォルダが異なる場合には「フォルダ名/ファイル名.html」というような形で指定します。
これはリンク元と同じフォルダ内に存在する「フォルダ名(今回のサンプルで言えばsample01、またはsample02、imageのどれか)」というフォルダに入っている「ファイル名.html」を表示しなさいと指定するものです。
sample19
これが出来れば色々なフォルダに分類されたファイルでも正常に表示する事が出来ます。今回のサンプルではindex.htmlからsample01.html、sample02.htmlへのリンクをつなぐ場合や、sample03.html、sample04.htmlからimageフォルダの中の画像を表示するとき等に使います。※sample03.html、sample04.htmlはindex.htmlと同じフォルダに入っているのでファイル名の指定のみで正常に表示する事が出来ます。

・逆にフォルダをさかのぼるにはどうしたらいいのか?
さて、今ご説明したのはフォルダを潜っていくリンクの指定のやり方ですが、逆にフォルダをさかのぼるにはどうしたらいいのかもご説明します。
フォルダを一つ前に戻るには、先ほどフォルダ名を指定した部分に一つフォルダを戻りますという意味の「../」を入力してファイル名を指定します。この「../」だけでフォルダをさかのぼることを指定できるんです。
sample20
ちなみにフォルダを複数戻りたい場合には、戻りたいフォルダの数だけ「../」を入力すれば大丈夫です。
例)../../../../ファイル名.html
└4つ前のフォルダにある「ファイル名.html」へリンクするときに使います。

また、フォルダを一つ戻って、違うフォルダに潜りなおすこともできますので「../」と「フォルダ名/」の指定の仕方は覚えておいてください。
例)../image/sample01.gif
└一つ前のフォルダに戻り、imageフォルダに入りなおし、その中のsample01.gifへリンクするときに使います。今回のサンプルページではsample01.html,sample02.htmlのファイルで画像を表示する時に使用します。

 

いかがだったでしょうか。HTMLのタグやCSSやJavaScriptを覚えるのも大変ですが、実はこのリンクの構造を理解するのが案外難しいのです。また、このような細かな指定をしていかなければならないので、一度公開されたWEBサイトのデータをフォルダ分けしてしまうとリンクのアドレスを修正しなければならない部分が大量に発生してしまいます。これは表示エラーを起こしてしまうミスのもとですのでなるべく避けていきたい問題です。

ですから制作段階でのファイルの整理がとても大切になるのです。

皆さんもご自分でHTMLファイルをいくつかのフォルダに分けてリンクをつなぐ練習をしてみるといいでしょう。企業はこのフォルダの階層がいくつもあって、私が見たことがあるものでは7つの階層が…
しかしこの構造を理解してしまえばファイル整理はとても簡単です!ちょっと難しいだけで楽しくない部分かもしれませんが、マスターしていきましょう!

WEBページを作ってみよう!

こんにちは。クリエイターズアカデミーの事務員です。
前回はWEB制作、WEBデザインをするなら知っておかなければならない、知っておくべきHTML
についてお話ししましたが。しかし、そもそもHTMLやCSS、JavaScriptデータの作り方を知ら
なければタグを知っていても意味がないので、今回はHTMLとCSSデータの作り方をご説明しま
す。
※JavaScriptの作り方も基本的に一緒です。

まずWEBサイトを作るのに特別なソフトは必要ありません。Windowsで言えばメモ帳というプログラムで作ることが可能です。(Macであるとテキストエディットというものが該当するようなのですが、私が主に使用しているのがWindowsなのでWindowsメインの説明をさせていただきます。)
WEBサイトに表示する画像を作るにはさすがにソフトがないと不便ですのでphotoshopやillustratorを用意したいところです。

①メモ帳にHTMLを入力していく
まずHTMLファイルを作っていきましょう。
メモ帳を開いたらとにかくHTMLを入力していきます。前々回ご説明したような<html><head><body>タグを書いていきましょう。
sample07
これだけだと<body>の中に何もないので、一応前回お話したタグや適当な文章も入れておきましょう。
sample08

②ファイル名に「.html」をつける
①で書いたような内容が出来上がったらhtmlファイルとして保存します。
ここでの注意点は普段のwordや画像の保存とは違い、拡張子を自分で入力することになります。保存形式の候補には出てきませんので必ず自分で入力してください。
sample09
ファイルを保存した場所にブラウザのアイコンがついたファイルが出来ていたら完成です!
sample10

③HTMLファイルが出来ました!
完成したファイルをダブルクリックするとブラウザにWEBサイトとして表示されます。
入力したタグは見えなくなり、リンクタグや画像の表示タグも機能しています。
※この段階ではリンク先のページは作っていませんので押してもページが見つかりませんのエラーが出ます。
※画像は簡単なものを用意しました。
sample14
brのタグが機能しているかもしっかりと確認できるのではないでしょうか。

さて、これでHTMLファイルは完成です。とても簡単ですよね?
次はCSSファイルを作っていきます。

①CSSもメモ帳で作成します
HTMLと同様にメモ帳に入力していきます。しかしCSSはHTMLよりさらに簡単で、最初からCSSの設定を書いていきます。
※CSSの実際の書き方については後日またご説明しますので今はこんな感じなのか程度でお願いします。
sample11

②CSSはファイル名の拡張子も「.css」にする
HTMLファイルと同様に拡張子を自分で入力して保存します。ちなみにJavaScriptもメモ帳で作成する事ができますが、保存するときは「.js」の拡張子にして保存します。
※先程のHTMLで「style.css」のCSSファイルを読み込む設定をしたので、そのファイル名に合わせています。
sample12

③CSSファイルも完成!
CSSファイルが完成したら先程作ったHTMLファイルをもう一度開いてみます。
すると背景にCSSファイルで設定したグラデーションが適応されているのがお分かりいただけるかと思います。
sample13

これでCSSファイルも完成です。
あとはHTMLもCSSもタグや設定の書き方を覚えてしまえばもっと複雑なものを作ることが可能です。使ってみたいタグや設定を見つけたら、このような方法でサンプルページを作って試してみましょう。

※注意点※
HTMLファイルや画像、CSSは全て同じフォルダに保存しましょう。フォルダの中にさらにフォルダを作ってファイルの整理…なんて事をすると画像が表示されなくなったりCSSが適応されなくなったりします。
データの整理の仕方にも方法があるのでこれも後日ご説明したいと思います。

いかがでしょうか?画像については今回説明しておりませんがhtmlやcssのファイルだけでもすぐに作ることが出来ました。ここがWEB制作・WEBデザインの入口です。
「こんなに簡単にできるならちょっと作ってみたいな」
「他にはどんなことが出来るタグがあるの?」
「あのサイトのあのデザインはどうやって作ってるんだろう?」
と思った方!是非WEB制作について学んでみませんか?きっと今よりももっと楽しいと思うはずです。そんな楽しい事をさらに仕事にできたら…
そんな皆さんのWEB制作・WEBデザイナーへの道を応援するのが我々クリエイターズアカデミーです。一緒にWEB制作・WEBデザイナーを目指してみませんか?

WEB制作、WEBデザインで知っておきたいHTML

こんにちは。クリエイターズアカデミーの事務員です。
前回はWEB制作、WEBデザインを勉強する前に知っておきたい知識についてお話ししましたが、今回は前回に引き続いてWEB制作、WEBデザインをするなら知っておかなければならない、知っておくべきHTMLについてお話します。

前回はWEBページを作っている基本的な三つのタグについてご説明しました。今回はその3つのタグの他にCSSやJavaScriptを使用するためのタグとWEBページの機能で必ずと言っていいほど入っているリンクタグや画像を表示するタグについてご紹介します。
この他にも知っておきたいタグはたくさんあるのですが、それはまた次回にでも…。

●これがなければCSSやJavaScriptは使えない!

WEBページを制作する際にCSSやJavaScriptを使っていないところは最近ほとんどありません。どのページもCSSやJavaScriptを使ってページを魅力的に見せています。

そもそもCSSやJavaScriptをとは何でしょうか。
CSSはスタイルシートとよばれるもので、WEBページの装飾を目的としたものです。
CSSで出来る装飾は文字の色や背景画像の指定はもちろん、一見画像に見えるようなボタン表示させたり文章の行間などもCSSで設定する事が出来ます。
sample05
最近よく見るこんなボタンも実は画像ではなくCSSが作っています。
(引用サイト:http://touch-slide.jp/column/304/)

JavaScriptはプログラミング言語の一種で、HTMLやCSS以上により複雑な装飾や機能を設定する事が出来ます。
たとえばユーザーがWEBサイトに現在の時刻を表示したり、WEBページの背景に星を降らせるなどの動きをつけることや、メールフォームなどでの入力に漏れがないかの確認、入力内容が正しいかというチェックをすることもできます。
sample06
通販サイト等で「メールアドレスが間違っています」と警告が出たことはありませんか?そういった入力内容のチェックもJavaScriptで行う事が出来ます。
(引用:http://javascript.eweb-design.com/)

そんなWEBページを作る上で重要なCSSとJavaScriptですが、一般的にはHTMLのデータとは別のデータとして作成されます。ですのでHTMLの中で別データとして用意されているCSSとJavaScriptを読み込むことが必要になります。その読み込みを行うタグがコレです。

CSSの読み読み:
<link rel=”stylesheet” type=”text/css” href=”○○○.css”>

JavaScriptの読み込み:
<script src=”○○○.js” type=”text/javascript”></script>

※○○○の部分は両方ともファイル名が入ります。

この二つのタグを、先日ご説明した<head>~</head>の「~」部分に入れてしまえばHTMLにCSSやJavescriptを読み込み、使用する事が出来るようになります。
Javascriptは<body>~</body>の中に入れて使う事もありますが、その時に使うタグも上記と同様なので、このタグは覚えておきましょう!必ず使うことになります!!
※HTMLのデータに直接CSSやJavaScriptを書くこともできますが、量が膨大になるのでCSSとJavaScriptは別データに分ける手法が主流です。

順番が前後してしまって申し訳ありません!次回以降そもそもHTMLのデータやCSS、JavaScriptのデータの作り方をご説明します。中身の説明だけでは作れませんよね。
しっかりWEB制作を体感していただけるよう情報をupしていきたいと思います!

●WEBページを作る上で良く使うタグはこれ!

次に実際にWEBページを見たときに表示される内容、<body>~</body>の「~」の部分で活躍するタグについてご紹介します。
ここで紹介するのはほんのごく一部です。ここで紹介する以外にも多くのタグがあります。将来的にはここで紹介する以外のタグについても覚えて使いこなして頂きたいですが、まずは簡単なものやよく使うものをご紹介いたします。

◆リンクを作るのに必要な<a href=”○○○.html”></a>

これはどんなWEBページにもあるリンク(クリックすると別のページを表示する機能)を作る為のタグです。リンクがボタンになっていたりテキストだったり画像の場合もありますが、使用するのは必ずこのタグです。しっかり覚えておきましょう。

<a href=”○○○.html”>リンク機能をつけたい文字を入力</a>

○○○.htmlの部分には表示したいページのアドレスが入ります。アドレスバーに表示されるhttp://~○○○.htmlと、最初から入力してもいいですし、○○○.htmlでも機能します。
しかし今後詳しくWEBサイトの構造について解説したいと思いますが、○○○.htmlだけではページを表示できない場合があります。ですからhttp://~○○○.htmlと最初から入力する方がリンクに失敗するリスクが少ないという意味で安全です。
※よく「””」を省いてしまったり入れ忘れたりすることがありますが、「””」がないと機能しませんので必ず入れましょう!
※終了タグを忘れると<a href=”○○○.html”>のタグ以降に入力した全てのテキスト、画像にリンク機能が付いてしまいます。必ず終了タグがついているか確認しましょう。

◆画像を表示するのに必要な<img src=”○○○.jpg”>

WEBページに画像を表示する方法はいくつかありますが、もっとも一般的なのはこの<img src=”○○○.jpg”>のタグです。このタグには終了タグがありませんので、このタグ一つ覚えておけば大丈夫!リンクタグと合わせて

<a href=”○○○.html”><img src=”×××.jpg”></a>

なんて使い方をすれば画像にリンク機能をつけることもできますよ!

こちらもリンクタグ同様、○○○.jpgの部分は表示したい画像のアドレスです。http://~○○○.jpgと最初から入力する方が画像表示に失敗するリスクが少ないという意味で安全です。
ちなみに「.jpg」の部分は画像によっては「.gif」や「.png」などの場合があります。表示したい画像の拡張子がどれなのかはしっかり確認しておきましょう。これを間違うとファイル名が合っていても表示されません。

◆文章の改行にも実はタグが必要!?<br />

ワードやメモ帳などではenterキーを押すと自然と改行されますよね?しかしWEBではenterキーで改行しただけでは実際のWEBページには反映されません。そこで活躍するのが<br />です!<br />は終了タグのような形をしていますが<br>~</br>と文字を間に挟む必要はありません。
<br />一つでenterキー一回分として表示に反映されるので覚えておきましょう。
ちなみに<br>だけでもenterキー一回分として表示に反映されますが、最近は<br />が正式な表記になりつつあるので終了タグの形で使うといいでしょう。

◆CSSをが活躍するための影の功労者<div>

この<div>タグはWEB制作・WEBデザインでは本当に活躍します。ディブタグです。これは本当に覚えておいてほしいです!!!
この<div>タグだけでは実は何の効果もありません。文字の色も変わりませんしリンクもつき
ませんし本当に何の機能もありません。こんなものが何のために必要なんだと思う方もいらっしゃるかもしれませんが、このタグが一番効果を発揮するのはCSSとを併用するときです!!
CSSも後々詳しく説明したいと思いますが、実はCSSは細かい装飾まで設定することは出来ますが、ページのデザインが複雑になればなるほどどこのどの部分に適応させるかといったピ
ンポイントな指定が難しくなります。そんな時に活躍するのが<div>タグなんです。
これもまた後日詳しく説明したいと思いますが、

┌<div id=”header”>
│  あいうえお
│ 
│ <div id=”header” class=”sidemenu”>かきくけこ</div>

│  さしすせそ
└</div>

という風に<div>タグを設定しておくと<div>タグのid=”header”の中で書かれている文字は文字色赤に、その中でも<div>タグのclass=”sidemenu”の中に書かれている文字は大きくという設定の仕方が可能です。
これを実際に設定して表示すると

あいうえお

かきくけこ

さしすせそ

となるわけです。
実際のWEB制作やWEBデザインではこれを応用してもっと複雑なデザインをWEB上に再現していきますが、とにかく<div>タグが今後大活躍する事だけでも覚えて頂ければと思います!

今回は駆け足の説明になってしまいましたが、今後さらに分かりやすくご説明しようと思いますのでお付き合いください。
タグやCSSを覚えると飛躍的に楽しくなるWEB制作です。WEB制作・WEBデザインの楽しさが少しでも多くの方に伝わればいいな…というわけで今後も頑張ります!

WEB制作・デザインを勉強する前に知っておきたい事

こんにちは。クリエイターズアカデミーの事務員です。
今回はWEB制作、WEBデザインを勉強する前に知っておきたい知識についてお話します。

WEBはHTMLからCSS、JavaScript、php、画像関係だけでもphotoshop、illustrator、Flash、Dreamweaver…などなど知っていなければならないこと、知っておきたいこと、出来れば出来るようになっていたいことなどとにかく幅が広いです。その全てを1から学んでいくのは大変!!
クリエイターズアカデミーではそんな初心者でもしっかり技術を身につけて頂けるよう日々努力していますが、それでも基礎を知っているか知らないかでは上達にかかる時間に大きな差が出てしまいます。
ですからここで少し、WEB制作・デザインについて学ぶ前に知っておきたい基本についてご紹介いたします。

まったくの未経験者向けの内容になっていればと思ってお教えしたいと思いますので、ある程度HOW TO本を読まれているような方には面白くないお話かもしれません。ご了承ください…
また、本も買って読んでみてるけどうまくいかない事が多い…なんて思ってる方は目を通していただいて基本に立ち返ってみるのもいかがでしょうか?

WEB制作の基本!HTML

WEB制作においてHTMLが分かることはもはや大前提です。HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称で、WEB上の文書を記述するためのマークアップ言語であるという風にどんな解説サイトも解説書も説明してくれるかと思います。

簡単に言ってしまえばWEB上のページを直接作り上げているのがHTMLです。
極端に言ってしまえば、HTMLとセットで名前が挙がるCSSやJavaScriptなどがなくてもHTMLだけでWEBページを作ることは可能です。CSSやJavaScriptはオマケです。(業務としてWEB制作を行う場合にはこのオマケもないがしろに出来ないのですが、このお話はまた後日)

ですからもしも皆様がWEBに興味を持ったばかりでまだ何の知識もないということであれば、まずはHTMLから理解していきましょう。

WEBページを作っている3つのタグ

HTMLがWEBページを直接作り上げてるとは、つまりどういう事なのか。一番分かりやすいのはまず見てみることです。
まずはどんなページでも構いませんのでパソコンでWEBページを見てみましょう。
次にWEBページのどこでもいいので余白部分でマウスを右クリック→「ソースの表示」を押してみましょう。するとびっくり!よくわからない文字の羅列が登場!
そうです、ここで表示されている内容がHTMLがWEBページを作っていることの証なのです。
※「ソースを表示」という項目が表示されない場合は「要素を検証」を選択しても見ることが出来きます。
※Flashが使用されているサイトはこの方法でソースを確認することはできないので、違うサイトでチャレンジしてみてください。
※画像やリンクの上で右クリックしても「ソースを表示」の項目は出てこないので、出来るだけ余白の上にカーソルを合わせて右クリックしてみてください。

適当なページを表示して…

靴下のhacu

右クリック→ソースを表示

sample01

(使用サイト:https://www.hacu.jp/)

さて、表示されたHTMLの内容に驚いて「こんなものは分からない!無理!」と思われる方もいらっしゃるかもしれません。しかし、HTMLは実はとても単純な構造をしているのです。まずは落ち着いて、内容を見ていきましょう。

①WEBページの設計をしていることを示す<html>タグ

どんなWEBページのHTMLを見ても必ず存在する3つのタグがあります。そのうちの一つが<html>タグ。

少々脱線しますが、タグとはHTML内で”< >”で囲まれているものを指し、”<○○>”と”</○○>”でセットで使用します。「/(スラッシュ)」がない”<○○>”を開始タグ、「/(スラッシュ)」がある”</○○>”を終了タグと言います。
タグは全て半角英数字で表記され、終了タグを入れ忘れるまったく機能しないことも多々ありますのでご注意を!また”< >””が全角になってて機能しないというミスもありますので気をつけましょう。○○部分のスペルの間違いは見つけやすいのですが、意外と”< >”が全角になってしまうミスは見直しても見つけづらいです。
※○○の内容はタグによって異なります。
※稀に終了タグがないもの、終了タグだけで使うものもありますがそのお話はまた後日…

この<html>タグは<html>と</html>の間に記述された内容がWEBページの設計図になっていることを表しています。この<html>タグがないとWEBブラウザ(InternetExplorerやFireFox、Chrome、SafariなどのWEBを見るプログラムのことです)はWEBページとして認識できないので表示できません。
先程例に挙げたサイトのソースにもしっかり<html>タグが入っています。
※<html>タグにオマケがついていたりもしますが詳しい内容は後日…

sample02

②WEBページに表示されない情報を定義する<head>タグ

<head>タグも<head>と</head>でワンセットとして使用します。
<head>タグは「お気に入りに追加(ブックマーク)」をした時や、WEBページを開いた時にメニューバーの上に表示されるWEBページタイトル、googleに代表される検索サイトにどんなキーワードの検索で表示してほしいか等などのWEBページ自体には表示されないけれど、WEBページの裏側で表示のサポートをする色々な機能の定義をするタグです。
CSSやJavaScriptの定義をするのも<head>タグなので、慣れてくるととてもお世話になるタグです。

sample03

③WEBページに表示されている内容が全て詰まった<body>タグ

<body>タグは文字通りWEBページの胴体、表示される内容の全てを記述するタグです。この<body>タグも<body>と</body>のセットで使用します。
表示される全ての内容をここに記述するので大抵どんなサイトを見ても<body>タグはとても長い記述になっています
。WEBデザインはこの<body>タグの中で定義する内容をデザインする事というわけです。

sample04

この3つのタグがWEBページを作っています。極端に言ってしまえば、

┌<html>
│ …今から記述する内容がHTMLですよ。WEBページですよ。と定義する

│┌ … <head>
││    …ページには表示しないけれどCSSやJavaScriptを定義しますよ
│└ … </head>

│┌ … <body>
││    …ページに表示する内容を定義しますよ
│└ … </body>

└</html>

これだけでWEBページが完成します。とても簡単・単純な構造です。
この構造を理解したうえで、上記3つ以外の様々なタグを使いこなしていくと、皆さんが日頃見ているWEBサイトが完成するのです。

ちなみに、”<○○>”の○○部分は全て小文字で書きましょう。大文字でも大きな問題にはならないことが多いですが、中には大文字では機能しない場合があります。
※突っ込んだお話をするならばHTMLにはいくつかのバージョンがあり、その中のXHTMLというタイプは大文字で書かれているものは認識してくれません。つまり動かないという事です。

いかがでしょうか?最初はわけのわからない見かけをしていたHTMLも分解してみてみれば簡単な作りをしていることがなんとなくお分かりいただけるのではないかと思います。
次回はもう少しタグについて説明していきたいと思います。