FC2ブログ
1012345678910111213141516171819202122232425262728293012

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

CSS事始め 6

float(回り込み)

「HTML 5」で記事に画像を埋め込みました。この画像に文字の回り込みをCSSのfloatプロパティで設定します。

<p>延元3年(1338)新田義貞が越前で亡くなり、三男の義宗が嫡嗣として扱われて越後に匿われました。<br>
義宗は、長じて越後・関東に於いて南朝方に与し足利尊氏に挑みます。一時は鎌倉の奪還を果たしますが、忽ち劣勢に追い込まれてしまいます。<br>
<img src="uri/css6__utsubushi.jpg" alt="白佐波神社本殿" style="float: left; width: 160px; height: 120px;" />正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。七千の兵を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。<br>
地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地を「うつぶしの森」と称して伝えてます。<br style="clear: left;" ></p>


回り込みをさせたい文字列(あるいはオブジェクト)の直前に<img>を置いて、style属性にfloatプロパティを追加します(行番号10)。floatのプロパティ値は、"left"、"right"、"none"の三つで、初期値はnoneです。ちなみに、noneはfloatを解除することではなく、floatしないという意味です。実際にnone値を明示的に使う場面は、ほとんど無いと思います。
floatを「回り込み」の設定と表現してきましたが、実はfloarの意味の通り、"画像(オブジェクト)"を左右どちらかに浮動させるプロパティなのです。結果として、後に続く文字列なりオブジェクトが回り込むということです。
floatプロパティの影響を排除、つまり「回り込み」を解除する属性値(CSSのプロパティ)が"claer"です。解除させたい要素の開始タグにstyle属性で設定します。claerのプロパティ値は、"none"、"left"、"right"、"both"の四つで、初期値はnoneです。
例題のように、回り込みの解除を必要とする要素が続かなければ"clear"をする必要はないのですが、多くのCSSの解説ではfloatは必ず解除しましょうとなっていますので、私も記事の最後に改行タグ<br>を付けて"clear"を設定しています(行番号11)。今まで、HTMLやCSSをできるだけシンプルにと主張に反するようですが、ブログなどでは想定外のオブジェクトがfloatの影響を受けてレイアウトが崩れることもありますので、無用と思われても"claer"しています。

スポンサーサイト
2014-05-31(土) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 5

画像を配置

テキスト(文字)だけだった記事に画像を配置しましょう。画像は、絵文字の一種と捉えると分かりやすいかと思います。配置する画像がある場所(フォルダー)と画像のファイル名を文章の任意の位置に記入して、ブラウザに表示してもらいます。

正平23年(1368)二代将軍足利義詮、初代鎌倉公方足利基氏の病死を機に、再び鎌倉奪還をと決起します。七千の兵を率いた義宗に、これを鎮圧せんと寄せ来る足利方上杉憲正將・能憲軍六万の兵が沼田の台地で激戦を繰りひろげます。義宗は、この戦いで右眼を矢で射ぬかれ、うつぶし(俯せ)に落馬して戦死。ここに新田氏は実質的に滅びました。
地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地を「うつぶしの森」と称して伝えてます。

白佐波神社本殿
「うつぶしの森」白佐波神社の画像を上の記事に配置します。場所は最後の行の"「うつぶしの森」…"の前です。

地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地
<img src="http:// URI /HTML5_utsubushi.jpg" alt="白佐波神社本殿" style="width: 160px; height: 120px;" />
を「うつぶしの森」と称して伝えてます。


タグは終了タグはありません。src(ソース)属性の値に画像データの保存先を、alt属性に画像が表示されなかった場合の代替文字を記入します。width、heightの値を指定しておくことで、画像が表示それなかった場合に、記事のレイアウトの崩れを防ぐことができます。
さて、行中に画像を配置したレイアウトはブラウザの表示幅によって位置が変わってしまいます。そこで画像は、多くの場合行間に配置されます。タグの前後に改行タグ
を入れてみます。

地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地<br>
<img src="http:// URI /HTML5_utsubushi.jpg" alt="白佐波神社本殿" style="width: 160px; height: 120px;" />
<br>を「うつぶしの森」と称して伝えてます。


文字列、画像、文字列と層を重ねたような、かつてはよく見られたレイアウトです。

