html、css｜ぼうびろく

18 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

05 January

決められたwidth height　に絶対画像サイズをあわせる

<div>
<a href="#">
<img src=" ~~~~~ ">
</a>
</div>

a {
    max-width: 250px;　//max-をつける理由忘れた
    height: 300px;　//縦サイズ絶対指定する
    overflow: hidden; //縦長の画像のはみ出た部分を非表示
    display: block;　//imgの上の階層はブロック要素にする
    text-align: center;　//横のセンターに配置する
    line-height: 300px;　//なんの理由があるか忘れた
}
img {
    max-width: 250px;　//レスポンシブは　max-　をつけないとダメ
    height: auto;　//　横サイズに合わせて縦が勝手に変動
    vertical-align: middle;　//縦サイズが足りない画像がきても中央に配置する
}

※注意点

<div>
<a href="#">
<span>
<img src=" ~~~~~ ">
</span>
<p>~~~~~~</p>
</a>

</div>

<p></p>をリンクを含めないなら上記のcssでいいが、全部囲ってリンクしたい場合、
imgのみを囲うものがないとダメ。
imgのみ囲うもので縦横サイズを指定し、ブロック要素にする必要がある
spanなどで囲う。その場合　a　に指定していたcssは　spanに指定する

PR

20 December

擬似要素　:after　:before　が　img指定では効かない

http://jeffreyfrancesco.org/weblog/2011051101/

img に直接指定すると効かない

div img{
content:"aaaaaaa";
}

imgをなんらかのタグで囲い、そのタグに指定すると効く
上記URLの説明を読んでわかった
擬似要素の挿入される場所は、

<p>:before　～～～～～　:after</p>

<img>は閉じタグがないので、擬似要素が挿入される場所がないということ。
いつもどおり:beforeとかで装飾しようと思って、できないでないおかしいおかしいって
無駄に時間を過ごしてしまった･･･。
今までimgに直接指定したことがなかったから気づかなかった。

16 December

jsでUAをスマホ、PC、タブレットで振り分ける

http://keep.ciao.jp/?p=480

<script type="text/javascript"> 
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPad') != -1 || ua.indexOf('Android') != -1){
//iPhone & iPad 
document.write('<link rel="stylesheet" href="style_ip.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="style_pc.css">');
}
</script>

27 November

borderをつけたとき、画像の下とborderの間に空白ができてるのがわかる対処法

http://css-el.seesaa.net/article/138946834.html

画像をブロック要素で囲んでいるときにでるらしい？
どちらかを記述する

div {

/* 行の高さを０にする */
font-size:1px;
line-height:0;

}

div img {

/* テキストの下端に揃える */
vertical-align:text-bottom;

}

私が知ってるのは、aタグで囲んだ場合、aタグが下段のほうにいるので余白をうみだしていた
aタグを　display:block;　すると直る

27 November

擬似要素:before　:after　でcontent:url(~~~.jpg);を指定したときの画像サイズ変更方法

http://tenman.info/labo/css/?p=401

transformで

.***:before{
    content: url('images/***.png');
 -webkit-transform: scale(0.5); 
 -moz-transform: scale(0.5); 

}

もともと指定してたpositionがずれたので、再設定必須です。

スマホは2倍サイズで作らないと画像がぼやける

アイコンもそう

擬似要素を良く使うので、画像サイズを指定できないのは困って探した

色々と発想の転換ですね