前回までの内容はこちらを。

文字の装飾方法の残りを...

まずは、前回の文字装飾の続きで、その他使用可能な文字装飾を記載しておきます。

例1(HTML)

例1(結果)

太字 です。
強調 です。...太字と同じですね。
下線 です。
取り消し線 です。
上付き です。
下付き です。
太字で下線付 です。

※ブラウザによっては、期待された表示ができない場合があるようですので、ご注意ください。

テーブル(表)の作り方

あと、このサイトで有用そうなものとして、テーブル(表)がありますので、紹介しておきます。

テーブルは、table タグを使用します。少し複雑なので、ここでも少しずつ説明していきます。
※ブラウザによっては、線が表示できない場合があるようですので、ご注意ください。

1. table タグを書きます。

まずは style タグを書きます。
style タグの中で、この後に作るテーブルの枠線を定義しています。例えば、"border: 1px #000000 solid;" と書いてあるところでは、線の太さや色を設定していますが...ここでは何も考えずにコピーしてもらったほうが無難です(^^;;
次に table タグを書きます。table タブのみを書いてもテーブルの中の要素が無いため何も表示されませんが、この状態から table の中に要素を追加していくと、外枠と内枠の線が自動で引かれます。

例1(HTML)

※以降、style タグの内容に変更はありません。

例1(結果)

2. セルを1つ書きます。

table タグの中に、tr タグと td タグを使って、テーブルの要素となるセルを書いていきます。
tr タグはテーブルの1行を、td タグは1つのセルを表します。
書き方としては、tr 開始タグと tr 終了タグの間に td 開始タグと td 終了タグを入れ子にし、さらに td タグの中に文字列を書きます。

例2(HTML)

例2(結果)

3. 横にセルを追加します。

td タグを追加します。

例3-1(HTML)

例3-1(結果)

次の例に行く前に、 tr 開始タグ~tr 終了タグの間を以下のように1行にまとめます。
以下のように変更しても、表示する内容に変化はありません。

例3-2(HTML)

4. 1行追加します。

tr タグで囲まれた1行を追加します。

例4(HTML)

例4(結果)

5. セルに色を付けます。

tr タグの bgcolor に色を設定すると、その行全体に背景色が設定されます。
同様に、td タグの bgcolor に色を設定すると、1つのセルのみに背景色が設定されます。

例5(HTML)

例5(結果)

6. セルを結合します。

上記 3. の例から、セルの結合をしてみます。
td タグの colspan および rowspan に値を設定することで、セルの結合ができます。

例6(HTML)

例6(結果)

7. 文字の配置を変更します。

■の配置を中央に変更します。
td タグの align に center を指定すると、セルの中央に■が表示されます。
同様に、left や right を指定することも可能です。

例7(HTML)

例7(結果)

こんな感じでテーブルを作っていきます。

応用例...

応用例ということで、昔エジプトに行った時の出来事などをざっくり書いてみました。
だらだらと長文を書くよりも、テーブルにすると判りやすくなることもあります。

応用例(HTML)

応用例(結果)

日程 出来事 食事 宿泊地
1日目エジプトへ移動(*^^*) --飛行機
2日目夜行列車に乗る。ノスタルジーな気分(^^; -夜行列車
3日目ナイル沿いのプールで泳ぐ。バカンスな気分(^-^) アスワン
4日目車で1,000km移動しながら観光。しんどい(T-T) -ルクソール
5日目気球に乗る。超絶景( ̄▽ ̄) カイロ
6日目ピラミッドの中に入る。暑苦しい(^^;;; --カイロ
7日目ドバイ経由で日本へ(-_-)zzz --飛行機
8日目到着(疲) -

「光と影のグラフ」での HTML の使い方の説明は、とりあえず以上になります。
ちなみに、他にもボタン、リンク、フレーム、フォーム等の機能がありますが、このサイト独自の方法で同じことが簡単に実現できたり、表示しても意味の無いものばかりなので、ここでは説明しません。

もちろん、これまで説明しました HTML は使わなくても写真の投稿は可能です。
サイトページの装飾がメインであるため、使わなくても全く問題はありません...(^^;;

終わり。

This article is a sponsored article by
''.