• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2007年02月23日

スタイルシート講座~Vol.2スタイルはBODYから!

昨日の基本偏はどうも不評なようです(^^;
やっぱり実践ですよね。基礎は頭に入れておくと役に立つのは
間違いないので、時間のあるときに理解はしておきたいものです。

では実践偏はbodyからいきます。
スタイルはbodyからです!

bodyタグというのはhtmlの全体の骨組みともいえるタグです。
ちなみにhtmlの要素は

<html>
<head>
<title>~</title>
</head>
<body>
<h1>~</h1>
<p>~</p>
</body>
</html>

となっていますのでこのbodyタグの事を指します。
headの部分にはそのページの情報とかタイトルとかを記入します。
meta(METAinformation(メタ情報))として検索ロボットへの指示を書くことも
できますが、みんカラではここの情報はいじれません。

では本題に。
bodyの属性としてふさわしいのは背景の画像や色、余白、フォントなどです。

背景としての属性には以下があります。
background
background-color
background-image
background-repeat
background-attachment
background-position

まずbackgroundは
背景のcolor(色)、image(画像のURL)、 repeat(繰返性)
attachment(背景の動作)、position(表示位置)を一度に指定できます。
個別でもOKです。

body { background: url(a.jpg) no-repeat fixed 50% 50%; }

repeatは背景画像の並べかたを
repeat(規定値:敷き詰める)
repeat-x(横方向のみ並べる)
repeat-y(縦方向のみ並べる)
no-repeat(ひとつだけ表示する)

attachmentは背景の動作を
scroll(規定値:一緒にスクロールする)
fixed(スクロールしない)

position
背景の横方向の位置を
left(左端)、center(中央)、right(右端)
または 50% のような割合で指定

縦方向の位置を top(上端)、center(中央)、bottom(下端)
または 50% のような割合で指定

fixedと一緒に指定すると見栄えもよくなります。

フォントは以下の属性があります。
font
font-style
font-variant
font-weight
font-size
line-height
font-family
font-stretch
font-size-adjust


今回はここまで(^^;


▼記事に満足したらここをクリック▼
ブログランキングランキングオンライン


ブログランキング・にほんブログ村へ
ブログ一覧 | スタイルシート | 日記
Posted at 2007/02/23 17:18:00

イイね!0件



今、あなたにおすすめ

ブログ人気記事

ご無沙汰しております
べるぐそんさん

千葉ドライブ ② 亀岩の洞窟〜まさ ...
SUN SUNさん

夏休み〜終了😹
もじゃ.さん

嫁さんの送り迎えの間に起きた熊事件 ...
エイジングさん

お疲れ様でした🙇
ゆう@LEXUSさん

🥒精霊馬🍆宇宙世紀
avot-kunさん

この記事へのコメント

2007年2月23日 18:19
次回楽しみにしてます(^-^)/
コメントへの返答
2007年2月24日 2:51
次回は火曜日かな?!
2007年2月23日 18:28
自分はなんとなくルールパスを予測し弄ってはプレビュー確認と言う手間の掛かる事してます^^;。
やはり説明本があると良いですね。
コメントへの返答
2007年2月24日 2:53
試行錯誤を繰り返しながらいじくっているのですね!
ネックはやっぱりブラウザの違いです。IE系とMozilla系を抑えておけばたいていは大丈夫ですけど。
2007年2月23日 20:04
スタイルシートについて知りたかったとこだったんです。
勉強させていただきます。
コメントへの返答
2007年2月24日 2:54
役に立てるかどうかはいまいち自信がありませんけど、続けて行きたいと思います。
2007年2月23日 23:09
今のところ、さっぱりサーちゃんです(^^;
いい機会ですので、勉強させてもらいます!
コメントへの返答
2007年2月24日 2:55
勉強すると仕事にも役に立つかもしれませんよ(^^;
2007年2月24日 16:37
因みに私のは、カービューんのデフォルト(青)を読んで「ここ弄ったらたぶんこうなるだろう」で作りました。
一から書くのは出来ないですね。
コメントへの返答
2007年2月24日 20:55
確かにそれが一番早いでしょうね!
基礎を覚えておくと多分こうなるってのが一発で決まるようになります(^^;

プロフィール

「みんカラ:モニターキャンペーン【KENWOODディスプレイオーディオ】 http://cvw.jp/b/109901/48536341/
何シテル?   07/11 09:51
S660納車されました! ドライブが超楽しい車です。 軽なのにこのできはすばらしいの一言です。 特にコーナリングの安定感は抜群です! アドバンネオバはS...

ハイタッチ!drive

みんカラ新規会員登録

ユーザー内検索

<< 2025/8 >>

     12
3456789
10111213141516
17181920212223
24252627282930
31      

ブログカテゴリー

リンク・クリップ

デイライト(Power LED)取り付け 
カテゴリ:その他(カテゴリ未設定)
2023/03/02 11:52:16
エコ燃費カップの件 
カテゴリ:その他(カテゴリ未設定)
2022/08/12 17:58:32
日本ライティング Zeus clear PREMIUM GLASS COATING 
カテゴリ:その他(カテゴリ未設定)
2021/01/24 19:45:03

愛車一覧

ホンダ S660 ホンダ S660
2015.3.28契約 2015.4.2オーダー 2015.8.11納車(^o^)/ ...
ホンダ N-ONE ホンダ N-ONE
ついに乗り換えました‼️ 4から5速へ入れる時に違和感感じますが直ぐになれるでしょう。
ホンダ N-WGN ホンダ N-WGN
エリシオンとワゴンRRがN-WGNに統合
スズキ ワゴンR スズキ ワゴンR
親父の車から娘の車に 2020.5.15 AM8:36 娘の車から自分の車に 2021 ...

過去のブログ

2025年
01月02月03月04月05月06月
07月08月09月10月11月12月
2024年
01月02月03月04月05月06月
07月08月09月10月11月12月
2023年
01月02月03月04月05月06月
07月08月09月10月11月12月
2022年
01月02月03月04月05月06月
07月08月09月10月11月12月
2021年
01月02月03月04月05月06月
07月08月09月10月11月12月
2020年
01月02月03月04月05月06月
07月08月09月10月11月12月
2019年
01月02月03月04月05月06月
07月08月09月10月11月12月
2018年
01月02月03月04月05月06月
07月08月09月10月11月12月
2017年
01月02月03月04月05月06月
07月08月09月10月11月12月
2016年
01月02月03月04月05月06月
07月08月09月10月11月12月
2015年
01月02月03月04月05月06月
07月08月09月10月11月12月
2014年
01月02月03月04月05月06月
07月08月09月10月11月12月
2013年
01月02月03月04月05月06月
07月08月09月10月11月12月
2012年
01月02月03月04月05月06月
07月08月09月10月11月12月
2011年
01月02月03月04月05月06月
07月08月09月10月11月12月
2010年
01月02月03月04月05月06月
07月08月09月10月11月12月
2009年
01月02月03月04月05月06月
07月08月09月10月11月12月
2008年
01月02月03月04月05月06月
07月08月09月10月11月12月
2007年
01月02月03月04月05月06月
07月08月09月10月11月12月
2006年
01月02月03月04月05月06月
07月08月09月10月11月12月
2005年
01月02月03月04月05月06月
07月08月09月10月11月12月
2004年
01月02月03月04月05月06月
07月08月09月10月11月12月
1987年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ利用規約サイトマップ

あなたの愛車、今いくら?

複数社の査定額を比較して愛車の最高額を調べよう!

あなたの愛車、今いくら?
メーカー
モデル
年式
走行距離(km)
© LY Corporation