HTML/CSS/PHPの基本

HTMLとCSSの編集は賢威をカスタマイズする上で欠かすことのできないものです。
HTMLの編集ができれば賢威のテーマファイル内に簡単にコンテンツを追加することが可能となり、
CSSの編集ができればデザインを大きく変更することが可能となります。
当ページではそんなHTMLとCSSの基本的なことを説明していきます。

HTMLとは

HTMLとは、コンピューターに対してWEBサイトの内容を情報として伝えるために、コンピューターにも文章の構造が理解できるよう文字に目印をつけるための言語です。そのため、HTMLのことをマークアップ言語（マークアップ＝目印）といいます。
今こうしてページ上に書かれている文字一つ一つも、コンピューターに伝わる情報ではHTMLで目印がつけられています。

このページをコンピューターが見たときのHTML（一部抜粋）

<h2>HTMLとは</h2>
<p>HTMLとは、コンピューターに対してWEBサイトの内容を情報として伝えるために、コンピューターにも文章の構造が理解できるよう文字に目印をつけるための言語です。そのため、HTMLのことを<span class="line-yellow b">マークアップ言語</span>（マークアップ＝目印）といいます。今こうしてページ上に書かれている文字一つ一つも、コンピューターに伝わる情報ではHTMLで目印がつけられています。</p>

例えば
「<p>HTMLとは～目印がつけられています。</p>」のHTMLの目印は「<p>」と「</p>」です。
このHTMLの目印のことをタグといいます。
他にも
「<h2>HTMLとは</h2>」の「<h2>」と「</h2>」や
「<span class="line-blue b">」と「</span>」等もタグです。
タグを付与することで、それぞれの文字列やデータに意味や役割が与えられます。
つまり、HTMLでできることは「ブラウザで表示される文字列やデータに意味や役割を与えること」ということになります。

CSSとは

CSSはHTMLで記述されたWEBページのスタイル（見栄え）を定義するための技術です。
CSS ・・・WEBページのスタイル（見栄え）を定義するもの
CSSはあくまでもスタイルを定義するものなので、HTMLとセットでないとWEBページを作ることはできません。
ではHTMLとCSSはどのように結びついてセットとなっているのか、それがタグです。

CSSをHTMLと結びつけるタグとは

例えば、テキストを赤くしたい時、
HTMLは

<span class="red">ここは重要なポイントです。</span>

と書きます。
この「<span class="red">」と「</span>」のことをタグといいます。
そしてCSSは

.red{ color: red; }

と書きます。
これはクラス名（class=”ここの名前”）がredとなっているタグで囲われているときは、テキストの色を赤くすると定義しています。
つまり、CSSでクラス名に対してのスタイルを定義すれば、そのクラス名が付けられたタグ内にそのスタイルを適用させることができるということです。
redの意味が「レッド（赤）」だから赤くなるわけではありません。
例えば

<span class="blue">ここは重要なポイントです。</span>
.blue{ color: red; }

このように書けば、クラス名がblueでもテキストは赤になります。

POINT
  • HTMLにCSSを適用する場合はまず対象のテキスト等をタグで囲む。
  • クラス名に対して定義されたスタイルはそのクラス名が付けられたタグ内にのみ適用される。

HTMLを編集するには

HTMLを編集するには、まずHTMLがWEBサイトにどのように保管されているのか？ということを理解する必要があります。

WEBサイトは複数のHTMLデータの集合体

WEBサイトは複数のHTMLデータ（HTMLが記述されたファイルやデータ）の集合体です。
HTMLが記述されたファイルやデータがどのように構成されているかは、WEBサイトの形式（HTML形式やワードプレス形式等）によって異なります。
ワードプレスについてよくわからない方は以下ページをご参照ください。

HTMLサイトの場合

  • HTMLが記述されたHTMLファイル（拡張子：.html）がページ毎に存在します。
HTMLサイトの構成例

HTMLサイトの構成例

