★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

見栄えの良い見出し

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 初心者用の講座
 
 
 
 
 
 
  トップページ > ホームページ作成で使えるテクニック
 

分かりやすくて 見栄えの良い「見出し」を作成する方法

分かりやすくて 見栄えの良い「見出し」を作成する方法をお伝えします。

まず、ホームページに訪れる人は、ホームページ上の文章を、すべて読むわけではありません。 最初に「見出し」を見て、その見出しに興味があれば(探している内容であれば)、その見出しの中の文章を、人は読みます。

つまり、ホームページでは、見出しがとても大切ということです。

ホームページでは、「見出し」がとても重要。分かりやすくて、見栄えの良い見出しを作ることで、人はホームページの文章を読んでくれる


そこで、ここでは、分かりやすくて見栄えの良い「見出し」を作成する方法をお伝えします。 これは、SEO対策(検索エンジン対策)という意味でも重要になるので、ぜひ参考にしてくださいね!




1.大きな文字の「見出し」を作成する方法

 

大きな文字の「見出し」を作成する方法は、下記のソースを使用します。
なお、ここでは例として、<h2>タグを使った見出しの作り方をお伝えします。



大きな文字の「見出し」の記述例

<h2 style="color:navy; font-size:25px; line-height:200%;">動画で覚える無料ホームページ制作講座</h2>

ホームページ上の表示

動画で覚える無料ホームページ制作講座


文字を赤色に変更したい場合は、color:red; と変更することで、文字が赤色になります。 また、文字の大きさを変更したい場合は、font-size:15px; などに変更することで、文字の大きさを変更することができます。

また、line-height では、文字の前後の幅を設定できますよ。


そして、もし、ホームページ上のすべての<h2>タグの表示を、大きな文字の「見出し」で統一したい場合は、スタイルシートのファイル(style.cssファイル)の<h2>タグの個所を、下記のように書き換えます。



スタイルシートの記述例

h2 { color:navy; font-size:25px; line-height:200%; }

これで、ホームページ上のすべての<h2>タグの表示が、大きな文字の「見出し」に統一されます。

文字の色や大きさを変更するときは、スタイルシートのファイル(style.cssファイル)を変更するだけで、全ページに反映されるため、スタイルシートのファイルに記述することが、一般的な方法になりますよ。




2.下線がある「見出し」を作成する方法

 

下線がある「見出し」を作成する方法は、下記のソースを使用します。
なお、ここでは例として、<h2>タグを使った見出しの作り方をお伝えします。



下線がある「見出し」の記述例

<h2 style="color:red; font-size:20px; border-bottom:1px solid #aa0000; line-height:150%;">動画で覚える無料ホームページ制作講座</h2>

ホームページ上の表示

動画で覚える無料ホームページ制作講座


文字を青色に変更したい場合は、color:blue; と変更することで、文字が青色になります。 また、border-bottom で、下線の太さと色を変更することができます。

また、文字の大きさを変更したい場合は、font-size:15px; などに変更することで、文字の大きさを変更することができますし、line-height では、文字の前後の幅を設定できます。


そして、もし、ホームページ上のすべての<h2>タグの表示を、下線がある「見出し」で統一したい場合は、スタイルシートのファイル(style.cssファイル)の<h2>タグの個所を、下記のように書き換えます。



スタイルシートの記述例

