ホームページを作りたい-どうやってつくるの?「教えてマリオ」

マリオデザイン

マリオデザインスタッフブログ「教えてマリオ」

ホーム>>教えてマリオトップ>>ホームページを作りたい-どうやってつくるの?

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。 難しい言葉を使わず(使えない)噛み砕いた言葉で書いていくので、参考になればと思います。
*勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

ホームページを作りたい-どうやってつくるの?

まずはじめにホームページとはインターネット上で見れる情報のことです。 会社案内だったり居酒屋の紹介だったりグーグルなどの検索するものだったりと色々です。

当ブログでは最初から難しいことをやろうとしてしまうと、あきらめてしまうのでゆっくりと簡単に説明しながら最終的にホームページが自分の手で作成できるように説明していきます。やはりかっこいいものやシステムが組まれているものなどはプロの制作会社に頼んだほうが金額も安く、手間もかからず便利ですが、自分のブログを少しいじったりできたらかっこいいと思うのでそこを目指して頑張りましょう。

目次
  1. どうやってできているの?
  2. HTMLとは
  3. CSSとは
  4. HTML・CSSを書くときの注意点
1.どうやってできているの??

ホームページは「HTML」という言葉で記述していきます。皆さんも一度は聞いたことがあると思います。しかしHTMLにはバージョン・種類がいくつもあります。

HTML4.0やHTML5.0・XHTML1.0など様々です。このブログではXHTML1.0で説明をしていきます。

簡単に何が違うかというと書き方が少し違ってきます。日本語でいうと福岡の人のしゃべり方と広島の人のしゃべり方が違うようなものです。○○たい!○○じゃけぇ!のように同じ日本語ですが少し違う程度のものです。大きな違いはなく今は気にする必要はないでしょう。

次に重要になってくるのが「CSS」です。CSSとは例えると指示書のようなものです。より美しくよりきれいに見せるためにHTMLにああしなさいこうしなさいと指示をだすイメージです。色をつけたり、大きさ余白を調整したりするものです。

そのほかにもホームページ作成に欠かせない「JAVASCRIPT」「FLASH」「PHP」などたくさんありますが、この3つはまたの機会にいたします。これらは少し難しく、ホームページをより一層かっこよく見せるためのものだったりします。

なのでまずはHTMLとCSSを学習して基本をしっかりマスターしたのち次のステップに進みましょう。


2.HTMLとは

簡単に説明するとHTMLとはタグの固まりで構成されています。タグとは意味をもった箱みたいなものです。

このブログではタグは箱のようなものとして説明していきます。タグ=箱。

まだよく意味が分からないかもしれませんがタグとはそれぞれに意味を持っている箱です。基本的にタグとは開始タグ閉じタグで構成されています。

例をここで上げてみます
タグの説明
上記の写真を見てもらうと先ほど説明した、開始タグと閉じタグで構成されているのがわかると思います。内容は開始タグと閉じタグの間に書いていきます。上記の写真を簡単に説明すると「HTMLのタグを勉強中」は段落でできている、ということになります。


タグは<>の中に書かれます。閉じタグは</>のようにスラッシュが入ります。 まとめると

<タグの名前>ここに内容</タグの名前>

となります。

HTML(タグ)を書くのは拡張子が.htmlのファイルに書かなければなりません。作成方法はデスクトップにテキストドキュメント(メモ帳)を作成し、拡張子が.txtになっていると思うので.htmlに変更するだけで完了です。拡張子に関してはググッてください。

拡張子変更後ダブルクリックするとブラウザ(インターネット)が立ち上がるので変更する場合はメモ帳(Notepade)で開き編集しましょう。

タグの種類はいくつあるかわかりませんが、大量にあるためよく使うものだけを次回投稿したします。閉じタグを必要としないものなどもありますのでゆっくり覚えていきましょう。



3.CSSとは

CSSとは先ほど書いたように指示書のようなものです。色を付けたりレイアウトしたりするのはこのCSSで命令していきます。HTMLで内容を書き込みCSSでレイアウトを整えるというかたちです。

