【非エンジニアでも編集したい】HTML と CSS の基礎

制作の久保田です。

サイトの管理をしていると、簡単な修正であれば自分でできないか、、といった問い合わせを受けることがよくあります。
今回は、webサイトを構成している、HTMLとCSSの簡単な記述方法を掲載するので、非エンジニアでのサイト編集に役立てればと思います。

HTMLとは？

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、リンクで相互に繋がったページを作成するマークアップ言語です。
上から順番に読み進めていく通常の文章と違い、関連した内容にリンクで移動できるのが特徴です。

HTMLは、ティム・バーナーズ・リーによって提案され、W3Cによって規格化されています。
ファイル自体は、テキストエディタで記述できるテキストファイルです。

HTML書き方の基礎

マークアップ言語というと、プラグラムのようで難しそうですが、仕組みは非常に単純です。
以下の2点が理解できればokです。

開始タグと終了タグで括る
タグに属性を持たせる

タグとは<html>…</html>といったような、HTMLの記述方法です。
HTMLは、開始タグ <…> と終了タグ </…> で構成されています。
この括弧で括ったところに、文章の意味を持たせます。

属性とは、タグに情報を持たせる役割があります。
リンクを貼りたい場合の記述は
<a href=”ecco.co.jp”>
のようになりますが、この場合、href が属性にあたります。

HTMLタグはかなりの種類があるため、全て覚えようとすると大変ですが、実際に使用される物はそれほど多くありません。
ここでは、主要なタグと記述方法を見ていきます。

基本構成

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
    ...
</body>
</html>

HTMLは大きく分けて、<head>タグと<body>タグで構成されています。
headは、主にページに関する情報を記述します。
SEOでよく言われる、title や detection はhead の中に記述します。
bodyは、実際に表示されるコンテンツ部分です。

主要なタグは以下になります。

<h1>…<h6>（見出し）
<p>（段落）
<a>（リンク）
<img>（画像）
<ul>, <ol>（リスト）
<div>, <span> （汎用タグ）

上記だけ知っていれば、簡単な文章を構成することも可能です。

<h1>…<h6>（見出し）

見出しを作る場合は、<h1>見出し</h1>のように、hタグで括ります。
h1, h2, h3, h4, h5, h6 と、6種類あり、数値が小さいほど大きな見出しです。
<h1>はページ自体のタイトルみたいなものなので、通常は1つのみ指定します。

<p>（段落）

作文するとき、文章を区切って字下げして書くような内容は<p>タグで括ります。
文章ベースのwebページは、見出しと段落のみでも構成できると思います。

<a>（リンク）

HTMLの最大の特徴である、文書にリンクを貼る場合のタグです。
このタグは、先に記述したように、属性値を持たせることで機能します。

<p>エッコのホームページは<a href="https://ecco.co.jp/">こちら</a></p>

エッコのサイトにリンクを貼りたい場合は、上記のようにhref属性にurlを指定します。
aタグの場合は、<a href=””>までをセットで覚えておくと良いです。

<img>（画像）

画像を埋め込む場合に使用するタグです。
これも、aタグ同様、属性値を持たせることで機能します。

<img src="logo.png">

サイトのロゴ画像をページに貼りたい場合は、上記のようにsrc属性にファイルのパスを指定します。
imgタグの場合も、<img src=””>をセットで覚えておきましょう。

ファイルのパスについて

htmlファイルと、画像のデータが同じディレクトリに保存されている場合は、src属性に画像ファイル名を記述すればokです。
ただ、通常webサイトは複数のページ、複数の画像で構成されることが多いので、画像は /images/ や /img/ などのディレクトリにまとめることが多いです。
例えば画像を /img/ にまとめた場合のロゴ画像の指定方法は以下のようになります。

<img src="./img/logo.png">

ファイル構成が、以下の場合
/mypage.html
/img/logo.png
mypage.html から logo.png を指定する記述です。

このファイルまでの階層のことをパスと言います。
上記のサンプルにある ./ は、同一階層の意味です。
なので、同じ階層の imgフォルダの logo.png を指定する場合のパスは ./img/logo.png になります。
ちなみに、一個上の階層の場合は ../ になります。

このファイルのパスは、先にでた<a>タグの場合も同じです。
mypage.htmlと同じ階層にある、yourpage.html にリンクを貼りたい場合は

<a href="./yourpage.html">リンク</a>

のようになります。

<ul>, <ol>（リスト）

HTMLには、見出しや段落の他、リストや表、引用文など、文書を構成するための指定方法が用意されています。
<ul>と<ol>タグは、リスト表示を指定する場合のタグです。
どちらも子要素に<li></li>タグを使用してリストを作ります。

<ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
</ul>

<ul>は箇条書き、<ol>は番号付きのリストになります。

<div>, <span> （汎用タグ）

上記のような、予め意味を持ったタグの他に、汎用的に使用できるタグも用意されています。
これは、後述するcssの指定などに使用されます。

<div>と<span>はタグとしては意味を持ちませんが、多くのサイトでは多用されます。
2つのタグの違いはブロック要素かインライン要素の違いです。
ブロック要素とは、見出しや段落のように文書を一塊りとして構成するような要素です。
インライン要素は、<a>タグや<img>タグのように、文書内の一部として使用される要素です。

<div>はブロック要素、<span>はインライン要素で、使用したい箇所が文書の括り全体なのか一部なのかで使い分けます。
<div>, <span> で一番使用頻度が多いのは、cssを指定する場合に使用する class 属性です。