h2 { color:red; font-size:20px; border-bottom:1px solid #aa0000; line-height:150%; }

これで、ホームページ上のすべての<h2>タグの表示が、下線がある「見出し」に統一されます。

文字の色や大きさを変更するときは、スタイルシートのファイル(style.cssファイル)を変更するだけで、全ページに反映されるため、スタイルシートのファイルに記述することが、一般的な方法になりますよ。




3.帯がある「見出し」を作成する方法

 

帯がある「見出し」を作成する方法は、下記のソースを使用します。
なお、ここでは例として、<h2>タグを使った見出しの作り方をお伝えします。



帯がある「見出し」の記述例

<h2 style="color:red; font-size:20px; padding-left:7px; line-height:200%; background-color:#ffe5e5; border-top:red 1px solid; border-bottom:red 1px solid;">動画で覚える無料ホームページ制作講座</h2>

ホームページ上の表示

動画で覚える無料ホームページ制作講座


文字を青色に変更したい場合は、color:blue; と変更することで、文字が青色になります。 また、background-color は背景色、border-topborder-bottom は、上下の線の太さと色を指定しています。

また、文字の大きさを変更したい場合は、font-size:15px; などに変更することで、文字の大きさを変更することができますし、line-height では、文字の前後の幅を設定できます。


そして、もし、ホームページ上のすべての<h2>タグの表示を、帯がある「見出し」で統一したい場合は、スタイルシートのファイル(style.cssファイル)の<h2>タグの個所を、下記のように書き換えます。



スタイルシートの記述例

h2 { color:red; font-size:20px; padding-left:7px; line-height:200%; background-color:#ffe5e5; border-top:red 1px solid; border-bottom:red 1px solid; }

これで、ホームページ上のすべての<h2>タグの表示が、帯がある「見出し」に統一されます。

文字の色や大きさを変更するときは、スタイルシートのファイル(style.cssファイル)を変更するだけで、全ページに反映されるため、スタイルシートのファイルに記述することが、一般的な方法になりますよ。




4.左側に縦線がある「見出し」を作成する方法

 

左側に縦線がある「見出し」を作成する方法は、下記のソースを使用します。
なお、ここでは例として、<h2>タグを使った見出しの作り方をお伝えします。



左側に縦線がある「見出し」の記述例

<h2 style="color:black; font-size:20px; border-left:#2294dd 8px solid; padding:15px;">動画で覚える無料ホームページ制作講座</h2>

ホームページ上の表示

動画で覚える無料ホームページ制作講座


文字を赤色に変更したい場合は、color:red; と変更することで、文字が赤色になります。 また、文字の大きさを変更したい場合は、font-size:15px; などに変更することで、文字の大きさを変更することができます。

また、border-left では、左側の縦線の色と太さを指定していますし、padding では、周りの余白を設定しています。


そして、もし、ホームページ上のすべての<h2>タグの表示を、左側に縦線がある「見出し」で統一したい場合は、スタイルシートのファイル(style.cssファイル)の<h2>タグの個所を、下記のように書き換えます。



スタイルシートの記述例

h2 { color:black; font-size:20px; border-left:#2294dd 8px solid; padding:15px; }

これで、ホームページ上のすべての<h2>タグの表示が、左側に縦線がある「見出し」に統一されます。

文字の色や大きさを変更するときは、スタイルシートのファイル(style.cssファイル)を変更するだけで、全ページに反映されるため、スタイルシートのファイルに記述することが、一般的な方法になりますよ。



 

「見出し」についてのまとめ

 

「見出し」は、文字を大きめにして、見やすい色使いにするようにしましょう。

この辺りの知識があれば、画像を使う必要もなく、思いどおりの見出しを自由に作ることができるので、ぜひ参考にしてくださいね。




【よく読まれている関連記事】


【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ!

当サイトで使用しているサンプルサイトの無料ダウンロードはこちら!



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

インターネットを使ったサイドビジネス(副業)で、自宅にいながら、空いている時間で、月20万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう!

副業で自宅にいながら、収入を得るための講座はこちら!



 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
ホームページのメリット
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページを作る前に
 
ホームページを作った後
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
メールマガジン
 無料ホームページ作り方 メールマガジンの登録
 
リンク集
 無料ホームページ作り方 当サイトへのリンク
 無料ホームページ作り方 役立つホームページ
 無料ホームページ作り方 家を購入した体験談
 無料ホームページ作り方 FX資産運用ブログ
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
Twitter でシェアする
 
このページの内容が分かりやすいと思ったら、今すぐ Twitter でシェアしよう!
 
 
 
Facebook でシェアする
 
このサイトの内容が分かりやすいと思ったら、今すぐ Facebook でシェアしよう!
 
 
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^