WEB制作

2016/09/29

ゼロからWordPressでブログを作ってみよう!第一回:ホームページを作る言語について

初めまして!ウィズデザインでデザイナーをやっておりますちくちくです! ブログの書き始めとして「ゼロからWordPressでブログを作ろう!(略してゼロからブログ!)」と銘打って、HTML/CSSも知らない初歩の方からWordPressでブログを作るところまでの連載していきたいと思います。

とはいえこの連載だけで全てを理解するのは難しいと思います。
基本的な解説はしていく予定ですが、この記事を通してHTML/CSSとは何か、WordPressとは何かなど理解する「気付き」になればと思います。

では「ゼロからブログ!」第一回はホームページを構成している言語について解説していきます。

WEBサイトを構成している言語

皆さんがブラウザを通して見ているホームページですが、様々な言語で構成されています。
ホームページを作ろう!と思って最初に耳にするのがHTMLだと思うのですが、世に出ているサイトはHTMLだけではなく色々な言語を複合的に組み合わせて作られています。

ここで挙げている限りではありませんが、一般的に広く利用されている言語とその用途を簡単に解説します。

HTML/CSS

文字・画像などの要素ブラウザに表示してレイアウトするための要素で、ホームページを作るうえでの基本言語になります。
基本的にHTMLとCSSはセットで扱われます。

HTMLとCSSの役割

後述するjavascriptやPHPで作られた要素も、最終的にHTML/CSSに生成されて初めてブラウザに表示されます。
ですので当然ながらHTML/CSSを理解できないないとWEBサイトを作ることはできません。

HTMLとCSSですが、HTMLが表示したいものを用意する役割、CSSがそれらの色や並べ方などを指定したりなどHTMLで用意したものを加工する役割と、キッチリ分業になっています。
以前少しでもHTMLをかじったことのある人ならば「あれ?<font>タグで色を変えたりできるじゃん?」と思うかも知れません。

確かに「以前は」そうでした。

HTM4/XHTMLから時代はHTML5へ

HTMLはここ十数年ほどで世代が変わって、今はHTML5/CSS3というバージョンになっています。
「基本的に装飾はCSSに記述する」というガイドラインからタグの統廃合があり、HTML5で<font>タグは廃止されてしまいました。
ですのでこれからの記述でフォントの色を変える場合はCSSで指定しなければなりません。

他にもいくつか廃止されたタグ・要素があるので、気になる方は確認してみてください。

外部リンク:廃止された要素と属性

静的サイトと動的サイト

HTML/CSSのみで組まれたサイトを「静的」なサイトと呼びます。

どういう意味かと言うと、HTML/CSSのみで書かれたサイトはその記述のまま変化しません。
それに対して後述するjavascriptやPHPを使用したサイトは、ユーザーのアクションや時間経過など外的・内的な要因でHTML/CSSの記述を書き換えて変化させることができ、「動的」なサイトと呼びます。

これらのことから「静的」「動的」という呼び方で分けます。

JavaScript/jQuery

javascriptは主に命令や条件分岐などでHTMLやCSSを書き換える言語です。
ちなみにJAVAとjavascriptは全くの別物なので、「ジャバがねぇ~」なんて格好つけて言ってしまうと恥をかくので気を付けましょう。

javascriptを使えば動きのあるサイトを作れる

HTML/CSSではできない計算や条件分岐ができるので、動きのあるサイトを作る時やユーザーのアクションによって変化をつける場合などによく用いられます。

例えばよく見かける「トップへ戻る」ボタンは、JSでスクロール量を測定して、特定の位置に達したらボタンを表示するように組まれています。

初心者に優しいjQuery

ただjavascriptはプログラム言語に片足を突っ込んだ言語なので、初心者にはなかなか難解なものです。
そこで助けになるのがjQueryなんです。

jQueryはHTML/CSS程度の知識があれば書ける程度の敷居の低いルールで記述できて、それをjavascriptに翻訳してくれます。
準備もカンタン!
下記の記述をheaderタグ内書くだけでOKです!

[html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> [/html]

これはCDNと言って、googleなどがjqueryのライブラリをアップロードしてくれているサービスです。
ちなみに公式サイトからダウンロードして利用するのももちろんOKです。

jquery公式サイト

尚、上記例はバージョン3.1.0の例になります。
違うバージョンを利用したい場合はリンクまたはダウンロードするファイルを変更してください。

PHP

データベースの運用や条件分岐などで表示内容を操作できるプログラム言語です。
ブログやECサイトなどの構築に使われ、なかでも世界の70%に及ぶサイトに採用されていると言われるWordpressもこの言語で書かれています。

データベースとは?

ざっくり言えばネット上にエクセルの表があると想像してみてください。
その表に日記などを書き込んでおいて、必要な時にその表を引っ張り出してきてブラウザに表示することができたりします。

他にもエクセルみたいにその表にあるデータを日付順に並べ替えたり、何らかの条件をつけて選り分けたり、加工したりもできます。

このようにデータベースとは、サーバー上にいつでも書き読みできる情報を管理・保管しておく場所のことです。

PHPでできること

上記のようにPHPはデータベースが使えるので日記の更新や表示の変更など、プログラムを書いておけば自動的に動的なサイトを作ることができます。
また情報のインプット・アウトプットができるので「お問い合わせフォーム」などもPHPで書かれることが多いです。

WordPressとは

ざっくり言えば「簡単にブログが作れるツール」です。
厳密には・・・というか実際にはブログだけではなくコーポレートサイトなどもカバーする「コンテンツマネジメントシステム(CMS)」と呼ばれるものです。

ただ発祥がブログ作成ツールだっただけに、インストールしただけの状態ではほぼブログを作る要素しか用意されていません。
これにWEB制作者はプログラムを記述したり、「プラグイン」と呼ばれるプログラムのパッケージを利用して要件に合わせたシステムを構築していきます。

まとめ

ということで「WEBサイトを構成している言語」について簡単に解説してみました。
今後はこれらを覚えながら少しずつブログを作っていきます。

次回は基本的なHTMLタグについて説明する予定です!