ブログ練習帳

11月2011

ファビコンが新しくならない!

まえ～に作ったファビコン

あんまりキレイでないのでファビコンを作り直しました。

でも、いくら作り変えてもキレイなファビコンにならない。ってか、見るパソコンによってファビコンがちが～う。

ということで、グーグル先生に聞いてみたところ、結構よくあることらしい。とくにIEは分かりにくいというか・・・。

というか、別のサイトのファビコンが表示されちゃってる～ぅ、ってのもある。そういえば、私のPCでも、このまえ、私のサイトなのに、いきなりファビコンが別のサイトのになってたことがありました。でも、気のせいかなぁと思ってました。

IE8で試してみました。まず、ファビコン更新したいサイトをお気に入りからいったん削除します。その次、普通にインターネットオプションの「全般」→「閲覧の履歴」→「削除」ではうまくいきませんでした。

インターネットオプションからいきます

ファビコン更新！

この「閲覧の履歴」の「設定」をクリック、「ファイルの表示」でインターネット一時ファイルのフォルダを開きます。

このフォルダの中に、自分が過去に作成したファビコンがあるはずなので、これを探して、削除します。

で、IEを再起動すると…。やった、でけた。作り直したファビコンになってる！（って、そんなにかわってないじゃんっていわれそうだ）

でも、こんな苦労しなきゃファビコン更新できないとなると、自分以外の人は絶対にそんなことしてくれないなと思います。ってことは、よく見てくれる人になればなるほど、せっかく作り直したファビコンを見てもらえないってことでしょうか？（っていうか、そんな奇特な人ができてから考えることか…。見習いのばやい。）

やっぱりタメイキな見習いでした。

2011年11月18日1:58 AM| カテゴリー：スクリーンショット,見習い奮闘記| コメント (0)

ネガティブマージンでリスト並べに挑戦

ネガティブマージン、いろいろいじってみたくなりました。リストを並べるのに利用してみます。

XHTML


<ul>

<li class="box1">Box1</li>

<li class="box2">Box2</li>

<li class="box3">Box3</li>

<li class="box4">Box4</li>

</ul>

背景つきでリストにしてみました

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
}
.box3{
	background-color:#0CF;
}
.box4{
	background-color:#FF3;
}

左にマージンをつける

左側にマージンつけました

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

line-heightで高さを決める

lineheightで高さを与える

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

2行目のボックスに上にネガティブマージンをline-height分(高さ)与える

2つ目のボックスの上部にネガティブマージン

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

3行目、4行目にも同様にネガティブマージンを与える

残りのボックスにも上部にネガティブマージン

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
	margin-top:-50px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
	margin-top:-50px;
}

高さの与え方はline-heightでもheightでもOK

高さをheightで指定してもOK

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
	margin-top:-50px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
	margin-top:-50px;
}

これを応用すると、画像も張れて、リスト画像もフロートいらず？

画像ファイルを指定してもOKだ！

XHTML


<ul>

<li class="box1"><img src="btn01.gif" width="100" height="50" alt="" /></li>

<li class="box2"><img src="btn02.gif" width="100" height="50" alt="" /></li>

<li class="box3"><img src="btn03.gif" width="100" height="50" alt="" /></li>

<li class="box4"><img src="btn04.gif" width="100" height="50" alt="" /></li>

</ul>

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	height:50px;
}

.box2{
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	margin-left:200px;
	margin-top:-50px;
}
.box4{

	margin-left:300px;
	margin-top:-50px;
}

ネガティブマージン、だんだん面白くなってきた見習いです。

2011年11月17日1:00 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

赤い部分の見出しと、内容の部分のPタグをまとめてDIVでくくるところまではきたのですが、その次であれっとなりました。内容の部分は、目いっぱい字が詰まっていると、見づらいのでパディング入れたいです。でもDIV自体にパディングつけると、内包する見出しHタグは、その内側に入ってしまうので、背景の赤い部分の周りに白い空白が・・・。ってことは、DIV自体にはパディングつけられないやってことになりました。で、その中のPタグとかにパディングつけていくか！と思いました。でも、これって面倒だし、CSSの記述は増えるし・・・。そもそもPタグ以外が内容部分に入ってきたら、それにも一個一個パディングつけなきゃならないってことです。

