スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

white-space CSSだけで改行

HTMLソースに書く場合

改行は<br>などと書きますが、

<pre>~</pre>の中に書いた文字列はソースに書いてある通りに改行されますよね。

でも借りているスペースなどでHTMLはいじれないけどCSSだけは許されている場合
スタイルシートに

white-space:pre

と書くと改行されるそうです。



スポンサーサイト
white-space CSSだけで改行/2011/06/05 10:09/[html]css/ トラックバック(0)/ comment(0)

CSSしかいじれないBlogなどの優先順位を逆転 !important

CSSしかいじれないBlogなどの編集でどうしても変えることができない時は、元々の優先順位が影響しているらしいのでCSSに[ !important]を追加そのスタイルを最優先にすることができるそうです。


font-size:12px !important;

しかし、連発では意味がなくなるので、最小限にとどめるほうがいいということです。
CSSしかいじれないBlogなどの優先順位を逆転 !important/2011/06/13 07:02/[html]css/ トラックバック(0)/ comment(0)

画像だけを真ん中に

記事を書いていると文章は左寄りにしたいが、画像だけを真ん中にしたい時があります。
あらかじめ文章は
text:align:left;
として
cssに
img{
display:block;
margin:auto;
}



2009-10-1-23.jpg

ちなみに指定しないと下のようになる。
2009-10-1-23.jpg
画像だけを真ん中に/2014/08/12 06:51/[html]css/ トラックバック(0)/ comment(0)

画像にマウスオーバーで画像を重ねる

cssは


box a {
position: relative;
}
.box a:hover:after {
content: url(重ねる画像.png);
position: absolute;
bottom: 0;
left: 0;
}
HTMLは
<div class="box">
<a herf="#"><img src="表示される.jpg"></a>

>は英数字小文字
DEMO
画像にマウスオーバーで画像を重ねる/2014/10/02 12:54/[html]css/ トラックバック(1)/ comment(0)
| ホーム |

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。