HTML5で、文章に枠を付ける方法

HTML5とはHTML5とは、HTMLの最新版です。

 

ブログやサイトというのは、HTMLと

CSSで作成されているのですが、

 

2008年に、最新版として草案が出されました。

 

HTML5は、前作のHTML4より、高機能になっているため、

現在のブログやサイトなど、またWPなどのテンプレートは

HTML5で作成されています。

 

 

通常、アフィリエイターは、HTMLをすべて覚える必要がないのですが、

知っていると便利なものもあるんで、HTML5の簡単な説明と、

今回は、HTML5で、記事に枠を付ける方法を解説しますね。

 

HTML5の基本

 

このHTML5というのは、まだ勧告は出てなくて、今年2014年に出る

予定になっています。

 

ただ、現実は、先もいいましたように、ブログやサイトは、HTML5を使って

作成されています。

 

今後、HTML5が標準になっていきます。

 

それで、アフィリエイト初心者さん、ブログ初心者さんは、できれば、

HTML5を学んだ方がいいですね。(ただ、前のHTMLが

使えないってことはないです)

 

それに、アフィリエイトやネットビジネス等をブログなどでする場合に

おいては、ほんとに基本的なことだけわかっていればいいです。

 

例えば、文字のフォントを変えたい、文字の大きさ、色を変えたい、

テーブル(表)を作りたい等ですね、そのあたりは、知っておいた

ほうがいいですね。

 

もし、基本的なものを学びたいのであれば、googleで「HTML5 入門」とか

「HTML5 基本」などと検索して、わかりやすいものを探してください。

 

また、ほんとに基本的なものは、「HTML 入門」などでも勉強できます。

オススメサイトはこちら

 

 

● HTML5の特徴とは

いろいろあるのですが、特にですね、構造化タグと動画編集タグが

追加されたことですね。

 

ヘッダー、フッター、記事部分がはっきりと区別されるようになったこと。

動画関連ですね、audio   video    canvas  タグの追加ってところです。

 

特徴は、こんなところです。

 

また、スマートフォンなどのサイト、ブログの構造もHTML5でできています。

これから、スマホユーザーが増えて、あなたのブログをみにくる人も増えて

きますから、HTML5の基本は、知っておいた方がいいです。

 

ただですね、ブラウザによってHTML5に対応してないものもあり、

うまく表示されないなんてこともあるようです。

 

早く、標準化してほしいですね。

 

 

文章を枠で囲む方法

 

下記は、基本形ですね、これにいろんなタグを追加することによって、

文章を目立たせることができますので、最後までお付き合いください。

 

<div style=”border-style: solid; border-width: 1px;”>文章を枠で囲む</div>

この上のタグをコピペして、あなたのブログ(テキストモード)に貼りつけてください。

すると、下記のようになると思います。(このタグが基本となります)

文章を枠で囲む

 

っで、「今回の目標」は、下記のようにすることです。

● 枠はレッドで枠の四隅を丸くする。
● 背景は、うすいオレンジ。
● 文字の色は、グリーンになっています。

 

このようにすることで、あなたの記事を、きれいにまとめあげることができます。

 

ただ、このようなことは、LUREAについてくるリファイン、

HTMLサイト作成ツールSIRIUSやAXISなどでは、

コード表を入れるだけ、SIRIUSやAXISなどは、クリックするだけで

できてしまいますが。(この賢威にはついてないですね(ー_ー)!!)

 

 

<div style=”border-style: solid; border-width: 1px;”>文章を枠で囲む</div>

最初にもどりまして、各、HTMLの機能を解説しますね。

div  は、/div までの要素や文章を1つの範囲として定義する時に使います。

 

style=style=”border-style: solid; border-width: 1px;”   は、線の種類実線、

点線、破線、二重線、線なしで、線の太さは、1px にするためのタグです。

 

ちなみに、solid は実線、dottedは点線、dashedは破線、doubleは二重線、

noneは、線が無し となります。

 

 

さあ、いろんなものを飛ばして、一気にいっちゃいますね。

下記が今回の目標、

「文章を枠で囲み、枠の四方を丸くするタグ」です。

コピペしてみてください。(文章が改行されないようでしたら<br>で改行を)

 

<div style=”border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: bisque; border-radius: 10px;”>● 枠はレッドで枠の四隅を丸くする。
● 背景は、うすいオレンジ。
● 文字の色は、グリーンになっています。</div>

 

上の、タグの説明をしますね。

div   は、いいですね。

style=”border-style: solid; border-width: 1px もいいですね。

 

padding: 10px 5px 10px 20px  これはですね、枠と文章の距離を意味しています。

上、右、下、左に対応しています。 これをパディングと読みます。

上が10px 下も10pxになっていますから、枠の上下中央に文章が

表示されます。

左右の関係がはっきりわからないんです。(すいません、数値を変えてどうなるか

やってみてください)

 

border-color: red は、線の色を赤にします。

color: green  は、文章の文字のグリーン色です。

background-color: bisque は、枠内の背景色を薄いオレンジ色に。

border-radius: 10px  は、枠を10pxで丸くします。

 

色の指定は、下記のサイトがオススメです。(英文字をコピペしてください)

カラーネームはこちらを参考に

 

 

はい、ご苦労様です。

枠(BOX)は、うまくできましたか。

この枠をうまく利用することで、あなたの記事の訴求効果が上がりますよ(^_^)v

 

PS

僕は、このタグをコピペして使っています。

あなたも、このタグをメモ帳や、ワードプレスの固定記事に下書きとして保存して

使ってみてはどうでしょうか。(ワードプレスの場合、テキストモードにコピペ)

 

 

 

まえむき

 

管理人まえむきに質問があれば、下記からどうぞ (^_^)v もちろん無料です.

アフィリエイト初心者さん、大歓迎!!

メルマガ登録などもしませんから、安心してお問い合わせくださいね^^

管理人まえむきへのお問い合わせ、お気軽にどうぞ

 

 

 

 

関連記事:

One Response to “HTML5で、文章に枠を付ける方法”

  1. 青春野郎 より:

    こんばんは、青春野郎です。

    たしかにテンプレートによってはコードを直接挿入しなくても簡単に設置できるものもありますが、これらは基本知識としておさえておきたいですよね^^

    改めて勉強させて頂きました!

    fc2ランキングの応援ポチをさせて頂きました!

    【24時間耐久コメント回り選手権開催中!】

    現在、24時間耐久でコメント回りをするという無茶なことをやっています。(笑)
    一生懸命コツコツとやっているので応援コメントを頂けるとスゴく喜びます!

    訪問させて頂いてありがとうございました。

コメントを残す

CAPTCHA


サブコンテンツ

このページの先頭へ