スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.14 タグ+スタイルでテキスト操作 その1 配置と文字の大きさなど

 ブログでは、すでに記事本文のスタイルが、カスタムテンプレートでは etbody 最近のテンプレートでは entry-body としてテンプレートのCSS内で定義されています。
 定義されているものとは違った形でテキストを表示するためには、対象となるテキストを適当なタグで囲って、その開始タグにスタイルを記述することで実現します。タグとスタイルとの関係は、画像のところで説明したとおりです。さきに説明いたしましたh1からh6までのタグは、テンプレートの中でスタイルがすでに記述されている特殊なものの例です。


従来のcenterタグで記述すれば、

<center>センタータグで中央に配置しています</center>

センタータグで中央に配置しています


これをdivタグで実現します。

<div style="text-align : center;">中央に配置するようにスタイルで記述しています</div>
中央に配置するようにスタイルで記述しています


 最近のXHTMLの規格では、centerタグは推奨されておらず、text-alignスタイルで記述するとされていますが、センタータグは簡単なので、私の最新の記述につとめるというポリシーに反するのですが、よく使ってしまいます。

 pタグとdivタグは、同じような結果が得られますが、pタグのほうは、h1タグ同様、テンプレートのようなスタイルシートですでに段落前、段落後の改行幅等が定義されていますので、段落の前後がすこし空きます。しかしDIVタグはなにも事前にスタイルが定義されていませんので、改行と同じ幅です。実用上では、pタグは、テキストの流れのなかで、段落をはっきり分かるように記述するときに使って、divタグは、ワードのテキストボックスのように、自由にレイアウトするような用途で使うと私は思っていますが、あくまで私の便宜上の区別かもしれません。
 しかしpタグでもスタイルを指定してできるのですが、Gooブログの編集画面はpタグのスタイル適用を投稿時に削除してしまいます。
 ブログでは、私はdivタグを使います。とくに、絶対配置や、左右のフロート配置ではDIVタグを使用します。

 ここでDIVタグの応用です。
 
 文字のサイズが20ピクセルで、改行幅が180%、文字の色が赤で太字、テキストの配置は右つけ、ボックスの大きさが横500ピクセル、背景色が#aaddff としたときのスタイルの記述です。

 わかりやすいようにまず縦にスタイルを並べます。

font-size : 20px; //文字のサイズが20ピクセル
line-height : 180%; //改行幅が180%
color : red; //文字の色が赤
font-weight : bold; //太字
text-align : right; //テキストの配置は右つけ
width : 500px; //領域の幅を500ピクセルに
background-color : #aaddff; //背景色が#aaddff
padding : 10px; //領域との余白を10ピクセルとる

となるのを、タグ内のスタイル記述では(インラインスタイルと言います)
style="font-size : 20px; line-height : 180%; color : red; font-weight : bold; text-align : right; width : 500px; background-color : #aaddff;"

ソースは以下のようになります
<div style="font-size : 20px; line-height : 180%; color : red; font-weight : bold; text-align : right; width : 500px; background-color : #aaddff; padding : 10px;" >雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲモチ
慾ハナク
決シテ瞋ラズ
イツモシヅカニワラツテヰル
一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジヨウニ入レズニ
ヨクミキキシワカリ
ソシテワスレズ
</div>

雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲモチ
慾ハナク
決シテ瞋ラズ
イツモシヅカニワラツテヰル
一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジヨウニ入レズニ
ヨクミキキシワカリ
ソシテワスレズ

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。