ワードプレスサイトの場合

  • HTMLとPHP等が記述されたPHPファイル(拡張子：.php）が必要に応じて存在します。（※ページ毎ではありません。）
  • ワードプレスで投稿・追加したページの文章データがページ毎に存在します。
ワードプレスサイトの構成例

ワードプレスサイトの構成例
上記の例では「page.php」と「single.php」は一つのPHPファイルを複数ページで使いまわしているイメージです。
各ページの独自の文章データはPHPファイル内ではなくワードプレス（データベース）で保管しています。
つまり、共通している部分を一つのPHPファイルに保管して使いまわし、独自の文章等をワードプレス（データベース）で保管して表示させているということです。
ワードプレスサイトの構成例
ここまででHTMLサイトとワードプレスサイトでは、HTMLが記述されたファイルやデータの保管方法が異なることがわかりました。
最後に、これらを踏まえてそれぞれの編集方法を説明します。

HTML編集方法

HTMLサイトの場合

編集したいページの対象ファイルを開いて直接HTMLを編集します。
ファイルを「開く」「編集」「上書き」するには全てFTPソフトを使用します。
ファイルの編集方法の詳細につきましては以下ページをご参照ください。

ワードプレスの場合

編集したいページの共通部分のHTMLを編集する場合は、PHPファイルを編集しますので、HTMLサイトと同様に、FTPソフトを使用します。
ワードプレス（データベース）に保管してある独自の文章等を編集する場合は、ワードプレスにて編集を行います。
ワードプレスの操作方法につきましては、検索エンジンで「ワードプレス」等の検索キーワードで調べていただければ、操作方法を説明しているページが多数出てきますので、確認してみてください。

CSSを編集するには

CSSの編集はHTMLサイトとワードプレスサイトで方法は同じです。
方法は大きく分けて3つございます。

  • 特定のCSSファイルに記述する
  • HTMLが記述されたファイルやデータのどこかに記述する
  • タグに直接指定（style属性）する

この3つの方法がございます。

特定のCSSファイルに記述する

CSSの編集のほとんどがこの方法を用います。
ほとんどのWEBサイトではHTMLが記述されたファイルやデータとは別にCSSファイルが存在し、そのCSSファイル自体をHTMLが記述されたファイルやデータの方が読み込んでいます。（※読み込むというのはリアルタイムでそのCSSファイルをダウンロードしているようなイメージです。）
特定のCSSファイルに記述する
賢威の子テーマにはCSSを追加、編集するためのCSSファイル（base.css等）があらかじめ用意されていますので、そちらを編集するようにしてください。
ファイルの編集方法の詳細につきましては以下ページをご参照ください。

HTMLが記述されたファイルやデータのどこかに記述する

headタグ内 もしくは bodyタグ内 にstyleタグを記述しCSSを定義する方法となります。
※以前はstyleタグはheadタグ内でしか使用できませんでしたが、HTML5からはbodyタグ内でも使用することが可能になりました。

HTMLファイル（例）

<style>
p.red{
    font-size: 15px;
    color: red;
}
</style>

3.タグに直接指定（style属性）

HTMLのタグに直接記述する方法となります。

HTMLファイル（例）

<p style="font-size: 15px; color: red;">段落テキスト</p>

PHPとは

PHPとは、HTMLを動的に表示（条件によって表示を変化）させる機能や、サーバ側でデータを操作する機能を開発できるプログラミング言語です。

PHPでできること

HTMLを動的に表示させるとは

HTMLは静的なデータ＝変化しないデータですので、編集しない限り、表示される文字列やデータが変化したりしません。
PHPを使用すれば、その静的なデータであるHTMLを動的なデータ＝条件によって変化するデータとして表示させることができるようになります。
PHPでできること
PHPでできること

PHPを編集するには

PHPを編集するにはプログラミングの基本的な知識と技術を身に着ける必要があります。
以下で初心者の方でもPHPを扱える方法をご紹介させていただきますが、リスクが伴うことから当サイトとしては推奨できない方法となります。
PHPを編集する場合は基本的な知識と技術を身に着けていただくことを当サイトでは強く推奨いたします。

PHPのコードを検索エンジンで調べて参考にする

PHPで実現したい機能を検索エンジンで調べて探す方法となります。
探して参考にするだけでしたらむしろ当サイトでも推奨させていただく方法の一つです。
が、基本的な部分の理解が浅いと、インターネット上で見つけたコードをコピーして貼り付けるだけになってしまう可能性が高いです。
その場合、以下のリスクがございます。

  • サイト内の既存のデータに影響を与えてしまい、既存の機能が動作しなくなったり、表示が崩れたりすることがある
  • 既に推奨されていない方法が使われていることがある（情報が古い）
  • 未検証のものもある

PHPのコードを公開しているサイトの中には、非常に丁寧に解説をしていただいていたり、都度見直し・更新を行って最新のコードを公開しているサイトも多く存在します。
その為、信頼できると思えるサイトの情報なら利用してみても良いかもしれません。ですが、前途したリスクがあることは念頭に置いて実践するようにしてください。
PHPはHTMLとは異なり、一つの文字を消してしまったり、ずらしてしまったりするだけで、そのファイルを使用しているページ全てがエラーとなり表示されなくなってしまう可能性がございます。
よって編集する際は以下の注意点を確認し徹底するようにしましょう。

PHPを編集する際の注意点

  • 編集前に必ずバックアップをとる（FTPソフトの注意点をご参照ください。）
  • 編集しない箇所は触らない
  • 全角のスペースや記号を使用しないように気を付ける
  • PHPは基本的には「<?php」で開始され「?>」で終了します。この間を編集する際は注意が必要です。※この間に文章やHTMLを挿入したりしないようにしてください。（※一部挿入できる場合を除く）

PHPファイルを編集する際の注意点