WordPressを始めるまえに ~ CSS・HTML・PHP の理解 ~

WordPressを始める前に覚えておきたいCSS・HTML・PHP

 

当ブログのカテゴリーのひとつとして、wordpressのカスタマイズ(デザイン)というものがあります。

多くの人がそうであるように、私もwordpressのカスタマイズは全て独学で勉強してきました。グーグルのデベロッパーツールを使い、デザインの変更したいcssの要素を検出し、ある程度のアタリをつけた要素の数値を適当に変更し、その結果の断片をあわせたコードを追加CSSに記入していくのが私のやり方。独学で勉強してきた私は、正直「cssってなに?」「htmlってなに?」「phpってなに?」「jQueryってなに?」とwordpressに関する質問をもらっても、その核たるところの情報は良く分からないのが現状でした。

詳しい説明は他サイトさんにお任せするとして、私のページでは「なんとなくそれぞれの概要が分かればいいかな?」程度の情報ですが、wordpressを進めていくうえで《無くてはならない基本的な理解》をまとめました。

それぞれの詳細なコードや書き方などは、当サイトの wordpressカスタマイズカテゴリー でも少しずつ紹介していく予定ですが、インターネットには私の情報よりも確かな技術と情報がたくさん転がっておりますので、そちらをご覧になって頂いたほうが確実かと思います。

「まずは触りだけ理解したい」そんな方へ適切な記事に仕上げたつもりです。

 

 


はじめにcssとhtmlの繋がりを理解しよう

 

cssとhtmlの繋がりを理解するにあたり、下記に例えてみました。

あなたはファッションブランドのショップにやってきました。
様々な色や形の服やファッショングッズが店頭には並べられています。
あなたはその中から「この青色の服を着てもいいかい?」と尋ね、試着をしました。
その服を身に着けたあなたは気分も新しく楽しい気持ちとなりました。

ここで言う、あなた自身が《サイト》だとすると、様々な色や形の服やファッショングッズは《IDやクラスなどの要素》であり、あなたが言った「この青色の服を着てもいいかい?」という要求が《html》です。また、このショップの服やファッショングッズを作る工程が《css》であり、ここでいう試着が《デベロッパーツール》を表しています。さらに、このショップが様々な要素を並べている《スタイルシート》となるでしょう。

この関係性を理解していただいたうえで、cssとhtmlの理解をもう一段階深めてみましょう。

 

 


 

※htmlとcssの関係性を表した図

cssはページの装飾や配置

 

cssは<カスケーディング・スタイルシート>の頭文字で、Webサイトの装飾、つまりデザインを行う為にある仕組みです。wordpressに限らず、Webサイトの構築やデザインに関する事であれば必要不可欠な存在ですから、初心者でも少しずつ理解して、実際に活用していくことが大切です。

cssの理解を深めるとwordpress活用の幅が広がるので、私のようにサイトのあちらこちらをいじりたいなら、なるべく早めに触れておきたいところです。cssはhtmlやjsと同じく、ファイルに記述する形で使用を行うのが特徴です。文章構造の要素にデザインを適用する、それが基本的な考え方となっています。

例えばstyle.cssのbodyタグにフォントカラー(color)を設定すると、画面に表示される全ての文字が指定した色に変化します。フォントサイズやフォントの種類も同様で、bodyタグに適用を行えば、サイトの文字全ての表示が変わるわけです。この機能が細かくIDやクラスといった要素に分かれており、デザインとの結び付けとなるのがcssです。

Chromeなどのブラウザに搭載されるデベロッパーツールには、ページ内のどの要素にどういったcssが適用されているか、それを分析できる機能が備わっており、サイトの装飾を行う時には重宝します。視覚的に把握できたり、リアルタイムで変更が加えられますから、是非これからcssでサイトにユニークさをプラスしたのであれば、デベロッパーツールを使ってみることをお勧めします。

 

htmlは文章構成でありページの構造

 

htmlもcssと同様に、Webサイトを構成している構造体の1つで、wordpressにとってもなくてはならない存在です。htmlとは<ハイパーテキスト・マークアップランゲージ>のことで、文章の構造を記述する為にあるものです。

単なるテキストを思い浮かべてみると分かりますが、普通の文章ではどの文字を強調したり、どの色を変えるかといった指定が不可能です。その点、htmlはテキストをタグという要素で挟むことで、様々な装飾や機能を付与できるようになっています。

htmlでできることは、例えば文章中に画像を挿入したり、その画像を他のページとリンクで結び付けるなどです。また、見出しを段階に合わせてサイズ調節するのも容易ですし、英文だけフォントを変えておしゃれにしたりもできます。

cssで要素に装飾を与え、htmlでその要素を書き出し構成していく。この工程がまずはひとつのページを作る流れとなりますので、htmlとcssの紐づけは理解しておく必要があります。

 

 


 

※htmlとcss、そしてphpを加えた関係性を表した図

phpは動的にwebサイトを構築する

 

phpはサーバー側で動作する、オープンタイプの汎用スクリプト言語です。phpは動的なページの生成に強みがあって、例えば会員制のWebサイト構築など、条件によってページを動かすような構造にはなくてはならないスクリプト言語となります。wordpressにおいては多数ある言語の中でphpが採用されております。プラグイン機能でもこのスクリプト言語を使用しているので、多くのwordpressプラグインの骨組み的な存在となっています。

