7e OFFICIAL BLOG

HTMLとCSSとは!コーディングの準備知識とWordPressでの記述方法~はじめてのHTMLとCSS~

ここでは、以降「Xeory Extention」のデザインをカスタマイズするにあたって必要となる、HTMLとCSSを使ったコーディングの準備知識を紹介します。

コーディングとは

コーディングとは、HTMLやCSSといった「コードを書く」ことを指し、ピアノなどの楽器で作曲した音楽を、楽譜に起こす作業とよく似ています。音楽でいう「楽譜」にあたるものをソースコードと呼び、コンピューターはこのソースコードを読み込んで、ウェブページを表示させています。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、文章構造を記述するドキュメントのことを言います。テキストなどの要素に対し、「<>」の記号(タグ)で挟み込んで表現します。

CSSとは

CSSとは、Cascading Style Sheet(カスケーディングスタイルシート)の頭文字をとったもので、HTMLをもとに配置や装飾を指定するドキュメントのことを言います。CSSは「セレクタ」「プロパティ」「値」の3つで構成され、HTML文書の特定の個所の配置や装飾を指定することができます。

テキストなどの表示スタイルは、HTMLのタグ内に直接書き込んで指定することもできますが、記述が多く編集がしにくくなるので、なるべくHTMLとCSSは別々に記述した方がスマートです。またHTMLとCSSはセットで覚えると、より学習しやすいと思います。

HTMLの記述方法

HTMLは、投稿ページや個別ページの編集画面で入力します。

編集画面のテキスト入力欄を一度クリックすると右上にアイコンが表示されます。アイコンをクリックし、続けて「HTMLとして編集」をクリックすると、HTMLの記述が行えるようになります。

HTMLの記述は、以上の手順で個別ページや投稿ページの編集時に都度行うようにしてください。

CSSの記述方法

CSSの記述方法は2つあります。

パターン1

まず1つ目としては、管理画面の左側メニュー「外観」から「テーマエディター」をクリックします。このとき、『注意』というウィンドウが表示されますが「理解しました」を選択して進みましょう。

テーマエディター画面の右側一番上にあるスタイルシート(style.css)という項目が選択されていることを確認し、記述欄を一番下までスクロールしてください。

ここに記述されているCSSコードはデフォルトのデザインを指定しているものですが、CSSは後から記述されたものが上書き(反映)されるので、必ず既存コードの一番下に記述します。

ただこの方法は、プレビュー画面を見ながら編集することができないので、後に説明する2つめのCSSの記述方法で作成したコードを、最終的に貼り付ける際などに使用すると管理しやすいです。

パターン2

まずは、管理画面の左側メニューかの「外観」から「カスタマイズ」を選択し、カスタマイズ画面に移動します。カスタマイズ画面に移動したら、左側のメニューの一番下にある「追加CSS」をクリックします。

すると記述欄が表示されるので、ここにCSSを記述します。またこの方法では、右側のプレビュー画面で都度確認できるので、デザインを思案しながらコーディングする際などに便利です。

以上を踏まえて、次回以降の記事を参考に「Xeory Extention」の固定デザインをカスタマイズしていきましょう!

関連記事一覧

PAGE TOP