こんにちは、ワタナベです！
気温の変化も激しいですが、最近とても寒くなりましたね(>_<)
今から冬が来るのが怖いです…
今回は個人的にcommon.css（ページ共通のcss）に入れておきたいコードをいくつかご紹介していきます。
ふわっとホバー
a{
text-decoration: none;
transition: .2s ease-in-out;
}
ホバーしたときの動作をふわっとさせたい時があります。
全体でこの動作を統一させるときは、transitionを突っ込んでおくと、いちいち個々にtransitionを設定しなくてもリンクのホバーがふわ～ってなってくれます。
ただし、リンク内にある画像に直接:hoverを設定した場合は、画像にtransitionを設定する必要があるので注意。
となると、画像にもtransitionを付けておくといいのだろうか…？( ˘ω˘ )
サイトの標準横幅と内部余白
.wrap{
max-width: 1140px;
width:100%;
margin: 0 auto;
}
.wrap_inner{
padding: 0 2.5%;
}
@media screen and (min-width:1140px) {
.wrap_inner{
padding: 0 25px;
}
}
@media screen and (max-width:480px) {
.wrap_inner{
padding: 0 4%;
}
}
結構自分は頻繁に使うやつです。あると結構便利。（自分は）
wrapがサイトの標準の幅、wrap_innerが内部余白です。
PC非表示／SP非表示
/*=== PC none / SP none ===*/
@media screen and (min-width:481px) {
.pc_none_s{
display: none;
}
}
@media screen and (min-width:768px) {
.pc_none{
display: none;
}
}
@media screen and (max-width:767px) {
.sp_none{
display: none;
}
}
@media screen and (max-width:480px) {
.sp_none_s{
display: none;
}
}
主に見出しやちょっとしたテキストの改行などで多用。自分は大体上の４つを使います。
画像をPCとSPで切り替える時なんかも場合によっては使いますね。
PC表示で電話番号リンクを無効
@media screen and (min-width: 768px){
a[href^=”tel:”] {
pointer-events: none;
cursor: default;
}
}
SPで見た時はタップしたら電話をかけられるようにしたいけど、PCではリンクにしたくない…ってサイトに。
ただ、IEだとクリックできちゃう。
PC表示のみFREX
@media screen and (min-width:768px) {
.pc-row{
display: flex;
}
}
widthが767pxになった時に一斉にflexが解除されるのが気持ちいいです(笑)
番外編
表示範囲に合わせて言語関係なく改行
p{
word-break: break-all;
}
日本語のサイトなら↑を入れておけばだいたいOK。
途中で英語やURLなどが入ってもちゃんと表示範囲に合わせて改行してくれます。
英文をテキストで使う場合は単語の途中で改行されてしまって読みにくくなっちゃうので注意です。
他にも共通のcssに入れておくと便利なコードがあったら教えてくださ～い(∩´∀｀)∩わ～い
それではまた次回！
ご閲覧ありがとうございました～