phpの基本的な仕組みとしては、クライアントからの接続を受けたサーバーが、ページを表示する前にプログラムで処理を行い、その結果を返す形です。例えば、会員制サイトの場合は、ログイン状態を判定してログイン画面や会員画面を振り分けたり、会員に合わせてそれぞれ名前を表示するなどの機能が実現できます。phpでできることの1つとして、データベースのアクセスや操作が挙げられますから、このような高度な機能が盛り込めるというわけです。データベースが扱えるので、膨大な情報から高度な検索が行えたり、より複雑なページ構成も行えることを意味します。

これらを応用していくと、ブラウザで動作するオンラインゲームや、外部サービスが提供する機能を扱う、APIを駆使したWebサービスも作り上げられます。

wordpressでは、プラグインの動作に必要なデータや設定など、phpで管理を行うケースが多いです。また、テーマのphpを編集することで、デザインや画面構成の微調整といった細かな設定もできます。

動的というのがphpのキーワードで、これだけだとJavaScriptに似た印象を受けますが、サーバー側で動作する点が決定的に違います。サーバーで動作する都合上、セキュリティが気になる場面でも活用可能ですし、JavaScriptでは実現できないデータの操作も有効となります。ユーザーごとに違うページ表示を行いたい、そういうニーズに応えてくれるのもphpならではです。

ファイルのアップロードや、ブラウザから行うファイル操作なども、JavaScriptのみでは達成が難しい機能です。ただし、この2つの言語はお互いが少しずつ違う領域を扱い、相互的に組み合わせられる相性の良さがあるので、セットで使用することが珍しくないです。

phpの全容を理解するのは簡単なことではありませんが、htmlやcssの領域までカバーしていたり、JavaScriptと組み合わせて使用することによって自由自在な動的なサイトデザインを作り上げていく事ができます。これが「デザインは機能性である」という私のデザインポリシーにも繋がってきます。

これからwordpressを始めようとするユーザーにとっても、Webでのデザイナーにとっても、phpは覚えておいて損をすることがない知識であるので、可能であればこちらもcssやhtmlと合わせて学習することを強くおすすめします。

 

 

さぁ、Wordpressをはじめよう

 

さて、ここまで説明をしてきましたが、頭が(目が)痛くなりましたでしょうか?(私のサイトは空気感や雰囲気を大事にしているため、強調文字とか全然いれてないので見難くて申し訳ありません。)

このCSSやHTMLの内容をいきなり理解するのは難しいかもしれません。ですが、このcssとhtml、そしてphpの関係性というのはwordpressを始めるにあたっての理解の重要度が高いです。

サイトのカスタマイズを行ううえで何度もつまずき、何度もやりなおし、何度も試しながら自分オリジナルのサイトを作り上げていく事は、ロールプレイングゲームやシミュレーションゲームにのめり込むようにエキサイティングな経験ができます。

是非、新たなスキルセットをあなた自身に追加していくために、wordpressを始めてみたらいかがでしょう。

 

 


おまけ:jQueryとは?

 

jQueryとは、よくJavaScriptと混同されている情報が散見しておりますが、JavaScriptとは全く別のプログラム言語となります。

混同される理由として、jQueryでできることがJavaScriptの機能が簡単に使えたり、より高度な活用が実現できたりする点にあります。

JavaScriptは、ブラウザによって対応状況が異なるので、種類やバージョンに合わせた工夫が必要でした。これがWeb制作者側の負担となっており、一時はとても敬遠されていたといえます。JavaScriptがなくてはならないものに変化したのは、jQueryによるところが大きいでしょう。jQueryはブラウザ間の差異をなくすことで、JavaScriptの欠点を見事に克服しています。しかも、使い勝手が大幅に向上していますから、煩雑な記述がシンプルになったり、可読性が増して高度なプログラムも書きやすくなりました。

jQueryでできることを具体的に挙げると、cssをユーザーの操作に合わせて動的に変更したり、ページに新しい要素を加えて表示内容を変えるなどです。更に、jQueryのプラグインを使うことで、面倒な準備や記述を行うことなく、高度で洗練されたUIが使用できるようになります。要素のアニメーションもお手の物ですし、リアルタイム処理やphpとの連携も優れていますから、jQueryもまた現代において重要な役割を担っています。wordpressの使用においても、jQueryとの相性は良く、機能性やデザイン性を高める切っ掛けとなります。

近年モバイル向けの高速なページ表示が注目を集めており、GoogleのAMPが浸透しつつあります。AMPは表示における快適性を高める仕組みで、AMP対応のWebサイトと非対応のサイトでは体感に差が生じるほどです。例えば、従来のWebサイトではjQueryを使って動的にページの内容を読み込み、時間差で表示することで体感速度を上げたりしておりました。

今ではwordpressはプラグインでAMP対応が可能であったり、はてなブログやアメーバなどのブログサイトでもAMPページがすぐに作れるよう対応されており、これまでよりも簡単に高速表示が実現します。ただjQueryが不要になるかといえばそれは違いますし、組み合わせによって快適性だけではない、機能面や装飾に関する多様性を広げられるのがjQueryとなります。