blog

BLOGブログ

ARCHIVES

vax

よく使うcss小技まとめ そういえば最近つけ麺食べてないなー

20160818_001

 

 

全国2000万2120人のファンのみなさま。

お疲れさまです。VAXだず。

 

広島に帰ってきて早2カ月。

なぜか全然痩せません (>_<)

 

なぜかです。

 

 

僕は普段コーディングというものを主にやっているのですが今日は普段使ってる小技をなんとなく説明します。

 

 

※今更感満載ですが使えるものはきっとあるはず。。。。

 

では

 

テキストを隠して背景画像を表示


 

 

現在私たちエフのHPの h1タグは

 

<h1 class="logo"><a href="//www.e-f.co.jp/">熊本・東京のホームページ ウェブ制作会社 | 株式会社エフ</a></h1>

 

このようになっていますが

実際webで見てみると

 

20160818_002

のようにロゴが表示されています。

 

偶然サムけんの最新記事が競馬に行ったとかどうとかって記事ですがそれはさておき

 

こちらは

 

.logo a {
display: block;
width: 250px; /* 画像の幅 */
height: 0;
padding-top: 47px; /* 画像の高さ */
background: url(images/logo_250.png) no-repeat;
overflow: hidden;
}

 

このように指定しています。
ポイントは

 

高さをつぶして(height: 0;) はみ出した文字は非表示(overflow: hidden;)
余白を付けて(padding-top: 47px;) 背景画像を指定(background: url(images/logo_250.png) no-repeat;)

ということです。

 

結構使います。

 

 

続いて

 

オンマウス効果


 

20160818_003
こちらは画像でやらなくても簡単に効果が付けれます。

 

#top-service-area li .link {
display: block;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 38px;
width: 120px;
margin-top: 10px;
background: #fff;
border: solid 2px #000;
float: right;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#top-service-area li .link:hover {
background: #000;
color: #fff;
}
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

 

こちらをつけておけばいい感じにアニメーションで切り替わります。

 

0.2秒で変化していくよってものなのでスピードは適当に調整してください。

 

 

 

サムネイルなどをいい感じで並べる


 

 

意外と需要がある気がします。

 

エフの制作実績のページで並んでるサムネイル。

どうなっているかというと

 

20160818_004

 

コンテンツの幅:  1100px
サムネイルの横幅: 330px
サムネイルの間隔: 55px

 

考え方は

1100 - 330*3 = 110

 

サムネイル(330px) margin(55px) サムネイル(330px)  margin(55px) サムネイル(330px)
こんな感じです。

 

となるので

 

cssの方は

 

.page-works .works-list li {
width: 330px;
float: left;
margin: 0 0 30px 55px; /* 下marginは適当に */
}

 

こんな感じにります。

 

 

ただここで問題が!
このままだと 左端側にも margin-left  55px がついてしまうので大ピンチです。

 

ということで

リスト自体を左に 55px ほど引っ張ってしまいます。
.page-works .works-list {
overflow: hidden;
margin-left: -55px;
}
こうすることで綺麗におさまります。
htmlのイメージとしては
<div>
<ul>
<li>画像</li>
<li>画像</li>
<li>画像</li>

</ul>
</div>

上記でいうと <div> タグを中央寄せにするなどして配置を整えます。

 

さらにいうと

この <li>タグに高さを付けていないと

 

 

20160818_005

 

 

高さがずれた際にこのように段落ちしてしまいます。
なので サムネイル 3列で改行の場合は

4, 7 , 10 ... 番目の floatを解除すればいいので
.page-works .works-list li:nth-child(3n + 1) {
clear: both;
}

このように解決します!

 

20160818_006

 

 

 

テーブルでやるのもいいでしょうがレスポンシブ対応などを思うとこちらの方がよいかと思います。
何かの参考になればありがたいです。
セミの鳴き声が落ち着いてきましたが
我が家に 子猫が...

 

 

 

次回 前本ブログ要チェックです。
では。

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事