css 背景のみ透過 テキストは透過させない
よく見るデザインですが、cssのみで背景を透過させてその上にあるテキストは透過させない、cssです。 要素にopacityを当ててあげれば、透過は可能ですが、当てた要素全てが透過してしまいます。 ではなく、… Read More »
カテゴリー: 技術・ノウハウ
フォントサイズは結局どう指定する？ px em % rem 各違いは
レスポンシブ対応のコーディングが一般的になって来た今日この頃ですが、 多くのコーディング代行をさせて頂く中で、ふと気になったので、記しておきます。 レスポンシブcssでスマホの対応をする場合ですが、そもそも… Read More »
cssで見出しや背景に使えそうなテクニック
cssのみで実装する、見出しや背景に使えそうなテクニックを紹介します。 ストライプの見出し背景 .stripe{ border:2px solid #f8f8f8; padding: 5px; backgr… Read More »
レスポンシブのtableを100%にする
レスポンシブでtableタグを使用した場合、tableの中身は2×3くらいしかないので、表示幅的には問題ないが、なぜか親要素をはみ出る事があります。 paddingやmarginでもなく、box-sizin… Read More »
sectionとarticle要素の違い 結局どう使うのが良いのか。。。
基本のマークアップとして、これまでは div 要素で囲んで、デザインを当てていく事が多かったかと思います。 ただしHTML5での記述が当たり前になった現在では、articleとsectionを使用して、マークアップしてい… Read More »
cssだけでカッコいい動きを表現するテクニック ３選
今回はcss3だけでめちゃくちゃカッコイイ表現ができる参考サイトの紹介です。 楽○shopサイトなんかで使えそう・・・ 様々なホバーエフェクトをcss3で実装しています。 アイコンの装飾などに使いたい。マウスオーバーした… Read More »
display inline-blockでできる変な隙間をなくす方法
要素を横並びにする際に個人的にはdisplay:inline-block;で並べる派です。 floatはあまり好みではないので。。。 ただ、display:inline-block;で並べると、意図しない隙間ができます。… Read More »
タブやキー操作などで操作可能なセレクトボックス作成 jQuery、option部分もデザイン可能なselect jQuery
セレクトボックスはクリックする前の上澄み部分はcssでデザイン調整が可能ですよね。ただしクリックした後の、プルダウン部分（option部分）はcssではデザインできませんよね。 ブラウザの仕様だからと諦めるのは簡単だけど… Read More »