HTML+CSS– category –

システム開発、HP制作をしていると以前のキャッシュが残っていてブラウザに正しく表示されないなんてことはよくあると思います。キャッシュはブラウザの表示速度が速くなり便利ですけど、開発時には若干面倒です。自分だけの問題なら「あー・・・面倒」で...

テーブルを使ってデータを一覧表示したとき、マウスカーソルがあたっている行だけを色を変えると見やすさが増しませんか？CSSで簡単にできますので説明します。【マウスオーバー時にTABLEの行の背景色を変えるCSSの書き方】まずはテーブルを用意します。&l...

データを一覧表示させる際にテーブルを使うことは多いと思います。しかしデータの表示項目が多いと目がちかちかして見にくくなってしまいます。そんなときデータの行を1行1行色を変えると見やすくなります。CSSで簡単にできるのでご紹介します。【tableの...

キャッチコピーをバンと表示したいけど、微妙に2文字だけ改行されてしまう！！なんてことないですか？ こういった場合には文字を小さくするという対応方法もありますが、文字と文字の間の微妙な隙間を狭くすることで改行せずに全体を表示させる方法を...

僕はデザインの勉強をしようと思ったことも一瞬だけあったのですが、センスが無いからすぐ諦めました(笑)もはやWEBページ全体やHTMLのボタンなどパーツのデザインは世の中にたくさんテンプレートがあるので、それらを活用してなんとかなっています。 ...

今回はCSSのborder-imageを使って、borderをグラデーションにする方法です。borderをグラデーションにする必要ある？？って思いつつもこの記事を作成するにあたり実験したら、思いの外きれいでした(笑)結構簡単にできるんで、センスのいい方はサイトのデザ...

前回の記事ではpositionや擬似クラスを使って、borderの途中から色を多少強引にする方法を紹介しましたが、その後ひょんなことからもっと簡単に実現できる方法をみつけました！border-image というCSSのプロパティを使う方法です。今回はこのborder-image...

borderで引いた線は、上下左右で別の色や太さを指定することは出来ますが、基本的には1辺の線の色を途中から変更することはできません。そうしたい場合は下線用の画像を作成し、背景に設定する方法が一番簡単です。しかし、CSSのテクニックということで下...

マウスカーソルを合わせるとじんわり文字や背景の色が変わったりさせるためにはCSSの transition を使います。他にもチェックボックスにチェックしたら画像がじんわり切り替わるなどもできます。transitionは表示状態が切り替わるときにゆっくりじんわり変...

CSSでmarginを扱う場合、marginの相殺ってのが起こる場合があります。「marginの相殺」って聞いたことありますか？ぶっちゃけ僕は聞いたことありませんでした。質問を受けて初めて知りました。【marginの相殺とは】そういう現象があることは知ってましたけ...