<div class="contents">
    <p>エッコの<span class="site-name">ホームページ</span>へようこそ</p>
</div>

上記のように、class属性に名前をつけることによって、cssでデザインを調整したりできます。
cssの記述方法については、後述します。

CSSとは？

CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、ウェブページの見た目（デザイン）を指定する記述方法です。
HTMLに直接記述したり、.css ファイルとして保存して読み込んだりして使用します。

記述方法は HTML 同様単純ですが、指定できる値が多く、思った通りのデザインに変更できるようになるまでの学習コストは、HTMLより高いと思います。
ここでは、CSSをゼロから記述できるようにというより、すでに記述されているCSSを編集して、文字の大きさを変えたり、色を変更したりできる程度にファイルの記述方法を見ていきたいと思います。

CSSの記述方法

cssの基本的な記述方法は以下のようになります。

<style>
.クラス名 {
    属性: 値;
}
</style>

クラス名とは、前述した<div>、<span>で指定した要素の名前です。
<div class=”contents”>…</div> にCSSを指定したい場合は、.contents { … } のように記述します。
属性は、例えば色であれば color 、文字サイズであれば font-size のように、記述方法が決まっています。
値には、属性の値を入れるため、色を赤くしたいのであれば、color: red; のように色の情報を与えます。

記述ルールは基本的にこれだけですが、属性と値の数が多いため、興味がある場合は調べてみてください。

先ほどの<div>、<span>と組み合わせて使う場合、以下のようになります。

<!DOCTYPE html>
<html>
<head>
<style>
.contents {
    font-size: 18px;
}
.site-name {
    color: #c5a882;
}
</style>
</head>
<body>
<div class="contents">
    <p>エッコの<span class="site-name">ホームページ</span>へようこそ</p>
</div>	
</body>
</html>

上記の場合、contents の文字サイズを18pxに、「ホームページ」というテキスト色をゴールドに変更しています。
色の指定に使用されている数値の羅列は、カラーコードを16進数値で指定しています。
色の指定方法はいくつかありますが、ここでは割愛します。

WordPressサイトの場合

eccoで作成するwebサイトは、WordPressで作成されたものが多いです。
WordpPress のテンプレートファイルは、前述したhtmlファイルではなく、phpファイルで構成されています。

phpとは、Hypertext Preprocessor（ハイパーテキスト・プリプロセッサー）の略で、htmlファイルの中に、プログラムを記述できる、サイトを構築するのに特化したプログラム言語です。

プログラム言語ではあるけど、ファイル内にはHTMLの記述もあり、HTMLの理解があれば、ある程度編集できる部分もあります。

WordPressのテンプレートファイルは、以下の階層に入ってます。
/wp-content/themes/theme_name/

theme_name の部分は、サイトに使用されているテンプレート名なので、サイトごとに異なります。

該当ファイルの見つけ方のヒント

テンプレートファイルの中は、複数のファイルで構成されていると思います。
その中で、編集したい対象のファイルが見つからない場合のヒントをいくつか書きたいと思います。

プラグインを入れる

Show Current Template を有効化すると、wpログイン中にページ上部に表示されるツールバーに、使用されているテンプレート名が表示されます。
サイトの表示に関わる部分ではないので、有効化してサイトに問題が出るリスクも低いので、有効化してチェックしてみてください。

Show Current Template

ヘッダーやフッター

ヘッダーのナビゲーションやフッターなど、サイトの共通パーツを編集したい場合は、以下のファイル名で作成されているケースが多いです。

header.php（ヘッダー）
footer.php（フッター）
sidebar.php（サイドバー）

WordPressでは、上記のファイル名のパーツを読み込ませるための関数が予め定義されているため、多くのサイトでは上記のファイル名で作成されていると思います。
ナビゲーションを編集したいけど、編集したい箇所が見つからない、、という場合は header.php ファイルがないか確認してみてください。

固定ページの場合

固定ページを編集したい場合、該当ページのurlが名前になっているファイル名がないか探してみてください。
WordPressは、テンプレートの読み込みルールがあり、page-xxx.php のxxx部分に、スラッグ名（url）を指定すると自動で読み込まれる仕組みになってます。

ecco.jp/company/ のテンプレートを編集したい場合、page-company.php というファイルがないか確認します。

一覧ページ、詳細ページの場合

ブログの一覧ページや、詳細ページ編集の場合は、以下のファイル名がないか確認します。

single.php（詳細）
archive.php（一覧）
category.php（カテゴリー一覧）
taxonomy.php（カテゴリー一覧）

ファイル名の一部に上記を含んでる場合も同様です。
例えば、single-item.php、archive-staff.php などのファイル名があった場合でも、singleを含む場合は詳細ページ、archveを含む場合は一覧ページで使用されているファイルであることが多いです。
taxonomy.phpは、カスタマイズで追加されたカテゴリーの場合のファイル名です。

まとめ

以上、サイトを構成するファイルの基礎をまとめましたが、ファイルを編集する場合は、必ずバックアップをとって、問題が出ても戻せる状態にして作業するようにしてください。
また、WordPressの管理画面の「テーマエディター」からの編集はできるだけ避けた方がいいです。FTPで接続してバックアップをとって編集するようにしましょう。
FTPのつなぎ方がわからない場合は、以下の記事が参考になると思います。