1. TOP
  2. ビジネス成長
  3. ホームページ・ブログ記事に使える知っておきたいHTML・CSS

ホームページ・ブログ記事に使える知っておきたいHTML・CSS

ネットでの情報発信のバリエーションを増やすことで、読者の目を惹くサイト作りができます。今回はすぐに使える基本的なデザインエッセンスをまとめました。下記の目次より該当項目をクリックして閲覧してみてくださいね

目次

1.改行の設定
2.文字の装飾
3.表示位置の設定
4.リンクの設定方法
5.画像の設定方法
6.画像リンクの設定方法
7.装飾設定(div と style)
8.枠線の設定
9.背景色をつける
10.枠線と背景の複合型(応用)
11.余白の設定(マージンとパディング)
12.枠線の応用
13.枠線の応用:見出しの作成
14.記事下などに常に挿入する定型文サンプル

1、改行の設定

(1)サンプル(改行設定)

こんにちは<br>さようなら

こんにちは<br>さようなら

サンプルプレビュー:

 

こんにちは

さようなら

 

改行の設定

解説:改行をしたいときは、<br>を改行したい部分のあとにつける

目次(TOP)へ


2、文字の装飾

(1)サンプル(太字設定:装飾のみ)

<b>こんにちは</b>

<b>こんにちは</b>

サンプルプレビュー:

こんにちは

 

太字の設定(太字装飾のみ)

解説:文字を太字にするときは、<b></b>で太くしたい部分を囲む。ただし、太字の装飾のみの役割であって、コンテンツの重要さに影響しない。サンプル3の使い方をすると、記事の中でのキーワードの重要さも表現できるので、検索キーワードを強化する際の使い分けをすることがオススメ。

目次(TOP)へ


(2)サンプル(太字設定:装飾+キーワード対策)

<strong>こんにちは</strong>

<strong>こんにちは</strong>

サンプルプレビュー:

こんにちは

 

太字の設定(太字装飾かつキーワードの重要もかねる)

解説:太字にするもうひとつの方法として、<strong></strong>で囲むものもある。これは、<b></b>のときと違い、重要なキーワードというアピールも兼ねる。<strong>を使う際は、キーワードで検索してもらいたい重要キーワードのみに限定し、単純に太字にしたい場合は<b>を使うという使い分けがオススメ。

目次(TOP)へ


(3)サンプル(文字サイズの設定)

<font size=”6″>こんにちは</font>

<font size="6">こんにちは</font>

サンプルプレビュー:

こんにちは

文字サイズの設定

解説:fontのサイズを指定します。size=””の中にある数字の大小で、フォントの大きさを指定します。数字は、1~7までの範囲しか入りません

目次(TOP)へ


 (4)サンプル(文字色の設定) 

<font color=”#228B22″>こんにちは</font>

<font color="#228B22">こんにちは</font>

サンプルプレビュー:
こんにちは

 

文字色の設定

解説:fontの色を指定します。color=””の中にカラーコードを入れることで、文字の色を変更できます。

カラーコードのチェックはこちらでできます。

目次(TOP)へ


 3、表示位置の設定

(1)サンプル(表示位置の設定:中央揃え)

<center>こんにちは</center>

<center>こんにちは</center>

サンプルプレビュー:

こんにちは
中央揃えの設定 

解説:中央揃えしたいものを<center></center>で囲む

目次(TOP)へ


 4、リンクの設定パターン

(1)サンプル(リンクの設定:同一ウィンドウ)

<a href=”飛び先のURL“>リンクの文字または画像を挿入</a>

<a href="飛び先のURL">リンクの文字または画像を挿入</a>

サンプルプレビュー:

こちらをクリック(同一ウィンドウ)

 

同一ウィンドウリンク

解説:飛び先のURLには、リンクさせたいURLを記述。リンクの文字またが画像を挿入の箇所には、任意の文字を記述。上記はクリックすると。当ホームページである「https://kconcept.link」にリンクするようにしています。

※この設定は、同一ウィンドウといって、現在見ているページがクリックすることで切り替わる設定です。このリンク設定は、同じサイトを移動するときに一般的に使います。

目次(TOP)へ


 (2)サンプル(リンクの設定:別ウィンドウ)

<a href=”飛び先のURL” target=”_blank”>リンクの文字または画像を挿入</a>

<a href="飛び先のURL" target="_blank">リンクの文字または画像を挿入</a>

サンプルプレビュー:

 こちらをクリック(別ウィンドウ)

 

別ウィンドウリンク

解説:上記と違い今度は、クリックすると別のウィンドウが開きます。これは、他のサイトへのリンクのときに使うのが一般的です。なぜなら、他のサイトへいったあとに、ページ閲覧を終了させても、リンクの元のサイトはまだ残っているため、その後もあなたのサイトのページを閲覧する可能性があるからです。

目次(TOP)へ


  (3)サンプル(メールリンク)

<a href=”mailto:あなたのメールアドレス①“>メールはこちらへ②</a>

<a href="mailto:あなたのメールアドレス①">メールはこちらへ②</a>

