全国2000万2120人のファンのみなさま。
お疲れさまです。VAXだず。
広島に帰ってきて早2カ月。
なぜか全然痩せません (>_<)
なぜかです。
僕は普段コーディングというものを主にやっているのですが今日は普段使ってる小技をなんとなく説明します。
※今更感満載ですが使えるものはきっとあるはず。。。。
では
テキストを隠して背景画像を表示
現在私たちエフのHPの h1タグは
<h1 class="logo"><a href="//www.e-f.co.jp/">熊本・東京のホームページ ウェブ制作会社 | 株式会社エフ</a></h1>
このようになっていますが
実際webで見てみると
のようにロゴが表示されています。
偶然サムけんの最新記事が競馬に行ったとかどうとかって記事ですがそれはさておき
こちらは
.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;)
ということです。
結構使います。
続いて
オンマウス効果
こちらは画像でやらなくても簡単に効果が付けれます。
#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秒で変化していくよってものなのでスピードは適当に調整してください。
サムネイルなどをいい感じで並べる
意外と需要がある気がします。
エフの制作実績のページで並んでるサムネイル。
どうなっているかというと
コンテンツの幅： 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>タグに高さを付けていないと
高さがずれた際にこのように段落ちしてしまいます。
なので サムネイル 3列で改行の場合は
4, 7 , 10 ... 番目の floatを解除すればいいので
.page-works .works-list li:nth-child(3n + 1) {
clear: both;
}
このように解決します！
テーブルでやるのもいいでしょうがレスポンシブ対応などを思うとこちらの方がよいかと思います。
何かの参考になればありがたいです。
セミの鳴き声が落ち着いてきましたが
我が家に 子猫が...
次回 前本ブログ要チェックです。
では。
