Let's have a hobby!

多趣味な管理人が綴る雑記趣味ブログ   ~趣味を持とう!~

テンプレート
え?趣味が多い?そんなの関係な~い!人生、楽しく送らなきゃ。
せっかく与えられた 「人生」という名の時間 を自分の思うままに使って何が悪い!

~Enjoy your life!~


貴方は、 人目くらいの訪問者です。

【はてブロ限定!】すぐに役立つHTML 簡単&便利編

前回の記事はコチラ↓

www.kasyainu.com


 

前回の基本編では、「見たまま編集」の簡単なお話をしました。

今回は、前書き編」「基本編」「簡単&便利編」「できれば使いたい編」「使わない?編の3つ目となります。

 

様々な場面で使えるHTMLを厳選!

HTMLの簡単かつ実用的な事中心でお送りします。

「中央揃え、左寄せ、右寄せ」「線」「表の作成」「ページ内リンク」の4本立てです。

ブログやるんだったら、これぐらいは覚えておきたいですかね。

 

中央揃え、左寄せ、右寄せ

文字でも画像でも何にでも使える基本技です。

 

中央揃え

Web上での見え方HTML

 

バランスよくする中央揃え

 

 

<div align="center">バランスよくする中央揃え</div>

 

これは、汎用性がありそうですね!いろんな場面で使えそう…

ですが、ブログだとあまり使わないかな…(^^;)

ホームページでよく使います。

 

左寄せ

Web上での見え方HTML

 

使い道が疑問な左寄せ

 

 

<div align="left">使い道が疑問な左寄せ</div>

 

横書きの場合は、何もしなくてもこの状態。

3つの中では、一番使わないですね。

 

右寄せ

Web上での見え方HTML

 

以外と便利な右寄せ

 

 

<div align="right">以外と便利な右寄せ</div>

 

これは、以外と便利です。画像の説明書きによく使います。

 

使用例

Web上での見え方HTML

 

とっても可愛い猫の写真

こっちを見つめる可愛いヤツ

こっちを見つめる可愛いヤツ

 

 <p align="center">

とっても可愛い猫の写真</p>

<p><img scr="//cdn-ak.f.st-hatena.com/images/fotolife/r/regitimate/20160615/20160615214541.jpg" alt="可愛い猫"></p>

<p align="right"><span style="font-size: 80%;">

こっちを見つめる可愛いヤツ</span></p>

HTMLに省略の変更を加えています。

あれ?分かった人は鋭いですねぇ...

さっき紹介したのと、ちょっと違いますdivがないじゃないですか!

実は、divというのは、ただ範囲を指定するだけのものです。

よって、指定したい範囲が段落タグと重なっている場合は、divを書かず、その段落タグの中に入れることができます。

段落の一部だったり、複数の段落に股がったりする場合は「<div □□="○○">本文</div>」を使いましょう。

先程も書いたように、divはただ範囲を指定するだけのものです。汎用性が高いので、是非覚えておきましょう。

 

因みに、<span>とか知らないものが出てきていますが、右寄せと同時に文字サイズを小さくした結果です。これは、「見たまま編集」で文字サイズ小にしただけです。

 

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

  • 作者: 赤間公太郎,大屋慶太,服部雄樹
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 
わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

 

 

基本の使い方

文字通り「線」を入れます。

Web上での見え方HTML

 


 

 

<hr />

 

コレが、基本の形。シンプルでしょ?

さらに追加情報を書いていきます。

 

Web上での見え方HTML

 


 

 

<hr size="10px" width="70%" />

 

  1. 「size="〇〇"」
    高さを指定します。数値は「px(省略可)」でも「%」でもOK。
    指定しない場合は「2」になります。
  2. 「width="〇〇"」
    横幅を指定します。数値は「px(省略可)」でも「%」でもOK。
    指定しない場合は「100%」になります。

工夫次第で、縦長の線にすることも可能ですね。

 

色々な装飾

中央寄せ、左寄せ、右寄せ
Web上での見え方HTML

 


 

 

<hr align="right" width="50%" />

 

上でやった中央揃え、左寄せ、右寄せも使えます。

  1. 「align="center"」アライン属性
    線を中央に持ってきます。何もしなくても変わりません。
  2. 「align="left"」アライン属性
    線を左に寄せます。
  3. 「align="right"」アライン属性
    線を右に寄せます。
影を無くす
Web上での見え方HTML

 


 

 

<hr noshade />

 

こんな感じで、影を無くすこともできます。

 

表の作成

HTMLでは「テーブル」と言います。テーブルの中の一つの枠を「セル」と言います。

テーブルタグは、HTMLの中で一番大切な存在

「テーブルタグを制する者はWebを制する」です!

でも、今日は触りだけにしておきます(/・ω・)/

 

基本的な使い方

Web上での見え方HTML意味

 

ココが枠内です。

 

 

<table border="">

<tbody>

<tr>

<td>

ココが枠内です。

</td>

</tr>

</tbody>

</table>

 

 

テーブル開始

内容開始

1段目開始

1行目開始

ココが枠内です。

1行目終了

1段目終了

内容終了

テーブル終了

 

なんか、元々テーブルを使って説明しているので、ちょいとややこしくなっちゃっていますが...(笑)

