CSS講座そのおまけ
アメブロでCSSのテストをしてみる。
難しいので続きはまた今度
（2011/04/08追記）
IE系でうまくできない。ファイアフォックスとクロムでは
うまく出来てると思います。多分。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
test
test
test
難しいので続きはまた今度
（2011/04/08追記）
IE系でうまくできない。ファイアフォックスとクロムでは
うまく出来てると思います。多分。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
CSS講座その５
ついにCSS講座も第５回目です。
とはいっても、実は前回でほぼ講座は終了です。
と、いうのはCSSは基本的に
☆width
☆height
☆margin
☆padding
☆float
を使うだけで大体のことはできます。
したがって以降はおまけのようなものだと
思っていただいて差し支えありません。
☆background-color
背景の色を指定できます。
<div style="width:100px; height:100px; background-color:green;">test</div>
☆background-image
背景に画像を表示できます。
<div style="width:100px; height:100px; background-image:url("画像のURL");">test</div>
☆position
ブロックを好きなところへ配置できます
<div style="position:absolute; left:600px; top:220px; width:100px; height:100px; background-image:url('画像のURL');"></div>
タイトルの部分に不自然な画像がありますがそこに飛ばしています。
そんなこともできます。CSSってすごいですね
大体こんなものでしょうか、詳細部分については
検索すればいくらでも出てくるのでこのブログでは
本当に大まかな説明のみにとどめておきます。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
とはいっても、実は前回でほぼ講座は終了です。
と、いうのはCSSは基本的に
☆width
☆height
☆margin
☆padding
☆float
を使うだけで大体のことはできます。
したがって以降はおまけのようなものだと
思っていただいて差し支えありません。
☆background-color
背景の色を指定できます。
<div style="width:100px; height:100px; background-color:green;">test</div>
testtest
☆background-image
背景に画像を表示できます。
<div style="width:100px; height:100px; background-image:url("画像のURL");">test</div>
☆position
ブロックを好きなところへ配置できます
<div style="position:absolute; left:600px; top:220px; width:100px; height:100px; background-image:url('画像のURL');"></div>
CSSで飛ばしました
タイトルの部分に不自然な画像がありますがそこに飛ばしています。
そんなこともできます。CSSってすごいですね
大体こんなものでしょうか、詳細部分については
検索すればいくらでも出てくるのでこのブログでは
本当に大まかな説明のみにとどめておきます。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
水ウメェ
この夏で2リットル6本入りのミネラルウォーター
飲みきったぜ。
うまうま
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
今は我慢の時
人生って我慢しなきゃならない場面がありますよね。
仕事中に眠くなった時とか、お腹が痛い時とか
贔屓のラーメン屋が満席だった時とか。
今はとにかくぐっと我慢。長くても一ヶ月も我慢すれば大体の
場合事態は好転するものです。
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング
CSS講座その４
CSS講座第４回目です。
今回はfloatです。
floatを使うことによって記事や写真を
画面の様々な場所に配置することができます。
非常に便利かつ重要な命令です。
☆float
-floatを指定しない場合
-floatを指定した場合
一目瞭然だとは思いますが、floatがないと上の様に
横に２つ以上のブロックを配置できません。
書き方
<div style="float:left">
<img src="写真のパス" />
<div>
<img src="写真のパス" />
なんだかよくわからないのですが上のように書くと
うまく出来ました。
ちなみに
float:left;で左詰め
float:right;で右詰
float:none;で回り込みの解除
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓URL短縮ツール
http://akb.cx/
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
↓携帯用掲示板サイト
トピッキング