ホームページ・ブログ記事に使える知っておきたいHTML・CSS
ネットでの情報発信のバリエーションを増やすことで、読者の目を惹くサイト作りができます。今回はすぐに使える基本的なデザインエッセンスをまとめました。下記の目次より該当項目をクリックして閲覧してみてくださいね
目次
9.背景色をつける
10.枠線と背景の複合型（応用）
11.余白の設定(マージンとパディング)
12.枠線の応用
13.枠線の応用：見出しの作成
14.記事下などに常に挿入する定型文サンプル
１、改行の設定
（１）サンプル（改行設定）
こんにちは<br>さようなら
こんにちは<br>さようなら
サンプルプレビュー：
こんにちは
さようなら
改行の設定
解説：改行をしたいときは、<br>を改行したい部分のあとにつける
２、文字の装飾
（１）サンプル（太字設定：装飾のみ）
<b>こんにちは</b>
<b>こんにちは</b>
サンプルプレビュー：
こんにちは
太字の設定（太字装飾のみ）
解説：文字を太字にするときは、<b></b>で太くしたい部分を囲む。ただし、太字の装飾のみの役割であって、コンテンツの重要さに影響しない。サンプル３の使い方をすると、記事の中でのキーワードの重要さも表現できるので、検索キーワードを強化する際の使い分けをすることがオススメ。
（２）サンプル（太字設定：装飾+キーワード対策）
<strong>こんにちは</strong>
<strong>こんにちは</strong>
サンプルプレビュー：
こんにちは
太字の設定（太字装飾かつキーワードの重要もかねる）
解説：太字にするもうひとつの方法として、<strong></strong>で囲むものもある。これは、<b></b>のときと違い、重要なキーワードというアピールも兼ねる。<strong>を使う際は、キーワードで検索してもらいたい重要キーワードのみに限定し、単純に太字にしたい場合は<b>を使うという使い分けがオススメ。
（３）サンプル（文字サイズの設定）
<font size=”6″>こんにちは</font>
<font size="6">こんにちは</font>
サンプルプレビュー：
こんにちは
文字サイズの設定
解説：fontのサイズを指定します。size=””の中にある数字の大小で、フォントの大きさを指定します。数字は、１～７までの範囲しか入りません
（４）サンプル（文字色の設定）
<font color=”#228B22″>こんにちは</font>
<font color="#228B22">こんにちは</font>
サンプルプレビュー：
こんにちは
文字色の設定
解説：fontの色を指定します。color=””の中にカラーコードを入れることで、文字の色を変更できます。
３、表示位置の設定
（1）サンプル（表示位置の設定：中央揃え）
<center>こんにちは</center>
<center>こんにちは</center>
サンプルプレビュー：
解説：中央揃えしたいものを<center></center>で囲む
４、リンクの設定パターン
（１）サンプル（リンクの設定：同一ウィンドウ）
<a href=”飛び先のURL“>リンクの文字または画像を挿入</a>
<a href="飛び先のURL">リンクの文字または画像を挿入</a>
サンプルプレビュー：
同一ウィンドウリンク
解説：飛び先のURLには、リンクさせたいURLを記述。リンクの文字またが画像を挿入の箇所には、任意の文字を記述。上記はクリックすると。当ホームページである「https://kconcept.link」にリンクするようにしています。
※この設定は、同一ウィンドウといって、現在見ているページがクリックすることで切り替わる設定です。このリンク設定は、同じサイトを移動するときに一般的に使います。
<a href=”飛び先のURL” target=”_blank”>リンクの文字または画像を挿入</a>
<a href="飛び先のURL" target="_blank">リンクの文字または画像を挿入</a>
サンプルプレビュー：
別ウィンドウリンク
解説：上記と違い今度は、クリックすると別のウィンドウが開きます。これは、他のサイトへのリンクのときに使うのが一般的です。なぜなら、他のサイトへいったあとに、ページ閲覧を終了させても、リンクの元のサイトはまだ残っているため、その後もあなたのサイトのページを閲覧する可能性があるからです。
<a href=”mailto:あなたのメールアドレス①“>メールはこちらへ②</a>
<a href="mailto:あなたのメールアドレス①">メールはこちらへ②</a>
サンプルプレビュー：
メールアドレスリンク
解説：メールアドレスクリックするとメーラーが開き、メールを送信できるようにするリンクです。「あなたのメールアドレス①」の部分に、あなたのメールアドレスを入力。「メールはこちらへ②」の部分は、画面で表示される部分なので、任意の文字を挿入してください
<a href=”tel:0001234567“>000-123-4567</a>
<a href="tel:0001234567">000-123-4567</a>
サンプルプレビュー：
電話番号リンク
解説：telのあとにハイフォンなしで電話番号の入力。<a></a>の間に挟まれている部分が実際に表示される部分なので、こちらには電話番号をのせるか、もしくは、「お電話はこちらをクリックするとかかります」のように文字を記述することもよいでしょう
５、画像関連
<img src=”画像のURL” alt=”代替テキスト“>
<img src="画像のURL" alt="代替テキスト">
サンプルプレビュー：
画像の設定（代替テキストあり）
解説：画像の設定は、画像のURLを記載し、代替テキストの部分に画像の説明を入力します。画像は文字と認識されないので、代替テキストで補足をします。
<img src=”画像のURL“>
<img src="画像のURL">
サンプルプレビュー：
画像の設定（代替テキストなし）
解説：画像の設定は、画像のURLを記載し、代替テキストは記述しない場合です。代替テキストはできる限り設定することをおすすめしますが、装飾画像などでどうしても代替テキストがない場合は、こちらを使います。
６、画像リンクの設定方法
<a href=”飛び先のURL“><img src=”画像のURL” alt=”代替テキスト“></a>
<a href="飛び先のURL"><img src="画像のURL" alt="代替テキスト"></a>
サンプルプレビュー：
リンクを画像にした場合（同一ウィンドウリンク：代替テキストあり）
解説：飛び先のURLには、リンクさせたいURLを記述。<a></a>の間には、文字リンクだけでなく、上記のように画像を設定することも可能。imgの画像を入れると、画像をクリックしたときにリンクする効果を作ることができる。上記はクリックすると。当ホームページである「https://kconcept.link」にリンクするようにしています。
※こちらは同一ウィンドウ設定
<a href=”飛び先のURL“><img src=”画像のURL“></a>
<a href="飛び先のURL"><img src="画像のURL"></a>
サンプルプレビュー：
リンクを画像にした場合（同一ウィンドウリンク：代替テキストなし）
解説：代替テキストを設定していない場合
※こちらは同一ウィンドウ設定
<a href=”飛び先のURL” target=”_blank”><img src=”画像のURL” alt=”代替テキスト“></a>
<a href="飛び先のURL" target="_blank"><img src="画像のURL" alt="代替テキスト"></a>
サンプルプレビュー：
リンクを画像にした場合（別ウィンドウリンク：代替テキストあり）
解説：代替テキストありの場合
※こちらは同一ウィンドウ設定
<a href=”飛び先のURL” target=”_blank”><img src=”画像のURL“></a>
<a href="飛び先のURL" target="_blank"><img src="画像のURL"></a>
サンプルプレビュー：
リンクを画像にした場合（別ウィンドウリンク：代替テキストなし）
解説：代替テキストなしの場合
※こちらは同一ウィンドウ設定
７、装飾設定
<div style=””>装飾したいものを記述</div>
<div style="">装飾したいものを記述</div>
解説：
ブロック要素の「div」（ディヴ）
divはブロック要素といい、装飾したいものをdiv で挟みます。
装飾開始を支持する「style」(スタイル）
styleはdiv で挟まれた部分にどんな装飾をするかを指定するものです。
イコール（＝）のあとに、ダブルクォーテーション（”）を付け、その中に装飾する要素を指定していきます。
８、枠線の設定
<div style=”border:5px solid #cccccc;“>こんにちは</div>
<div style="border:5px solid #cccccc;">こんにちは</div>
サンプルプレビュー：
ボーダー設定（実線）
解説：border（ボーダー）のあとに、：（コロン）をつけて、線の太さ、線の種類、線の色を指定すると、「こんにちは」の周りに枠線が付きます。
5ｐｘ：数字を変えると線の幅が指定されます
solid:線の種類です。solidは実線を表します。その他は下記に記載
#cccccc：カラーコードといいこれを変更することで、線の色を変更できます。現在はグレー
<div style=”border:5px dotted #cccccc;“>こんにちは</div>
<div style="border:5px dotted #cccccc;">こんにちは</div>
サンプルプレビュー：
ボーダー設定（ドット）
解説：dottedを設定すると、ボーダーがドットになります。
<div style=”border:5px double #cccccc;“>こんにちは</div>
<div style="border:5px double #cccccc;">こんにちは</div>
サンプルプレビュー：
ボーダー設定（ダブル）
解説：doubleを設定すると、ボーダーが2重線になります。
<div style=”border:1px solid #cccccc;border-radius:5px;“>こんにちは</div>
<div style="border:1px solid #cccccc;border-radius:5px;">こんにちは</div>
サンプルプレビュー：
ボーダー設定（角丸）
解説：borderのあとに、「border-radius」を追加することで、枠線を角丸にすることができます。数字を大きくすると、角丸の半径を大きくすることができます。
９、背景色をつける
<div style=”background:#cccccc;“>こんにちは</div>
<div style="background:#cccccc;">こんにちは</div>
サンプルプレビュー：
背景色の設定
解説：backgroundは背景の設定です。#ccccccは、背景の色。カラーコードを変更すると、背景色も変更できます。
１０、枠線と背景の複合型（応用）
<div style=”border:3px solid #cccccc;border-radius:5px;background:#ffffcc;“>こんにちは</div>
<div style="border:3px solid #cccccc;border-radius:5px;background:#ffffcc;">こんにちは</div>
サンプルプレビュー：
枠線、角丸、背景色を組み合わせた混合パターン
解説：border（枠線）と、border-radius（角丸）と、background（背景色）を組み合わせると上記のような形の装飾ができます。
;（セミコロン）を付けることで、たくさんの装飾を組み合わせることができます。
１１、余白：マージン・パディング
<div style=”border:3px solid #cccccc;border-radius:5px;background:#ffffcc;padding:10px;margin:10px;“>こんにちは</div>
<div style="border:3px solid #cccccc;border-radius:5px;background:#ffffcc;padding:10px;margin:10px;">こんにちは</div>
サンプルプレビュー：
余白の設定
解説：上記で、枠線と角丸、そして背景色を組み合わせた形をとりましたが赤字のように、padding（パディング）と、margin（マージン）をそれぞれ設定することで、余白を作ることができます。
以下の図のように、こんにちはをひとつのカタマリ（ブロック要素）としているので、こんにちはから、枠線の内側までがパディング(padding)の余白になり、枠線の外側の余白がマージン(margin)となります。両者を使い分けることで、見やすいサイトを作ることができます。
１２、枠線の応用
<div style=”border-top:5px solid #cccccc;”>こんにちは</div>
<div style="border-top:5px solid #cccccc;">こんにちは</div>
サンプルプレビュー：
線を上に設定
解説：borderは、そのままでは、周り全部を囲いますが、上記のようにborderに、「-top」をつけると、上だけに線を設定することができます。下、左、右もそれぞれ下記に掲載します。
<div style=”border-bottom:5px solid #cccccc;”>こんにちは</div>
<div style="border-bottom:5px solid #cccccc;">こんにちは</div>
サンプルプレビュー：
枠線を下に設定
解説：border-bottom
<div style=”border-left:5px solid #cccccc;”>こんにちは</div>
<div style="border-left:5px solid #cccccc;">こんにちは</div>
サンプルプレビュー：
枠線を左に設定
解説：border-left
<div style=”border-right:5px solid #cccccc;”>こんにちは</div>
<div style="border-right:5px solid #cccccc;">こんにちは</div>
サンプルプレビュー：
枠線を右に設定
解説：border-right
１３、枠線の応用
（１）サンプル（見出しの作成）
<div style=”border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;“>こんにちは</div>
<div style="border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;">こんにちは</div>
サンプルプレビュー：
枠線の応用で見出しを作る
解説：border-leftで左側にオレンジのボーダーを引き、border-bottomで、ドットの下線を弾くことで、見出しを作ることができる
<div style=”border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;padding:6px;margnin:6px;“>こんにちは</div>
<div style="border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;padding:6px;margnin:6px;">こんにちは</div>
サンプルプレビュー：
枠線の応用で見出しを作る（応用）
解説：上記の見出しにさらに、余白の設定を加えることで見やすい見出しをつくることができる
（３）サンプル（見出しの作成：余白+文字色、サイズ、太さを追加）
<div style=”border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;padding:6px;margnin:6px;”><font size=”6″ color=”#228B22″><strong>こんにちは</storong></font></div>
<div style="border-left:6px solid #ffcc33;border-bottom:2px dotted #cccccc;padding:6px;margnin:6px;"><font size="6" color="#228B22"><strong>こんにちは</storong></font></div>
サンプルプレビュー：
枠線の応用で見出しを作る（応用）
解説：上記の見出しにさらに、文字サイズ、文字色、そして強調の設定を入れることで、見出しをさらに強調することができます。
14,定型文サンプル
定型文を作るときのサンプルです。
下記をそのままコピーし、①から⑧の情報をあなたの使用にあわせて使ってください
<div style="border:1px solid #cccccc;padding:10px;margin:10px;background:#ffffcc;border-radius:6px;"> サイトタイトル① 住所② ◇<a href=”アクセス記事のURL③”>アクセス③</a> ◇<a href=”サービス内容のURL④”>サービス内容④</a> ◇<a href=”お客様の声⑤”>お客様の声⑤</a> ◇<a href=”mailto:あなたのメールアドレス⑥”>お問い合わせメールはこちら⑥</a> ◇<a href=”お問い合わせフォームのあるページのURL⑦”>お問い合わせフォームはこちら⑦</a> ◇<a href=”tel:0001234567″>お問い合わせ電話はこちら(0001234567)⑧</a> </div>
上記を使ってできたサンプルが下
名古屋市西区円明町96
◇アクセス
◇サービス内容
◇お客様の声
◇お問い合わせメールはこちら
◇お問い合わせフォームはこちら
◇お問い合わせ電話はこちら(TEL 000-000-0000)