HTML・CSSについて

この記事を書いた人

平野
2007年に個人事業主として独立。Web・動画・DTP制作とグロースハッカーをしながら、フリーランスとして活動しています。Growth Hacker Awards2019大賞受賞。

この記事を読むのに必要な時間は約4分です。

HTMLとCSS

ホームページを作るには、最低でも3つの種類のファイルが必要になります。

一つ目ははホームページの大元になるHTMLファイルが必要になります。
HTMLタグを使用しながら文字情報などを入力して作成します。

HTMLファイルはHTMLタグを使用しながらの作成になりますが、これには多少HTML言語の知識が必要になってきます。
特徴は、ファイル名のあとに「.html」という拡張子がつきます。

二つ目はCCSファイルです。CCSは主にデザインを部分で使用するもので、HTMLと組み合わせて使います。
HTMLファイルに直接CCSを書き込んだり、外部にCSSファイルを設置してHTMLファイルに読み込ませて使用することもできます。

最後は、イラストや写真を掲載するために使用するイメージファイルまたは画像ファイルです。

HTMLファイルに直接記述したり、CSSファイルにURLを記述したりして表示されるように設定します。
拡張子はJPG、GIF、PNGが代表的なものです。

HTMLとは

HTMLは、HyperText Markup Languageの略です。

一般的にまずホームページとはYahoo!やGoogleから2ch,fC2などインターネット上にあるページのことでです。
それらの作成にはHTML言語というものを使用します。

<body><h1>大見出し</h1> <h2>小見出し</h2> <p>本文</p> <p>本文</p>のように使用していきます。

本当はもっと後ろに必要なのですが、今は省きます。この中の[p]とは[Paragraph]要するに[段落]のことです。

そして[h]と[heading]要するに[見出し]という意味です。[h1]や[h2]と書いたこの数字は大きくなるにつれて、大見出し、小見出し…となっていきます。

他にも箇条書きにするには列挙型の箇条書き<ui>順序付きの<ol>があり、するにはこれらの要素でマークアップし<li>で並べます。

そして<ui> <li>テキスト1</li> <li>テキスト2</li> </ui>というように使います。

ちなみに[ui]は[Unordered List][並列列挙リスト]で、[ol]は[Ordered List][順序付きリスト]で、[li]は[List Item][リストの項目]です。

そして、次はリンクの張り方についてです。
リンクには始まりと終わりを示さなければなりません。
そしてそれは<a>であらわします。

たとえばGoogleのリンクを張りたければ、 <a href=”https://www.google.co.jp/”></a> というようにします。
これがHTMLの基本です。

CSSとは

パソコンの高性能化とインターネットの高速化に伴い、動画や画像などが多用されるようになり、ホームページも見易さのみならず、デザイン性も求められるようになりました。

そうした中で、ウェブデザインをする上で必要不可欠な「CSS(カスケーティング・スタイル・シート)」について書いていきたいと思います。

ウェブ作成のプログラミング言語「HTML」がポピュラーですが、そのHTMLの中にも文字の色を変更したり、文字のサイズを変更したりする修飾のための命令が存在します。

しかし、これを個別に行っていると、ウェブページが肥大化したり、編集がしづらくなってしまうなど様々な弊害が生じます。

そうした諸問題を解消するためにHTMLから修飾の要素を切り離すために生まれたのが「CSS」です。
HTMLも年を経ることに進化を続け様々な拡張がなされてきましたが、それはCSSも同様です。

現在最新のCSSは「CSS4」と呼ばれるバージョンです。

CSSの利点は、前述のものの他に端末に応じて、デザインを変更できる点にあり、例えば、フォントは種類によって幅や大きさが様々ですが、それを指定することによって、ウェブ製作者の意図したデザインを閲覧者に提供することができるようになります。

また、スマートフォンやタブレットなど様々な端末が登場している現在においては特に重要です。

さらには、HTMLファイルとCSSファイルを分けることによって、複数のウェブページに同様の修飾を簡単に施すことができるようになり、ウェブサイト全体を問う五つ間のあるデザインにすることが可能となります。

HTMLとCSSを理解するには

ホームページを作る際に欠かせないHTMLとCSSですが、学び始めると色々な事ができるため技術の幅が広くてとても大変です。
しかし、基本的な部分を勉強してしまえばある程度のホームページを作る事は可能です。

ホームページを1から作りたい方であれば、勉強してHTMLとCSSをマスターするのも良いのですが、勉強する時間がない方やそこまでするのは大変と思っている方は、既に出来あがっているテンプレートを使用するのがおすすめです。

テンプレートを使用してホームページを作るのであれば、必要最低限のHTMLとCSSの知識さえあれば問題なく作業できます。

ホームページを1から自分で作ってみたい方は、本屋さんのコンピューター関係のコーナーに行くとたくさんの種類の本が販売されているので参考にしてみてください。

また、インターネットで検索するだけでもたくさんのホームページ制作の知識や技術が紹介されているので、分からない事は検索して調べながらでもホームページ制作はできると思います。