レンタルサーバーを徹底比較!エックスサーバーやロリポップなど主要レンサバのランキング!

レンタルサーバー徹底比較!目的別であなたに一番合ったレンサバをご紹介!

HTML・CSS基礎知識!自分だけのホームページを作ろう!

HTML・CSSの基礎を実践しながらマスターしよう

このコラムでは、有料のホームページ作成ソフトを使わず、自分の力でホームページを作りたい方向けの基礎講座です。
 
HTMLは骨組みさえわかってしまえばけっこう簡単なのですが、最初のとっかかりはつまずきやすいもの。HTMLタグの基礎を解説した本やサイトはたくさんありますが、パソコン素人の方にとってはなかなか難しいかと思います(当サイト管理人もはじめは苦労しましたので・・・)。
というわけで、独学でWebサイト作成をマスターできるよう、

実体験に基づいてなるべくわかりやすく解説していきたいと思います。
 
また当サイトでは、HTMLの隅から隅まで教科書どおりに理解していただくものではなく、「とにかくなるべく早く!簡単に!ホームページを作れるようになりたい!」という方向けに解説します。
当サイトがあなたの楽しいWebライフにへの助けになれば幸いに思います。

 

 

そもそもHTMLっていったい何?

HTMLとは(HyperText Markup Language ハイパーテキスト マークアップ ランゲージ)という、なんだか難しそうな言葉の略語です。この名前は全く覚える必要はありませんので、ご安心ください。
ざっくりで言うと、文章(テキスト)の中に「タグ」と呼ばれるしるしを入れることで、文章(テキスト)に色んな機能を持たせることができるコンピュータ言語のことです。
 
例えばいろんなWebサイトを見てみると、サイトごとに文字の大きさや字体も違えば、背景のデザインやレイアウトも様々ですよね。
「リンク」とよばれる文字やボタンをクリックすると別のページに移動できたり、画像をたくさん使ったおしゃれなサイトもあります。
これらのWebサイトは、HTMLで作ることができるのです。
しかもHTMLさえマスターすれば、無料で自分だけのオリジナルホームページが作れてしまうんです!ぜひマスターして周りの人をビックリさせてください。

目次にもどる

 

HTMLタグでどうやって使えばいいの?

HTMLは、Web(広い意味でインターネット)の世界では共通言語です。
なので書き方さえ覚えてしまえば、だれでもカッコイイホームページが作れるようになります。
 
その使い方はいたってシンプルです。
たとえば
「私はいまホームページ作成を勉強しています。」
のように、文字のある部分を強調するために太字にしたいときは、その文字を<strong>~</strong>で囲います。こういった<strong>~</strong>のような記号をHTMLタグといいます。
タグを使うことで、文章に様々な機能をつけたり、文字の色を変えたり、写真や動画を公開するサイトを作ったりといったことができるのです。
&nbsp;
本屋や解説サイトを見ると、HTMLタグにはたくさんの種類があって「うっ・・・」となりますが、よく使うものというのは限られますのでご安心ください。全部知らなくてもホームページは作れます。

目次にもどる

 

Webサイトのデザインもできるようになるの?

ネット上にはいろいろなWebサイトがあり、デザインやレイアウトはさまざま。例えば当サイトのように、サイトの人気ページに移動する「メニュー(目次)」がページの上の方にあり、サイドメニューでさらに細かく項目が分かれていたり、背景画像もいろいろです。
こうしたデザインやレイアウトはCSS(Cascading Style Sheets カスケーディング・スタイル・シート)という言語で自由にデザインできます。省略してスタイルシートと呼ばれます。
 
つまり、文章を担当するHTMLデザインや配置(レイアウト)を担当するCSSの2つによって、ホームページは作られているのです。
当サイトではHTMLとCSSのコーナー、そして画像・イラストのコーナーで、独学でのサイト作成をサポートしていきます。
 
また解説のために、以下のような色分けをしたいと思います。

 

HTMLの記述
 
 

 

CSSの記述
 
 

 

ネット上での表示のされ方
 
 

 

目次にもどる

 

この記事に関連する記事一覧

comment closed