サンプルプレビュー:

メールはこちらへ

 

メールアドレスリンク

解説:メールアドレスクリックするとメーラーが開き、メールを送信できるようにするリンクです。「あなたのメールアドレス①」の部分に、あなたのメールアドレスを入力。「メールはこちらへ②」の部分は、画面で表示される部分なので、任意の文字を挿入してください

 目次(TOP)へ


 (4)サンプル(電話番号リンク)

<a href=”tel:0001234567“>000-123-4567</a>

<a href="tel:0001234567">000-123-4567</a>

サンプルプレビュー:

000-123-4567

 

電話番号リンク

解説:telのあとにハイフォンなしで電話番号の入力。<a></a>の間に挟まれている部分が実際に表示される部分なので、こちらには電話番号をのせるか、もしくは、「お電話はこちらをクリックするとかかります」のように文字を記述することもよいでしょう

 目次(TOP)へ


 5、画像関連

(1)サンプル(画像設定:代替テキスト入力)

<img src=”画像のURL” alt=”代替テキスト“>

<img src="画像のURL" alt="代替テキスト">

サンプルプレビュー:

ケーコンセプト

 

画像の設定(代替テキストあり)

解説:画像の設定は、画像のURLを記載し、代替テキストの部分に画像の説明を入力します。画像は文字と認識されないので、代替テキストで補足をします。

 目次(TOP)へ


(2)サンプル(画像設定:代替テキスト入力なし)

<img src=”画像のURL“>

<img src="画像のURL">

サンプルプレビュー:

 

画像の設定(代替テキストなし)

解説:画像の設定は、画像のURLを記載し、代替テキストは記述しない場合です。代替テキストはできる限り設定することをおすすめしますが、装飾画像などでどうしても代替テキストがない場合は、こちらを使います。

 目次(TOP)へ


 6、画像リンクの設定方法

(1)サンプル(画像リンク:代替入力あり、同一)

<a href=”飛び先のURL“><img src=”画像のURL” alt=”代替テキスト“></a>

<a href="飛び先のURL"><img src="画像のURL" alt="代替テキスト"></a>

サンプルプレビュー:

ケーコンセプト

 

リンクを画像にした場合(同一ウィンドウリンク:代替テキストあり)

解説:飛び先のURLには、リンクさせたいURLを記述。<a></a>の間には、文字リンクだけでなく、上記のように画像を設定することも可能。imgの画像を入れると、画像をクリックしたときにリンクする効果を作ることができる。上記はクリックすると。当ホームページである「https://kconcept.link」にリンクするようにしています。

※こちらは同一ウィンドウ設定

 目次(TOP)へ


(2)サンプル(画像リンク:代替入力なし、同一)

<a href=”飛び先のURL“><img src=”画像のURL“></a>

<a href="飛び先のURL"><img src="画像のURL"></a>

サンプルプレビュー:

 

リンクを画像にした場合(同一ウィンドウリンク:代替テキストなし)

解説:代替テキストを設定していない場合

※こちらは同一ウィンドウ設定

目次(TOP)へ


(3)サンプル(画像リンク:代替入力あり、別)

<a href=”飛び先のURL” target=”_blank”><img src=”画像のURL” alt=”代替テキスト“></a>

<a href="飛び先のURL" target="_blank"><img src="画像のURL" alt="代替テキスト"></a>

サンプルプレビュー:

ケーコンセプト

 

リンクを画像にした場合(別ウィンドウリンク:代替テキストあり)

解説:代替テキストありの場合

※こちらは同一ウィンドウ設定

 目次(TOP)へ


 (4)サンプル(画像リンク:代替入力なし、別)

<a href=”飛び先のURL” target=”_blank”><img src=”画像のURL“></a>

<a href="飛び先のURL" target="_blank"><img src="画像のURL"></a>

サンプルプレビュー:

 

 リンクを画像にした場合(別ウィンドウリンク:代替テキストなし)

解説:代替テキストなしの場合

※こちらは同一ウィンドウ設定

目次(TOP)へ


 7、装飾設定

(1)サンプル(ブロック要素div設定とstyleの設定)

<div style=””>装飾したいものを記述</div>

<div style="">装飾したいものを記述</div>

 

解説:

ブロック要素の「div」(ディヴ)

divはブロック要素といい、装飾したいものをdiv で挟みます。

装飾開始を支持する「style」(スタイル)

styleはdiv で挟まれた部分にどんな装飾をするかを指定するものです。

イコール(=)のあとに、ダブルクォーテーション(”)を付け、その中に装飾する要素を指定していきます。

目次(TOP)へ


8、枠線の設定

 (1)サンプル(囲い枠の設定、実線)

<div style=”border:5px solid #cccccc;“>こんにちは</div>

<div style="border:5px solid #cccccc;">こんにちは</div>

サンプルプレビュー:

 

こんにちは

 

ボーダー設定(実線)

解説:border(ボーダー)のあとに、:(コロン)をつけて、線の太さ、線の種類、線の色を指定すると、「こんにちは」の周りに枠線が付きます。

5px:数字を変えると線の幅が指定されます

solid:線の種類です。solidは実線を表します。その他は下記に記載

#cccccc:カラーコードといいこれを変更することで、線の色を変更できます。現在はグレー

カラーコードのチェックはこちらでできます。

 目次(TOP)へ


 (2)サンプル(囲い枠の設定、ドット)

<div style=”border:5px dotted #cccccc;“>こんにちは</div>

<div style="border:5px dotted #cccccc;">こんにちは</div>

サンプルプレビュー:

 

こんにちは

 

 

ボーダー設定(ドット)

解説:dottedを設定すると、ボーダーがドットになります。

目次(TOP)へ


  (3)サンプル(囲い枠の設定、2重線)

<div style=”border:5px double #cccccc;“>こんにちは</div>

<div style="border:5px double #cccccc;">こんにちは</div>

サンプルプレビュー:

 

こんにちは

 

ボーダー設定(ダブル)

解説:doubleを設定すると、ボーダーが2重線になります。

目次(TOP)へ


  (4)サンプル(囲い枠の設定、角丸)

<div style=”border:1px solid #cccccc;border-radius:5px;“>こんにちは</div>

<div style="border:1px solid #cccccc;border-radius:5px;">こんにちは</div>

サンプルプレビュー:

 

こんにちは

 

ボーダー設定(角丸)

解説:borderのあとに、「border-radius」を追加することで、枠線を角丸にすることができます。数字を大きくすると、角丸の半径を大きくすることができます。

 目次(TOP)へ


 9、背景色をつける

 (1)サンプル(背景色の設定)

<div style=”background:#cccccc;“>こんにちは</div>

<div style="background:#cccccc;">こんにちは</div>

サンプルプレビュー:

 

こんにちは

 

背景色の設定

解説:backgroundは背景の設定です。#ccccccは、背景の色。カラーコードを変更すると、背景色も変更できます。

目次(TOP)へ


 10、枠線と背景の複合型(応用)

 (1)サンプル(囲い枠と背景の設定)

<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(背景色)を組み合わせると上記のような形の装飾ができます。

;(セミコロン)を付けることで、たくさんの装飾を組み合わせることができます。

目次(TOP)へ


 11、余白:マージン・パディング

 (1)サンプル(マージンとパディングを極める)

<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)となります。両者を使い分けることで、見やすいサイトを作ることができます。

margin

 目次(TOP)へ


 12、枠線の応用

 (1)サンプル(枠線の設定、上部にボーダー)

 <div style=”border-top:5px solid #cccccc;”>こんにちは</div>

<div style="border-top:5px solid #cccccc;">こんにちは</div>

サンプルプレビュー:

こんにちは

 

線を上に設定

解説:borderは、そのままでは、周り全部を囲いますが、上記のようにborderに、「-top」をつけると、上だけに線を設定することができます。下、左、右もそれぞれ下記に掲載します。

 目次(TOP)へ


(2)サンプル(枠線の設定、下部にボーダー)

<div style=”border-bottom:5px solid #cccccc;”>こんにちは</div>

<div style="border-bottom:5px solid #cccccc;">こんにちは</div>

サンプルプレビュー:

こんにちは

 

 枠線を下に設定

解説:border-bottom

目次(TOP)へ


 (3)サンプル(枠線の設定、左側にボーダー)

<div style=”border-left:5px solid #cccccc;”>こんにちは</div>

<div style="border-left:5px solid #cccccc;">こんにちは</div>

サンプルプレビュー:

こんにちは

 

枠線を左に設定

解説:border-left

目次(TOP)へ


 (4)サンプル(枠線の設定、右側にボーダー)

<div style=”border-right:5px solid #cccccc;”>こんにちは</div>

<div style="border-right:5px solid #cccccc;">こんにちは</div>

サンプルプレビュー:

こんにちは

 

枠線を右に設定

解説:border-right

目次(TOP)へ


  13、枠線の応用

(1)サンプル(見出しの作成)

<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で、ドットの下線を弾くことで、見出しを作ることができる

目次(TOP)へ


(2)サンプル(見出しの作成:余白もプラス)

<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>

サンプルプレビュー:

こんにちは

 

 枠線の応用で見出しを作る(応用)

解説:上記の見出しにさらに、余白の設定を加えることで見やすい見出しをつくることができる

目次(TOP)へ


(3)サンプル(見出しの作成:余白+文字色、サイズ、太さを追加) 

<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>

サンプルプレビュー:

こんにちは

 

枠線の応用で見出しを作る(応用)

解説:上記の見出しにさらに、文字サイズ、文字色、そして強調の設定を入れることで、見出しをさらに強調することができます。

目次(TOP)へ


  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>

上記を使ってできたサンプルが下

 

K-concpt
名古屋市西区円明町96
アクセス
サービス内容
お客様の声
お問い合わせメールはこちら
お問い合わせフォームはこちら
お問い合わせ電話はこちら(TEL 000-000-0000)

 

目次(TOP)へ