初心者にありがちなミスと言えば、CSSのidタグやclassタグの
呼び出しタグ違いだと思います。
CSSへの指定は何度確認してもあっているはずなのに、
なぜ自分の思った通りのデザインが反映されないんだろう？
（指定しているはずの色、文字の大きさ、背景なんかが全く反映されていない等）
そうなると今度はCSSに指定された中身を確認するわけですね。
CSSの中身を確認するのは決して間違っていることではないのですが
実は大概初心者のミスの場合、呼び出しタグと指定のタグが違っている事が挙げられます。
まだよく把握できていないうちなんかだと尚更、
idとclassの使い分けの意味がよくわからないまま作ってしまったりして、
しかもあーでもない、こーでもないとあれこれ迷いながら行うため、
指定を途中で頻繁に変えたりするため、だんだんごちゃごちゃしてくるんですよね。
「#」で指定したものは“id”、「.」で指定したものは“class”の表記にしなくてはいけません。
また、それらを間違えるだけじゃなく、本当にやり始めたばかりの初心者のうちは
CSSに指定する方を“id”や“class”にしたり、
呼び出しタグの方に「#」や「.」を書いてしまったりして
何が何だかわからずごちゃごちゃ入り混じった状態にしてしまうんですよね。
また、名前の間違いなんかもよくあるでしょう。
例えば「contents」を「content」と書いて反映されなかったり、
最初を大文字にしたのを忘れていて、小文字にしていたりして
デザインに反映されていないという小さなミスが多いのです。
当サイトではウェブサイト制作初心者の方々に向けて、ホームページの作り方の基礎や運営に関する注意点などを述べています。
ですが、今は初心者でも、いつまででも初心者というわけではありませんね。
ホームページの作り方を把握し、サイト運営に慣れてくると、誰だっていずれは初心者を卒業します。
中には、上級者やプロとしてホームページ作りに携わったり、他の初心者に作り方を教える人も出てくるのでしょう。
そうなれば、単純なホームページの作り方だけでなく、サイト運営に必要なテクニックなども知っておかなくてはなりません。
サイト運営に必要な知識はホームページの作り方だけではありません。
初心者のうちは作り方さえ知っておけばなんとかなりそうなことですが、慣れてくるにつれてユーザーのことを考えて運営していかなくてはならないのです。
そのため、ホームページの作り方以外に、ユーザー心理やアクセシビリティについても考慮する必要がありますし、プロともなればホームページとサーバーとの関係やSEOについての知識も必要となります。
ただ、心配しなくてもそんなに難しいことではありません。
ユーザー心理とは、例えばどうすればメニューを発見しやすく、また選びやすくなるかといったこと。
アクセシビリティとは身体障害者向けのブラウザに対応させる作り方で、画像にはALTを忘れないといったことです。
SEOについては少々難しくなりますが、クラスC分散サーバーなどのことについては必要に迫られてくれば自然と学ぶことになるでしょう。
初心者の皆さんは、自分が初心者と自覚しているからこそこうしてホームページの作り方などの勉強に励んでいるのだと思います。
その意欲をいつまでも持続させて、より良いホームページ制作のためにますます頑張っていただきたいですね。
今回は、プロのWebデザイナーも注意しているホームページの作り方を、初心者の皆さんにお教えいたします。
ホームページの正しい作り方といえば、HTMLには内容と文書構成、デザイン的な要素は徹底して全てCSSにというのが推奨されていますね。
これは、プロに限らず初心者でも行うべきことです。
そのCSSで指定しているデザインをHTMLの各パーツに当て嵌めるには、IDもしくはクラス名を付ける必要があるのですが、初心者の皆さんはそのID名・クラス名をどのように付けていますか？
プロが注意しているのは、その名付け方です。
例えば、ページの左側にメニューボタンであるサイドバーを、右側にメインとなる内容を表示させるよう配置したとします。
この場合、初心者に多い間違いが、サイドバーの部分を「left」、メインの部分を「right」と名付ける方法です。
これでは、もしデザイン変更でサイドバーとメイン部分を左右逆にした場合、名前まで変更しなくてはちぐはぐなことになってしまいます。
プロはデザイン変更の可能性も考慮した作り方をしていて、決して見た目に惑わされた名前は付けません。
サイドバーなら「side」や「menu」と、メイン部分なら「mein」というように、見た目ではなく役割を表す名を付けるのです。
これは、位置関係ではなく色指定に関しても言えることです。
強調したいテキストに対して、その色を赤にするからと「red」と名付けてしまっては、デザイン変更の際に強調テキストを青に、名前を「blue」に変えるとなると、HTMLファイルの全ての該当箇所を変更しなくてはならないことになってしまいますね。
しかし、名前を変える必要のない「strong」にしておけば、CSSでの色指定だけを変えるだけで済むのです。
今回説明するホームページの作り方は、初心者向けといってもホームページ作りが未熟な方々に対する説明というわけではありません。
ホームページを閲覧する人が初心者の場合のことを考えた、誰でも閲覧しやすいページの作り方です。
現在、ホームページの正しい作り方は、内容はHTMLで、デザインはCSSで、とはっきり区別してしまう方法です。
一見面倒な方法のように感じられるこの作り方ですが、こうして区別することで初心者でも思い通りに作ることが可能になりました。
CSSを使わない方法だと、テーブルに余計な枠がついたりと、デザインの邪魔になる表示が生じるなんてこともあったのですよね。
そうそう、リンクを張ったアンカーテキストだって勝手に青色になるし、下線が付くし、リンク先が閲覧済みページの場合は臙脂色になるし・・・
でも、実はこの表記のされ方は決して無意味なものではなく、これこそが閲覧初心者のことを考えた表記だったのです。
他のテキストの色と違っていたり下線でも付いていなければ、そこにリンクが張られているなんてこと初心者には分かりません。
また同じアンカーテキストでも色が異なっていることで、そのリンク先は既に閲覧済みということがわかります。
青や臙脂や下線が作っているホームページに合わないというのであれば、他の表記方法に変えるのも良いでしょう。
ですが、他のテキストと全く同じにしてしまうのは初心者に配慮しているとは言えません。
それだけでなく、ホームページ閲覧に慣れた人だってリンクの有無に気付かないでしょう。
前回に引き続き、今回もインライン要素の種類を初心者の皆さんにご紹介したいと思います。
インライン要素は種類が多いため、前回はそれらのうちインライン要素、もしくはテキストしか入れられないもののみを紹介いたしました。
今回は残りの種類をご紹介いたします。
つまり、インライン要素でありながらブロックレベル要素を子要素にできるものや、子にできるものが限られているタグ、また子になるものがないタグなどです。
インラインでありながらブロックレベルを子にできるものは「置換要素」ともいうことは、以前にも説明しましたね。
子になるものがないタグとは、閉じタグのないものです。
タグは基本的に開始タグと閉じタグがあって、そのふたつで子を囲むのですが、中には開始タグのみで存在できるものもあり、何かを囲むことはできません。
では、以下が残りのインライン要素です。
【applet】Javaの埋め込み
【basefont】基準のフォントサイズ
【br】改行
【button】フォームなどのボタン
【iframe】インラインフレーム
【img】画像
【input】フォームの一部
【map】イメージマップ
【object】オブジェクト
【script】スクリプト
【select】セレクトボックス
以上です。
ちょっと拍子抜けした初心者の方が多いかもしれませんが、インライン要素の主なものは前回紹介したものでほとんどで、残りは以上のようにほんの少しだけです。
ですが、ホームページを作るにはどれも重要なタグですので、これら全てを覚えておけば、作り方を覚えるのも早く、効率的な作り方も自分なりに分かるようになります。
今回の初心者向けホームページの作り方は、初心者のためのインライン要素の種類の紹介です。
インライン要素は前回ご紹介したブロックレベル要素の倍程の種類があるため、2回に分けて紹介したいと思います。
以下は数多いインライン要素のうち、子要素としてインライン要素、もしくは子要素は不可でテキストしか入れられないもの・・・つまり置換要素にはならないものたちです。
【a】アンカーテキスト
【abbr】略語
【acronym】略語
【b】太字
【bdo】文章方向
【big】大きい文字
【cite】引用元
【code】ソース
【dfn】定義用語
【em】強調
【font】フォント設定
【i】イタリック
【kbd】入力文字
【label】ラベル
【q】引用
【s】取り消し線
【samp】出力サンプル
【small】小さい文字
【span】範囲指定
【strike】取り消し線
【strong】強調
【sub】下付き文字
【sup】上付き文字
【textarea】テキスト入力欄
【tt】等幅フォント
【u】下線
【ver】変数等
前回ご紹介したブロックレベル要素同様、以上のインライン要素の中には現在のホームページには推奨されていないタグも含まれています。
初心者がホームページを作る際にありがちな作り方というと、その推奨の可否を知らずにあるだけのタグを利用してホームページを作ること。
また、タグそれぞれの意味を知らずに、見た目の変化だけにとらわれてタグ本来の意味とは異なるホームページの作り方も、初心者にはよくあることです。
前回までにブロックレベル要素、インライン要素、置換要素についてそれぞれ説明させていただきました。
ホームページ作り方初心者の皆さんは区別してご理解いただけたでしょうか。
今回は前回までのまとめとして、それぞれの要素を以下に挙げ連ねたいと思います。
では、以下どうぞ。
【address】制作者情報
【blockquote】引用
【center】センタリング
【dir】ディレクトリリスト
【div】範囲指定
【dl】定義リスト
【fieldset】フォームのグループ化
【form】フォーム
【h1】大見出し
【h2～h6】見出し
【hr】水平線
【isindex】入力欄
【menu】メニューリスト
【noframes】フレーム代替
【noscript】スクリプト代替
【ol】数字付きリスト
【p】段落
【pre】整形済みテキスト
【table】表
【ul】通常リスト
ブロックレベル要素の種類は以上のとおりです。
ホームページ作り方初心者でもよく使用するものや、上級者でなければなかなか使わないものもあるでしょう。
しかし、初心者だからといって臆することはありません。
意外と、上級者でも使わないものもあるのです（使うことが少ないとも言いますが）
ただ、気を付けたいのが上記の中には今では推奨されていないタグもあるということ。
タグを使用せずにCSSで指定すべきものもありますので、作り方初心者の皆さんは特にそちらにご注意ください。
また、それぞれのタグには上記のとおり意味があるので、意味に沿ったホームページの作り方をしましょう。
こんにちは、初心者向けホームページの作り方講座です。
以前まではブロックレベル要素とインライン要素について説明しましたが、今回は置換要素について改めて初心者の皆さんにご説明致します。
HTMLの要素は大きく分けてブロックレベル要素とインライン要素の2種類。
「置換要素」と呼ばれているものは、そのうちのインライン要素に分類されます。
ただ、インライン要素ながらにしてブロックレベル要素の特徴も有しているため、このように区別して呼ばれているのです。
以前ブロックレベル要素について初心者向けに説明したときは「幅と高さを指定するもの」と説明させていただいたかと思います。
また、インライン要素についての初心者向けの説明としては「テキストと並べて配置できるもの」とも。
例えば画像ですが、これはホームページを飾るという作り方だけでなく、テキスト代わりに使用しての作り方も可能ということは、初心者の皆さんもご存知かと思います。
そのため、画像タグはインライン要素に分類されているのですが・・・
しかし画像は幅や高さも指定しますね。
つまり、この画像タグこそが置換要素のひとつなのです。
もちろん、インライン要素のひとつでもあります。
ブロックレベル要素とインライン要素の違いについては、以前は初心者にも分かりやすいよう上記のように説明しましたが、置換要素の特徴についても覚えておくとホームページの作り方として役立つでしょう。
簡単に言うと、何事にも例外はあるということですね。
ちなみに、インライン要素のうち置換要素以外のものは非置換インライン要素と呼ばれています。
おはようございます。
ご無沙汰しておりますが、ホームページの作り方初心者の皆さんいかがお過ごしでしょうか？
最近プライベートの方が忙しく、この「初心者向けホームページの作り方」をなかなか更新できないでいますが、「初心者向けホームページの作り方」を決して忘れてしまっているわけではありませんので悪しからず。
いつも、次はどんなホームページの作り方について初心者の方々に教えていこうかと考えているのです。
ここ数回はホームページの素であるHTMLの作り方の基本をなるべく初心者向けとなるよう説明してきましたが、今回は閑話休題。
少々FLASHのことについて初心者の皆さんにお話ししてみたいと思います。
ネット上には様々なホームページがありますよね。
企業ホームページもあれば個人ホームページもあり、見た目だけで初心者が作ったと判る稚拙な作り方のホームページもあります。
しかし、初心者でもデザイン性の高いホームページを作ってみたいもの。
もしホームページの作り方を調べようと様々なサイトにアクセスしてみれば、初心者でも気付くことがあるでしょう。
ホームページによっては作り方がHTMLではなく、特殊なソフトでの作り方であることに。
企業ホームページの一部にもHTMLでは作れないような機能を有した部分があることがありますが、ホームページ全体が動的な機能を有している場合がありますね。
しかも当然初心者によるものではなく、デザイナーの恰好良い作り方のサイトに限って。
それこそがFLASHで作られたホームページです。
初心者のうちは憧れの方が強くて、そんなホームページを見たなら自分もこの作り方を知りたいと思うでしょう。
HTMLでは不可能なこともFLASHでは可能ですし。
初心者を脱した暁にはFLASHを利用するのも良いかと思います。
しかし、ご注意ください。
FLASHはあくまでもホームページ上でソフトを起動させているのであり、そのためブラウザやパソコンの設定によっては閲覧できない場合があります。
FLASHは必ずしも万能というわけではないのです。
前回ブロックレベル要素について簡単にご説明致しましたので、今回はインライン要素についての説明です。
ブロックレベル要素が“範囲”の指定だとすると、インライン要素は“部分”の指定です。
ちょっと区別しづらいかと思いますが、テキストの一部を指定するものと考えると判り易いでしょう。
文章中のひとつの単語だけを太字にしたり、色を変えたりといった装飾を施したい場合、このインライン要素を利用するのです。
となると、以前ブロックレベル要素のひとつとして例に挙げた見出しタグ、あれはテキストに対して指定しているものなのでインライン要素ではないのかと疑問に思われるかもしれませんが、これはそもそもの見出しの意味を考えてください。
見出しは以下に続く文章のタイトルであり、文章中に含ませるものではありません。
タイトルはそれがひとつの要素であり、他の要素と混在するものではないのです。
HTMLタグとは、基本的には「文書」の構造を忠実に再現するものなのです。
「文書」とは社内報告書や研究室のレポートなど。
最近ではデザイン性の高い作り方のホームページが数多くあるので、そういった無機質な見た目の文書はイメージしにくいかと思いますが、デザイン性を全て省いてHTML構造だけを見ると実にシンプルなものになっていることでしょう。
ただ、実際には正しい文書構造での作り方でHTMLを構成していないホームページも数多くあります。
見た目の良さだけを優先したがばかりに、見出しではないのに見出しタグを使っていたり、インライン要素を無理矢理ブロックレベル要素に見立た作り方をしていたり。
これらこそが初心者にありがちなホームページの作り方だったりします。
当サイトで初心者に正しいホームページの作り方を呼び掛けているのは、そういった間違いを正すためでもあるのです。