CSSを書く場所はHTMLの中の<head></head>の中に書く方法とタグに直接書く方法と別のファイル(拡張子が.cssのファイル)に書く方法があります。当ブログでは別のファイルに書く方法で説明していきます。

.cssファイルを作成する方法は.htmlファイルと同じ方法で作成できます。

.htmlのファイルと.cssのファイルを関連づける方法はまた投稿します。

ではCSSの書き方を説明します。

セレクタ{
     プロパティ:値;
     }


セレクタとは指示をする対象物(何に指示をだすか)です。プロパティには何をするかを書きます。横幅を変更したいのか背景を変更したいのか文字の色を変更したいのかを書きます。にはどうするかを書きます。基本数字ですが文字が入ることもあります。

例を書きます。
先ほどタグの説明時の写真はpのタグで囲まれた段落です。この段落の背景を赤色に指示する場合は下記のように書きます。

p{
     background:#FF0000;
     }


言葉で書くと

このホームページに使われているpタグの{

                背景を : 赤にしてね ;

                }

の感じです。backgroundが背景のプロパティで#FF0000はRGBの各色をそれぞれ6段階に分けて16進数で記述したものです。見えにくいですがプロパティの後は:(コロン)値の後は;セミコロンです。

ここではよく使うセレクタの指定方法だけ説明します。プロパティについては今度投稿します。セレクタの指定方法は大きく分けて3つあります。メリット・デメリットを説明していきます。

上記の場合はセレクタにタグを指定した方法でこれが一つ目です。タグの場合だと複数pがある場合すべて背景が赤になってしまいます。すべて背景を赤にしたい場合は便利ですが一つのpだけ背景を赤にすることはできません。 セレクタタグの説明

2つ目はID(アイディー)で指定する方法です。IDとはタグに個別にID(名前的なもの)を付けることができます。タグにIDをつけることによって個別に指示を出すことができるようになります。

IDのつけ方は
です。

ではセレクタにIDを入れて指示を書きます。

#mario{
     background:#FF0000;
     }

言葉で書くと

このホームページに使われているID名marioの{

                背景を : 赤にしてね ;

                }

という感じです。IDで書く場合はID名の前に#(シャープ)を書きます。 CSSでIDを指定

3つ目はclass(クラス)で指定する方法です。classとはタグに個別にclass(名前的なもの)を付けることができます。タグにclassをつけることによって個別に指示を出すことができるようになります。IDとの違いはIDは一つのページに一つのID名しか使えませんがclassは複数使うことができます。

こう聞くとclassのほうがすぐれているような感じがしますが、1つのページに1つしかないものに対して指示を出す場合はidで名前を付けておいたほうがわかりやすく便利です。

クラスの指定方法はidがclassに代わるだけです。 classの指定方法 ではセレクタにclassを入れて指示を書きます。

.design{
     background:#FF0000;
     }

言葉で書くと

このホームページに使われているclass名designの{

                背景を : 赤にしてね ;

                }

という感じです。classで書く場合はclass名の前に.(ドット)を書きます。 cssclassで命令

以上がセレクタの代表的な3種類です。そのほかにもグループセレクタや子孫セレクタ・組み合わせで様々なセレクタタイプがありますが、それは後日投稿します。

4.HTML・CSSを書くときの注意点

HTMLとCSSについて簡単に説明いたしましたが、ホームページを作成するにあたっての注意事項をここで説明します。

それは必ず記号を除いた半角英数字で書くことです。使える記号はいくつかありますが当ブログでは半角英数字と記号は_(アンダーバー)しか使用しません。これは使えるけどこれは使えませんなどで頭を使わないためです。しかし文字の先頭には数字や_(アンダーバー)は使えません。

まとめるとホームページ作成にかかわるフォルダ名、ファイル名、画像の名前、id名、class名すべて半角英数字で書き、文字の先頭は数字や_(アンダーバー)は使わないようするということです。

日本語や大文字の英語は本文の内容以外に使わないように気を付けましょう。

このエントリーをはてなブックマークに追加

コメントを残す

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

TRACKBACK_URL