研Q5.文章を枠で囲む方法(HTML<div>タグのstyle属性で色、太さ、線種など自由自在に) - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q5.文章を枠で囲む方法(HTML<div>タグのstyle属性で色、太さ、線種など自由自在に)

ブログの文章の一部をいろいろな枠で囲むHTMLタグ。



たとえばこんなタイトルつきの枠囲いがあります。

 注記:たとえば「注記」のような、本文の流れとは別のことを書きたいときなど、タイトルつきの枠で囲っておけば、本文の流れを邪魔することなく必要なことを書くことができます。
ほかには追記:などを書くにも使いやすいスタイルです。


タイトルつきの枠をHTMLコードで表現するには、このように<filedset>タグを使います。

<fieldset><legend>タイトル</legend>枠の中の文章</fieldset>


このようなタイトルつき枠囲いは<fieldset>タグを使いますが、
一般的に装飾のために枠囲いをするときは<div>タグを使うのがもっとも使いやすいです。

<fieldset>タグでも枠囲いはできますが、<fieldset>にはフォーム要素をグループ化するという意味がよくわからない目的があります。
テンプレートのCSS(スタイルシート)で<fieldset>の表示方法が指定されている場合もあり、ねらい通りの枠線が表現できないということもあります。
(このブログで<fieldset>タグでやってみたら、枠線の色が想定通りになりませんでした。)

<div>タグを使って枠線で囲む基本

<div>タグを使って、このような枠囲いができます。

枠線で囲まれる本文

点線で文章を囲む

枠内の余白が 10px 5px 10px 20px

枠線の色を赤に設定

枠内の文字色を緑に設定

枠内の背景色をラベンダーに設定

枠の横幅を400pxに設定


HTML5/CSS3で新しく使えるようになったstyle属性


HTML5/CSS3では、新しく角丸影付き(ドロップシャドウ)などが使えるようになりました。

Internet Explorer 8 などの、HTML5/CSS3に対応していないブラウザでは表示することができませんが、表示されないのは角丸や影付きの部分だけで、ここまでの装飾はそのまま表示されます。

世界の半数の人にしか伝わらない装飾ですが、表示されない場合もあることをふまえた上で使ってみるのもおもしろいと思います。
枠の角を丸くする

IE8の方のために画像で表示しておきます。
HTML5/CSS3のブラウザではこう見えています。
枠の角を丸くするの画像



枠に影をつける(ドロップシャドウ)

画像
枠に影をつけるの画像

>>新ブログミナムラのまど2で続きを読む>





初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
グーグルリーダーに登録 Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ Vol.146.RSSってなんなの?
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾110posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

ヴィトン ヴェルニ

LV ルース PM プラスミーシャ

に加えて加えてカウントしない アイデアという 私はしないないに類似したなどの 女の子内の味 紳士、私は本当にない ネグレクト 我々はが好きですかファイナル 時間 凡例 と 珍しいでの第六 良い意味 レディースハンドバッグ 詰め合わせ。 LV Dishevelled AM がに最適です一日 OUT と外観をであっても良いでシスコ 'cisco "がない 間違いなく 単に別 女性 アスペクト<a href="http://www.xinanmy.com">louis vuitton バッグ</a>。

次 グラフィック、写真に表示されます 実際と真剣に見えるあるのようだ A モニタ​​ チャンス メーカーのうち A良い OC テレビ番組、が 私たちはすべての信じる QUIT できませんでした停戦正確正当; 以降の考慮が 実行 あなたの恋人弱いダイ 最後のシーズンを続ける、しかし ディスプレイ きた 短い この季節 多くの驚きがある。 この LV コーデュロイ バギー AM です 通常機能 旅行かばん 使用中にのんびり<a href="http://www.xinanmy.com">ヴィトン 価格</a> コーデュロイ キャンバス、すべて自然健康な牛革トリム減らす、カップル 表面 財布と 適応 財布、首 ストラップ得る。

2013-03-21 00:24 | from albertxeuj | Edit

No title

水村さま、こんにちは^^

アメブロから参りました。

昨日はコメントをいただきありがとうございました。

西川さん、amaneさんが話題にされていたので
遊びに来させていただきました。

そして、プロフィールを見てびっくり!!

誕生日が一緒の1月30日なんです☆
勝手に親近感覚えました。

また、伺いますのでよろしくお願いいたします。
(誕生の年は聞かないでくださいね 笑)


さコメントを入力ください

2013-08-03 12:42 | from 花梨と申します

>花梨さん

Re:こんにちは^^
花梨さん、こんにちは。

ブログは拝見しておりました。
枠の使い方、雰囲気があっておもしろいですね。

これからもよろしくお願いします。

2013-08-04 17:56 | from 水村亜里 | Edit

ありがとうございました

先日は、私のつたないブログをご覧頂き&コメントいただき
ありがとうございました。

ブログをはじめて間もなく、模索中でございますが…
こちらのように、ブログノウハウを丁寧に分かりやすく説明していただけるブログに助けられています。

この他にも、興味深い記事がたくさんあるみたいなので
色々と読んで活用していきたいと思いますi-185

2013-09-16 09:55 | from uchicoさん

>uchicoさん

Re:ありがとうございました
uchicoさん、コメントありがとうございます。 ≪返信fromミナムラ

つたないなんてそんなことないと思います。

僕もブログを始めたころは、ブログに書きたくて
いろんなものに興味を持って、今までよりもよく観察するようになり

テレビもお散歩も写真も、
生活全体が楽しくなったことを思い出しました。

2013-09-16 10:40 | from 水村亜里 | Edit

承認待ちコメント

このコメントは管理者の承認待ちです

2014-09-29 09:22 | from -

トラックバック

http://aminamura.blog.fc2.com/tb.php/5-b4e6d568

ブログの中で文章を囲む方法

他のサイトや文献から文章を引用する場合、引用した部分を囲って分かりやすくしておくのが礼儀となります。 その場合、タグを使うのが一般的な方法のようです。これを使えばstyle属性を指定することでさまざまな線を利用することができます。 例えば以下のタグをhtmlに記述してみます。 枠線で囲まれる本文 枠線で囲まれる本文   style属性で、線の種類、枠内の余白、枠線の色、枠内...

2013-11-23 00:15 | from おじさんブログ

研Q5.文章を枠で囲む方法(HTML&lt;div&gt;タグのstyle属性で色、太さ、線種など自由自在に)

ブログの文章の一部をいろいろな枠で囲むHTMLタグ。 photo:pic&#45;in&#45;pic&#45;in&#45;frame&#45;in&#45;frame&#45;in&#45;window by Problemkindたとえば↓こんなタイトルつきの枠囲いがあります。 注...

2013-05-18 13:09 | from あんなこと、そんなこと、どうでもいいこと・・・

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。