ウェブサイトを作るのに必要な言語

web

Webサイト製作に使う言語

Webサイト製作に興味を持って本屋に向かうと、サイト製作に関する色々な本を見つける事ができます。でも沢山ありすぎて何を使えばいいか分からないし、内容も最初はちんぷんかんぷんですね。

Webサイト製作に使う言語やツールは、どんなサイトをどう実現するかで変わります。 でも最低限必要なものはたったの2つです。

Webサイトは文書構造を「HTML」、装飾を「CSS」で記述します。

サイトの文書構造を記述するHTML

文書構造とレイアウトについて、履歴書を例に詳しく見てみましょう。

一口に履歴書といっても、様式や記述内容は様々です。名前と写真ぐらいは当然として、住所、電話番号、性別、年齢、経歴、趣味、特技、性格、自己PRなど、色々書く事があります。それらを思いついた順に片っ端から書くよりも、整理して書いた方が良い文書になります。

個人情報欄

名前・写真・年齢・性別・住所・電話番号

経歴欄

学歴・職歴

趣味・特技欄

得意なスポーツやゲーム・趣味

PR欄

長所・短所・性格・やりたいこと

自己紹介で書く内容(要素)を決め、似た要素を4つの大枠に分けました。他にも「履歴書」と銘打っておいたり、作成日時を書いたりするのもいいでしょう。これがHTMLで記述する文書構造です。

サイトのレイアウトを装飾するCSS

次にこれをどのようなレイアウトで表現するか考えましょう。色をどうするか、文字の大きさはどれぐらいか、各欄をどのように配置するかなど色々あります。文書構造は同じでも、レイアウト次第でまったく表現は変わります。これがCSSで記述する装飾です。

HTMLとCSS以外にもウェブサイトを作るツールや言語は沢山あります。しかしHTMLとCSSはWebサイトの根幹を司る部分を記述する言語で、どんなサイトもこれ抜きには作れません。まずはこの2つをしっかり学びましょう。

eyecatch

ウェブとウェブサイト

eyecatch

長さ単位の基本

ウェブサイトの記事

eyecatch

ウェブ特有のライティング作法「ウェブライティング」入門

eyecatch

スマホサイト製作のTIPS

eyecatch

CLSエラー(累積レイアウトシフトエラー)の調査・対応方法

eyecatch

既存サービスと独自サイトのメリット・デメリット

eyecatch

ウェブサイトに使われる一般的な文字フォント一覧

eyecatch

レスポンシブウェブデザインとは

ウェブサイトの記事一覧HOME