• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ＋
■ナビゲーション
  1. 車・自動車SNSみんカラ
    2. >
  2. ブログ
    3. >
  3. ブログ一覧 [ハイパーいわん]

ハイパーいわんのブログ一覧

2007年02月26日 イイね！

スタイルシート講座～Vol.3 逆引き

スタイルシートの基本を第1回、2回で説明しましたが
第3回ではちょっとした実践を説明します。

まずはブログで基本となる色について定義してみたいと思います。
<span>
<div>
がみんカラのシステムでは使われています。
ブログの記事が<span>でコメントは<div>です。
他のところにも多用されていますので注意が必要ですが・・・

なおブログや整備手帳の部分のソースが何のタグでかかれているかは
Firefoxのブラウザを使うと直にわかります。

その部分をマウスで選択して右クリックするとソースがでてきます。
ＩＥだとソース全体が表示されます・・・ので探すのが面倒です。

このようにしてターゲットとなる部分のタグを確認するのを
逆引きといってしまいます。

スタイルシートの中に
span
{

}

とか

div
{

}

はないと思いますので

span
{
color:white;
}

とか

div
{
color:orange;
}

にすれば文字の色が変わります。

ということで簡単な事例でした！



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


ブログランキング・にほんブログ村へ
Posted at 2007/02/26 12:10:15 | コメント(3) | トラックバック(0) | スタイルシート | 日記
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 | コメント(5) | トラックバック(0) | スタイルシート | 日記
2007年02月22日 イイね！

スタイルシート講座Vol.1

◆スタイルシートって何だろう？

自分のＨＰを作ったことがある人ならわかると思いますが
WEBの見栄えをよくするためのものです。
HTMLのタグでいちいち記述すると複数のページを作ると
かなり面倒です。
なので一般的には拡張子.cssのスタイルシートをつくって各ページで
リンクさせます。
この様にすることでスタイルシートを弄るだけで各ページの見栄えが
統一されて変更されます。

業務でPowerPointを使っている人はスライドのデザインの適用ってのが
あると思いますが、それと同じ様な感覚です。

みんカラではスタイルいじりはもう慣れた人が多いと思いますが
まだよく判らないという人のために簡単に説明したいと思います。

ツボさえ抑えれば簡単にいじれますので。

<head>～<head>のなかにスタイルシートのリンクがしてあります。
<link rel="stylesheet" href="/userid/109901/css/direct.aspx?n=C2" type="text/css" title="default" />

これによってスタイルシート編集で記述したスタイルが適用されます。
実際のURLは以下のようになっています。
https://minkara.carview.co.jp/userid/109901/css/direct.aspx?n=C2


◆基本的な決まり

<span style="color:red;">みんカラ</span>

span；前後で改行されないインライン要素タグ

<div style="color:red;">みんカラ</div>

div；前後に改行が入るインライン要素タグ

これらのようにブログ本文のタグにstyle属性を直接指定できます。
でもこれでは面倒なので文字を大きくしたりとが小さくしたりとか
した場合についでに色も変えたい場合に使うといいと思います。

<span style="font-size:30px;line-height:130%;color:red;">みんカラ</span>
みんカラ

【解説】
font-size:30px・・・フォントサイズを30pxに指定
line-height:130%・・・行間を130%あける
color:red・・・色は赤
このようにcolorという属性とredという値を:でつなぎ、
それぞれの宣言文（color:red）を;で繋げればOKです。

ではスタイルシートの中ではどのようにすればいいのかを
解説します。

スタイルシートの最初の方にリンクのタグである
<a href="http://・・・">みんカラ</a>の定義があります。

a {
color: #FA9020;
background-color: black;
text-decoration: none;
}

a:link {
color: #FA7000;
text-decoration: underline;
}

a:visited {
text-decoration: underline;
}

a:active {
}

a:hover {
color: #FF0000;
text-decoration: underline;
}

text-decoration・・・テキストの装飾を指定します。複数指定も可能です。
none（何もなし）
underline（下線）
overline（上線）
line-through（打ち消し線）
blink（点滅）
inherit（継承）

みんカラ

その他代表的な属性には下記があります。
また説明したいと思います(^^;

背景
background
background-color
background-image
background-repeat
background-attachment
background-position

フォント
font
font-style
font-variant
font-weight
font-size
line-height
font-family
font-stretch
font-size-adjust

テキスト
text-indent
text-align
text-justify
text-decoration
text-underline-position
text-shadow
letter-spacing
word-spacing
text-transform
white-space
line-break
word-break
ruby-align
ruby-overhang
ruby-position
layout-grid
layout-grid-line
layout-grid-char
layout-grid-mode
layout-grid-type
text-autospace
text-kashida-space

テーブル
caption-side
table-layout
border-collapse
border-spacing
empty-cells


では！


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


ブログランキング・にほんブログ村へ
Posted at 2007/02/22 21:46:08 | コメント(5) | トラックバック(0) | スタイルシート | パソコン/インターネット
 
 

プロフィール

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

ハイタッチ！drive

みんカラ新規会員登録

ユーザー内検索

掲示板

ハイパーいわんの掲示板

<< 2025/11 >>

日 月 火 水 木 金 土
      1
2345678
9101112131415
16171819202122
23242526272829
30      

ブログカテゴリー

リンク・クリップ

デイライト(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月
ヘルプ｜ 利用規約｜ サイトマップ
© LY Corporation