目次
はじめに
ブログ運営でHTMLやCSSを使いこなせると、記事の見栄えや広告配置が自由自在になります！この記事では、WordPressでそのまま使えるHTMLとCSSの基礎をエスケープ済みで解説します。
エスケープ済みコードとは、プログラムやデータの中で特定の文字やシーケンスが特別な意味を持つ場合、それらを文字として扱えるように「エスケープ処理」を施したコードのことです。この処理により、通常の文字列として認識されるようになります。
1. HTMLとCSSの役割とは？
HTML
ウェブページの構造を作る「骨組み」です。見出しや段落、リンクを定義します。
CSS
ページのデザインやスタイルを整える「装飾」です。文字色や背景色を設定できます。
2. HTMLの基本コード
以下は、記事に見出しと段落を作る基本的なHTMLコードです：
<h1>ブログタイトル</h1>
<p>このブログでは初心者向けにHTMLとCSSを解説します。</p>
コードの説明：
<h1>
ページの大見出しを作るタグです。
<p>
段落を表すタグで、文章を囲むのに使います。
3. CSSでデザインを加える
次に、文字の色やサイズを調整するCSSコードを紹介します：
<style>
h1 {
color: blue; /* 見出しの文字を青色に / text-align: center; / 文字を中央寄せに / } p { font-size: 16px; / 段落の文字サイズを16ピクセルに / color: gray; / 段落の文字色を灰色に */
}
</style>
コードの説明：
color: blue; → 見出し文字を青色に設定します。
text-align: center; → 見出しを中央に配置します。
font-size: 16px; → 段落の文字サイズを16ピクセルに指定します。
4. 実際に使えるHTML＋CSS例
以下は、HTMLとCSSを組み合わせたコード例です。記事内に使えば、見やすいデザインを簡単に作れます：
<!DOCTYPE html>
<html>
<head>
<title>私のブログ</title>
<style>
h1 {
color: green;
text-align: left;
}
p {
font-size: 14px;
line-height: 1.5; /* 行間を調整 */
}
</style>
</head>
<body>
<h1>ようこそ！</h1>
<p>このブログではHTMLとCSSを使ったカスタマイズ方法を紹介します。</p>
</body>
</html>
5. 注意点
WordPressでコードを貼り付ける際に直接入力すると、文字が崩れることがあります。その場合は：
- コードブロックを使う。
- エスケープ済みコードを利用する。
- 必要に応じて、プラグイン（例：SyntaxHighlighter）を導入してコードを見やすく表示する。
6. まとめ
HTMLとCSSの基本を学ぶことで、ブログ運営の自由度が広がります。この記事で紹介したエスケープ済みコードを使って、自分のブログに応用してみましょう！
以下に、エスケープ済みのHTMLとCSSコードを掲載し、コードの解説をそのまままとめました。記事の付録として使える形式になっています。
付録
HTMLコードの例
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTMLとCSSの基本</title>
</head>
<body>
<header>
<h1>HTMLとCSSの基本</h1>
</header>
<main>
<p>このページではHTMLとCSSの基本について学びます。</p>
</main>
<footer>
<p>© 2024 Example Blog</p>
</footer>
</body>
</html>
HTMLコードの解説
- <!DOCTYPE html>
HTML5を使用することをブラウザに伝える宣言文です。古いHTMLバージョンとの区別を明確にします。
- <html lang=”ja”>
<html>はHTML文書全体を囲むタグです。
lang=”ja”は、このページが日本語で書かれていることをブラウザや検索エンジンに伝えます。
- <head>
ページの設定情報を記述する部分で、ページの見た目には直接影響しません。
- <meta charset=”UTF-8″>
ページの文字エンコーディングを「UTF-8」に設定します。これにより日本語や多言語対応が可能になります。
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
スマホやタブレットでも正しく表示されるように画面幅を設定します。
- <title>HTMLとCSSの基本</title>
ページのタイトルを設定します。ブラウザのタブや検索結果に表示されます。
- <body>
ページのメインコンテンツを含む部分です。
- <header>
ヘッダー部分を定義します。ここにはサイトタイトルやナビゲーションメニューを入れることが一般的です。
- <h1>HTMLとCSSの基本</h1>
メインタイトルを示す見出しタグです。検索エンジンが重要な内容として認識します。
- <main>
ページの主要なコンテンツ部分を定義します。
- <p>
段落を表します。ここに文章を記述します。
- <footer>
フッター部分を定義します。著作権情報やリンクを配置します。
- ©
特殊文字「©」（著作権記号）を表示するためのエンティティです。
CSSコードの例
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
CSSコードの解説
- body { … }
ページ全体のデザインを設定します。
font-family: ページのフォントを指定します（例: Arial）。
line-height: 行間を1.6に設定し、読みやすさを向上させます。
background-color: 背景色を薄い灰色（#f4f4f4）に設定します。
color: テキストの色を暗い灰色（#333）に設定します。
- header { … }
ヘッダー部分のデザインを指定します。
background-color: 背景色を緑色（#4CAF50）に設定します。
color: ヘッダー内の文字色を白に設定します。
padding: 内側の余白を上下10px、左右0pxに設定します。
text-align: 中央揃えに設定します。
- main { … }
メインコンテンツ部分のデザインを指定します。
padding: 内側の余白を20pxに設定し、内容を見やすくします。
免責事項
本記事はHTMLやCSSの基本的な知識を提供することを目的としたものであり、コードや設定の実行に伴う問題について責任を負いかねます。実行の際は自己責任でお願いいたします。
コメント