Webサイトはどうやって作られているか
僕は普段からWebサイトの制作に関わる仕事を全般的に受け付けているので、デザイン面だけでなくWebサイトで使用されている技術についても日々勉強を重ねています。
最近はSNSやレンタルブログ、Evernoteやnoteなど難しい技術を使わずに手軽に情報発信することができるサービスが登場しているので需要はやや落ちつつあるのですが、それでも企業向けの公式サイトでは直接制作を行うタイプのWebサイトが作られています。
私達が企業などのWebサイトを見るときにはInternetExplorerやGoogleChromeなどのブラウザを使うことになります。
こうしたブラウザを通して閲覧をするというサイトの制作で使用されているのがHTMLとCSSという2つのマークアップ言語です。
まず「マークアップ言語」と言葉から説明をすると、これは動的な操作を行うためのプログラム言語と異なり、表示をするための規格を指示するために使う技術のことです。
ブラウザを使ってWebサイトを見るときに右クリックやメニューから「ソースを見る」といった指示をすると、アルファベットの羅列とともにそのサイトで使用されているテキストが表示されてきます。
このテキスト周りに配置されているのがHTMLとなります。
サイトの枠組みを作るのがHTML
Webサイトを見ると、文章や写真の配置がそれぞれ異なる形で置かれています。
このとき文字の大きさをどうするかや、表示されるフォントはどれにするか、写真の大きさや文字との間隔がどれくらいにするかといったことを決めるのがHTMLとCSSです。
今から20年くらい昔のWebサイトではHTMLだけでサイト内の枠組みや色などを指定していたのですが、10年くらい前からサイト全体の枠組みと色や隙間などのデザイン面は別の言語によって指定するというふうに変化してきました。
言ってみれば家を作るときに柱や梁の役目をするのがHTMLで、そこにどういった壁や扉を配置していくかということを決めるのがCSSということになります。
昔はこのマークアップ言語をキーボードから直接打つ人もたくさんいたのですが、最近ではAdobeのDreamweaverなど便利な制作アプリケーションが登場してきているのでデザインを作った時点ですぐにそれらに変換をして制作をすることがほとんどです。