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

divタグの活用事例

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 作成ソフトの選び方 作成ソフトの比較 ネットで収入
 
 
 はじめに
当サイトは、ホームページの作り方を覚える
ことができる動画を無料で公開しています。
動画でホームページの作り方が分かります。
 
最近の注目コンテンツ
無料ホームページ作成 HPを作る前に知っておきたいこと
無料ホームページ作成 初心者のためのホームページ基礎講座
無料ホームページ作成 良いレンタルサーバの選び方と比較!
 
用語集とタグの書き方
無料ホームページ作成 基本になる HTMLタグの書き方
無料ホームページ作成 ホームページ作成でよく使う用語集
無料ホームページ作成 サンプルサイトをダウンロード!
 
 
 
  ホーム > HTMLタグの書き方 > iframe タグ >> div タグの書き方 >> span タグ
 

<div> タグの書き方

<div> タグは、とても万能なタグで、<div> タグで囲った箇所に、いろいろな効果を与えることができるタグ です。 たとえば、下記のように、文章全体を <div> タグで囲むことで、文章全体を右寄りにすることができます。


 

<div> タグを使って、文章全体を右寄りにする記述例

 
<div align="right">
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
</div>

ホームページ上の表示

 
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

 

<div> タグで囲った箇所には、 いろいろな効果を与えること ができて、 たとえば、<div> タグの後ろに、align="right" と記述することで、上記のように、文章全体を右寄りにすることもできます。


そして、この<div> タグの便利なところは、なんと言っても、
「スタイルシートを使えること」 です!

たとえば、下記のように記述することで、上下左右に、空白を入れることができます。


 

<div> タグを使って、上下左右に空白を入れる記述例

 
<div style="padding:20px">
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
ホームページに掲載する文章<br>
</div>

ホームページ上の表示

 
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

 

上記のように、上下左右に、空白が入っていますよね?

<div> タグの後ろに、 style="padding:20px" と記述することで、全体的な間隔を設定することができて、上下左右に空白を入れることができます。


ちなみに、この style というのが、 「スタイルシート」 の記述で、 <div> タグの後ろに、この style を記述することで、いろいろなことができるようになります。

たとえば、下記のように記述することで、 細かい空白を入れること ができます。


 

<div> タグを使って、細かい空白を入れる記述例

 
ホームページに掲載する文章<br>
<div style="line-height:50%;">&nbsp;</div>
ホームページに掲載する文章<br>

ホームページ上の表示

 
ホームページに掲載する文章
 
ホームページに掲載する文章

 

上記のように、文章と文章の間に、細かい空白が入っていますよね?

<div> タグの後ろに、 style="line-height:50%;" というスタイルシートの記述を入れることで、 このような、 細かい空白 も入れることができるのです!!

(ちなみに、&nbsp; という記述は、「全角空白」という意味です。全角空白をスタイルシートを使って、高さを調整することで、細かい空白を設定している、、、ということですね)



この<div> タグについては、いろいろなことができてしまうので、逆に、分かりづらいとは思います。。。 しかし、 この<div> タグは、ホームページを作る上で、絶対に欠かせないタグ です。

特に、上記の 「細かい空白」 は、僕は、ホームページ作成で、ものすごく使っています。 ホームページは、空白の使い方がとても重要になるので、このような細かい空白を使えないと、良いホームページが作れないからです。


<div> タグは、いろいろなことができるため、分かりづらいと思いますが、このページでお伝えしていることだけをマスターすれば、 まずは十分だと思います。

あとは、パーツテンプレート集 のページで、この<div> タグを使ったパーツをたくさん掲載していますので、 実際に使ってみて、表示などを確認してみてください。 実際にやってみると、どのように表示されるのかが分かりますし、 「本当に便利だ!!」 ということも、分かると思いますよ。


 

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

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

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

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

また、仕事ができるようになるノウハウや、 「最高の成長法」 などもお伝えしています。
 
 
メールマガジン
  メールマガジンの登録
 
リンク集
  当サイトへのリンク
  役立つホームページ
  お客様のホームページ
 
広告
 
- ホームページ作成サービス
 
- 無料スマホサイト作成講座
 
- 動画の無料FX講座
 
 
会社概要
 
- 特定商取引に基づく表記
 
- 個人情報保護ポリシー
 
- お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状
 
当サイトは、NPO法人 「起業とキャリア支援センター」 様からの推薦を受けて、運営しています。
 
当サイトの情報およびデータの無断流用は固く禁止しています
 
 
Copyright © 無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト