【レスポンシブ基本】スマホ閲覧の時だけ表示またはパソコンの時だけ表示するCSS最短テクニック

2019-04-04

レスポンシブでサイトを制作することは今や当たり前ですよね。 googleが推奨していることもありますし、なによりサイトのメンテナンスがラクです。 レスポンシブ最高!というわけで早速表題の件に。 <レスポンシブの1番お手軽な組み方(CSSを三つ用意する)> レスポンシブでサイトを作る場合、スマホで表示するボタンをパソコン版では表示しないようにしたい部分がでてきます。ですので、分かりやすい名前のクラスをつけておくと便利です。 pc.css htmlStart .sp-only{ display:none;} htmlEnd 逆にスマホ用のCSSにパソコン版だけの部分を非表示に...

リンクや画像をマウスホバーの際にゆっくり変化させるCCSのみで最短の方法

2018-10-29

マウスホバーはPC版サイト限定なので、スマホサイトでは使えません。 BtoBではまだまだPC版サイトが重要なので、需要は多少ありますよね。 さて、ゆっくり変化させる方法ですがCSSのみで簡単にできます。 まずはclassにtransition(切り替える時間)を指定します。 hover時の効果も指定。半透明にさせるopacityかbackgroundがベターです。 htmlStart .hover-slow{ transition: 0.5s;} .hover-slow:hover{ opacity:0.7;} htmlEnd あとは、ホバー時に変化させたい画像やリンクの...

Opacityをほとんどのブラウザで使えるようにする

2012-08-22

ロールオーバー用の画像を作るのが面倒な場合に活躍するオパシティー。 htmlStart a:hover img{ filter:alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; } htmlEnd 数値は「0~100」「0~1」までの間で、数値が低いほど透明度が強くなります。なので、0にすると画像は見えなくなります。...

CSS

クロスブラウザ対応CSSハックの一覧

2012-08-09

コーダー泣かせのIEはハックで強引に直しちゃいましょう。IEはjavascriptの動作が重いし、CSS3とHTML5の対応は進んでいませんし、FireFoxもCSS3とHTML5が完全対応ではありません。safariとGoogleChromeはその辺はかなり対応していて優秀です。IEの次のバージョンはどうなのでしょうかね? マイクロソフトはOS部門のWindows以外で大した成功がないような気がします。メッセンジャーはスカイプに負けてるし、ブラウザもイケてないし、スマホでも勝ち目なさそうだし。クラウドサービスもグーグルの方が技術的に強そうなイメージがある。どれも使いやすさには定評がある...

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04


ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 <CSS> htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...

floatの回り込み解除にclearfixを使う

2012-08-04


<サンプル> ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 <CSS> ※2019-04-20追記 現在はコードが短くスッキリしています。使用方法は変わりません。 htmlStart .clearfix::a...

この記事がお役に立てましたら是非シェアのご協力お願いします。