もう1つ考えられるのは、内容部分だけを囲うDIVをもう1つ内側に差し込んで、その内側のDIVにパディングつけるってことですが、これって、意味内容にはまったく関係ない、スタイルつけるためだけの記述そのものですよね。これはダメよと言われているので、できるだけ避けたいところです。

そんなときに使えるのが、ネガティブマージン。リキッドレイアウトの2段組で、片側が固定幅のものを作るときに、呪文の如しで使ってましたけど、これって分かると便利らしいです。

1つ目が、ネガティブマージンをHタグにつけてみた例です。親要素のDIVにつけたパディング20px分を、上・左右のネガティブマージンで打ち消しました。position:relativeは、IE6でキレイに表示させるための呪文です。これがないと、IE6の場合、はみ出た分が、表示されないってことがあるようです。

XHTML


<div id="outer1">

  <h1>背景つけたい見出し</h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p><p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>
</div>

CSS


#outer1 h1 {
	font-size:20px;
	color:#fff;
	background-color:#f00;
	padding:4px;
	margin:-20px -20px 20px;
	position:relative;
}
#outer1 {
	width:400px;
	margin:50px auto;
	border:#000 1px solid;
	padding:20px;
}

2つめは、ネガティブマージン使わないで、内包するPタグにパディングつけたものです。でも、Pタグのほかに、DLタグやリストタグが入ったら、それぞれにパディングつけなきゃならないから面倒です。

XHTML


<div id="outer2">

  <h1>背景つけたい見出し</h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p><p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>
</div>

CSS


#outer2 h1 {	
	font-size:20px;
	color:#fff;
	background-color:#f00;
	padding:4px;
	margin-bottom:20px;

}
#outer2 {
	width:440px;
	margin:50px auto;
	padding-bottom:20px;
	border:#000 1px solid;
}
#outer2 p {
	padding:0 20px;
}

3つめは、見習いが見たって、問題ありありな、力技。HタグとPタグ部分を別々にして、無理に引っ付けてます。なんじゃこりゃ～。あはは。

XHTML


<div id="outer3">
<h1 id="no3">背景つけたい見出し</h1>

  <div id="inner3">

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p><p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  </div>

  </div>

CSS


h1#no3 {
	font-size:20px;
	color:#fff;
	background-color:#f00;
	padding:4px;
	border:1px solid #000;
	border-bottom:none;
	width:432px;
	margin:50px auto 0;
}
#inner3 {
	width:400px;
	margin:auto;
	padding:20px;
	border:1px solid #000;
	border-top:none;
}

4つめは、ちょっとネガティブマージンつかったら、こんなんできました、ってのです。

ちょっと考えてみました

XHTML


<div id="outer4">

  <h1>背景つけたい見出し</h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p><p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <div id="inner4"><p>つづく・・・</p></div>

  </div>

CSS


#outer4 h1 {
	font-size:20px;
	color:#fff;
	background-color:#f00;
	padding:4px;
	margin:-40px 0 0 -40px;
	width:50%;
	border:solid 1px #000;
	position:relative;
}
#outer4 {
	border:solid 1px #000;
	width:400px;
	margin:50px auto;
	padding:20px;
}
#inner4 {
	margin:0 -40px 0 0;
	font-size:15px;
	width:100px;
	border:#000 1px solid;
	background-color:#FFCC33;
	float:right;
	text-align:right;
	pading:3px;
	position:relative;
}

なんだか面白くなってきた、見習いです。

2011年11月16日1:44 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

« 古い記事新しい記事 »

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

ブログ練習帳

ファビコンが新しくならない!

ネガティブマージンでリスト並べに挑戦

ネガティブマージンに興味を持つの件

カテゴリー

私のサイト

サイト内の検索にご利用ください

このサイトへのアクセスにご利用ください

ブログ練習帳の管理人への連絡