2014-05-25(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 5

color(表示色)

CSSのプロパティcolorは、文字の色だと思われがちですが少し違います。また、CSSの所以たる"プロパティ値の継承"という性質もあります。
プロパティcolorは表示色と言い、その値は要素の内容に適用されます。CSS事始め 4のHTMLソースのp要素(行番号8)にcolorとborderの線種を以下のように指定してみます。(記事の文章は一部省略)

<h1 style="width: 400px; height: 60px; background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="color: #00c; border: solid; width: 400px; height: 240px; background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、…<br>
義宗は、長じて越後・関東に於いて南朝方に与し…<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


colorの初期値は"黒"ですので、指定をしてない要素h1の文字色はになってます。要素pは、colorに値"#00c"(青色)を指定しましたので文字が青色です。要素pの子要素spanにはcolorを指定してないのに、黒ではなく青色になってます。また、要素pにはborderにプロパティ値"solid"のみの指定で文字と同色の枠線が表示されましたが、子要素spanには枠線が表示されていません。
そこで、要素spanにも同じように線種を指定してみます(行番号10)。

正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="border: solid; width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


インライン要素のspanにも枠線が表示されましたね。線の色は、親要素pで指定した"青色"です。colorのプロパティ値は指定した要素(この場合p)が内包している要素(span)にも引き継がれてます。colorは、継承されるプロパティなのです。線の色の初期値は、color値です。しかし、borderのプロパティ値solid(線の形状)は継承されません。同様に、プロパティborder-color(線色)も継承されません。なお、pとspanの線の太さがが同じなのは継承されのではなくて、指定をしてないので初期値medium(3px)が適用されてるからです。
ちょっとややこしいですが、線を表示するためには、"太さ(border-width)・色(border-color)・形状(border-style)"のプロパティ値が必要です。それぞれの初期値は、"太さ:medium・色:color・形状:none"です。形状(border-style)を指定すれば、表示色(color)で太さ3pxの線が引かれるわけです。これらは、継承されません。子要素spanの線色が親要素と同じなのは、border-colorが初期値であるcolor(表示色)なので、親要素pのcolorプロパティの値#00cを継承したからです。
CSSプロパティの初期値と継承性を効率よく利用してスリムなCSS設定をすれば、HTML書類が読みやすくなり、ブラウザの処理速度も上がります。

2014-05-06(火) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 4

background-color(背景色)

地の色を"背景色"と言い、CSSのプロパティbackground-colorで要素ごとに設定します。背景色に対して文字や線などの色を"表示色"と言います。プロパティは、foreground-colorと予測してしまいそうですがハズレです。colorなのですが、少しややこしい事情がありますので背景色を先に取り上げます。
背景色を指定しなければbackground-color値(初期値)は"transparent"、透明になります。白のような印象を持ってしまいそうですが、それは多くのブラウザが地の色を白にしているからでしょう。背景色は要素全体に施されますので、CSSのボックスモデルとHTMLのブロック要素、インライン要素の違いも見ていきましょう。
bodyの幅を固定して、h1、p要素の背景に黄、span要素の内容"七千の兵"語句の背景に緑を設定します。

<body style="width: 600px; border: 1px solid;">
<h1 style="background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、三男の義宗が嫡嗣として扱われて越後に匿われました。<br>
義宗は、長じて越後・関東に於いて南朝方に与し足利尊氏に挑みます。一時は鎌倉の奪還を果たしますが、忽ち劣勢に追い込まれてしまいます。<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


ブラウザで開くと、h1、p、spanの各要素の領域が矩形(ボックス)になっています。CSSは、このように要素の範囲をボックスに見立てます。width、heightを指定しませんので初期値のautoで、内容の量に応じて要素の領域が設定されています。なお、body要素の領域(幅600px)を視覚的に捉えるため枠線を設定しました。
ブロック要素であるh1、pとインライン要素であるsapnの違いを比べるため、。以下のように、要素にwidthとheightの属性値(CSSでは、プロパティ値)をしてみましょう。(記事の文章は、一部省略してます)

<h1 style="width: 400px; height: 60px; background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="width: 400px; height: 240px; background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、…<br>
義宗は、長じて越後・関東に於いて南朝方に与し…<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


ブラウザ表示の画像を見ると、span要素に設定したwidth、heightが反映されません。ブロック要素とインライン要素の違いは、要素の内容領域の「幅と高さ」を持っている(指定できる)か否かです。
ちょっとややこしいのですが、インライン要素にmarginとpaddingを指定しますとしますと変則的な設定になります。

2014-05-04(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 3

CSSの書式

CSS事始め1で、p要素へstyle属性を追加して、段落の表示幅を600pxに設定しました。

<p style="width: 600px;">
延元3年(1338)新田義貞が越前で亡くなり…
忽ち劣勢に追い込まれてしまいます。<br>
…落馬して最期を遂げました。</p>
<p style="width: 600px;">
地の民は、義宗の霊を「うつぶし明神」として祀り…</p>


p要素が二ヶ所ですので、それぞれのp要素にstyleの属性を付加してあります。同じ要素に、同じ属性を記入するのは効率が良くないですね。実は、styleを要素とするタグが用意されています。

<style type="text/css">
  p {width: 600px;}
</style>


style要素タグに括られた内容は、p要素の"表示領域の幅は600px"という属性の付加を意味します。これは、html書類の情報になりますので、つまりブラウザに表示しない内容ですので、head要素内に文書の情報として記入します。
pはHTMLの要素名ですが、style要素の内容では"セレクタ"と言います。呼び名が変わるのは、セレクタにはHTMのL要素名以外の物もあるからです。ただ、スタイルの適用対象がHTMLの要素であることは変わりません。まずは、書式に慣れましょう。
セレクタ {プロパティ: プロパティ値;}
widthを"プロパティ"(特性)、その具体的な性質を"プロパティ値"いいます。そして、プロパティとプロパティ値を:(コロン)で区切り中括弧{ }で括ります。プロパティを複数設定するときは、;(セミコロン)で区切ります。最後の;は省略できます。また、語中以外の半角スペース及び改行は無視されますので、記入時に読みやすいように適宜入れている方もおります。
もう、お気づきかと思いますが、HTMLタグのstyle属性値は"プロパティ: プロパティ値;"になります。styleというワードは、タグの要素名、属性名に使われています。混乱してしましそうですね。
余談ですが、titleも要素名、属性名に使用されています。styleは使用の対象が同じですが、ttitleは要素としての役割と、属性としてのそれは関係がありません。ちょっと、ややこしいことになっていますが、不便が無ければtitle属性を無理に使わなくても構いません。

2014-03-23(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。