コレを基本にして表を作ります。

  1. 「<table border="〇〇">」テーブルタグ
    ここで、テーブルを始める合図。さらに「〇〇」で全体を囲む枠の太さを指定します。はてなのHTMLだと、無指定の状態で自動生成されてしまいますが、無指定の場合は「1」になります。
  2. 「<tr>~</tr>」行タグ
    この間にあるのを1段とします。複数おいていくとが増えます。
  3. 「<td>~</td>」セルタグ
    <tr>~</tr>の中に入れます。コレを複数おいていくとセルが増えて行きます。

<tbody>は、テーブル内の内容を表し、この上に付く<thead>、下に付く<tfoot>などがあります。

<therad>→<tbody>→<tfoot>の順書くようにするのですが、前後を省略して書きました。テーブル(table)のイニシャル「t」が付いている訳ですね。

使い分けがややこしく(っというか、使わなくても普通にできる)ので説明は割愛します。

 

3×2のテーブルを作って見るとこうなります。

Web上での見え方HTML

 

1-1 1-2 1-3
2-1 2-2 2-3

 

 

<table border="">

<tbody>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</tbody>

</table>

 

HTMLは、長いですが、おんなじことを繰り返しているだけです。

どんどん増やしていって、表を作っていくわけです。

これで、構造は分かったかな?

 

何も、細かいことを指定しないと、このように最小限の枠が出来上がります。

しゃあ、様にするにはどうしたらいいのか?

色々付け加えてそれらしくしていくんですよ!

 

その色々をいくつかご紹介します。代表的なものを厳選しました。

これくらい知っておけば、大分使いこなせます!

 色々な装飾

表の大きさ
Web上での見え方HTML

 

1-1 1-2 1-3
2-1 2-2 2-3

 

 

<table border="" width="100%">

<tbody>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</tbody>

</table>

 

指定しないとギリギリまで詰められた表になってしまいます。

  1. 「width="〇〇"」ワイズ属性
    横幅を指定します。数値は「px(省略可)」でも「%」でも構いません。

 

テキスト位置
Web上での見え方HTML

 

1-1

1-2 

1-3 

2-1

2-2 2-3

 

 

<table border="" width="100%">

<tbody>

<tr>

<td align="left">1-1</td>

<td align="center">1-2</td>

<td align="right">1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</tbody>

</table>

 

文字の場所指定ができます。

  1. 「align="left"」アライン属性
    セル内の文字を左に寄せます。何もしなくても、変わりませんね。
  2. 「align="center"」アライン属性
    セル内の文字を中央に揃えます。一番使うかもです。
  3. 「align="right"」アライン属性
    セル内の文字を右に寄せます。

 

見出しセル
Web上での見え方HTML

 

1-11-21-3
2-1 2-2 2-3

 

 

<table border="" width="100%">

<tbody>

<tr>

<th>1-1</th>

<th>1-2</th>

<th>1-3</th>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</tbody>

</table>

 

見出しを作ることがができます。なにも、一番上のセルに限らず、どこだって指定することができます。

  1. 「<ht>~</ht>」見出しセルタグ
    ここのセルを見出しにします。

 

セルの結合
Web上での見え方HTML

 

1-1
2-1 2-2 2-3

 

 

<table border="" width="100%">

<tbody>

<tr>

<th colspan="3">1-1</th>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</tbody>

</table>

 

エクセルでよく使うヤツですね!何かと便利です。上記の見出しセルのとの組み合わせ技をしてみました。

  1. 「colspan="結合したいセル数"」コルスパン属性
    横のラインで、セルを結合できます。
  2. 「rowspan="結合したいセル数"」ロースパン属性
    縦のラインで、セルを結合できます。

 

ページ内リンク

皆さんも見たことがあるでしょう…

コレ↓をクリックしてみてください。

「表の作成」へ飛びます。

 

戻ってきましたか?(笑)

このような感じで、同じページ内でリンクすることができます。

Web上での見え方HTML

 

ココにジャンプします。

 

 

ココから飛びます。

 

 

<a name="abc"></a>ココにジャンプします。

 

 

<a href="#abc">ココから飛びます。</a>

 

  1. 「<a href="#〇〇">△△</a>」アンカー・エイチレフタグ
    △△をリンク元として飛びます。シャープ(#)を忘れないように!
    〇〇は、自分の好きな文字で大丈夫。同ページで複数使う場合にダブらないようにすればOK。
  2. 「<a name="〇〇"></a>」アンカー・ネームタグ
  3. ココがリンクの目的地。シャープ(#)はいりません!間違えないでほしいのは、<>同士の間に何もいれない事
    開始タグに終了タグを続けて書きます。

 ページの何処にだって飛べます。前の方に戻ることも、後の方に進む事も可能です。

いかりマーク

「見たまま編集」を見てみると、いかりマークの表示がされます。

これが表示されていれば、成功です。

 

まとめ

  • 「中央揃え、左寄せ、右寄せ」でデザインを発展!
  • 記事の境目には、「線」を入れよ!
  • 「テーブルタグ」を制する者は、Webを制する!
  • 同ページ内で読者を移動させたい→「ページ内リンク」!

 

次回は発展編

少し難しい(CSSが関わる)HTML「一部に背景を設定」「一部を囲う」「半角自動改行」の3つを見ていきます。

オマケで、超簡単な、目次の作り方も書いておきます!

 


次の記事はコチラ↓

www.kasyainu.com



Copyright (C) 2012-2017 Let's have a hobby! All Rights Reserved.