CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。
続きを読む

CSS でリンクテキストの下線の太さや色を変更するには、text-decoration:noneにした上で、border-bottom プロパティで線の太さや色、種類を設定してあげると簡単に実現できます。

また、border プロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。
続きを読む

以前にjQueryで 特定の要素の高さを100%にする方法 について紹介させていただきましたが、

対応ブラウザは限られるものの、CSS だけでも同じように要素の高さを100%にすることが可能です。
続きを読む

フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。
続きを読む

Facebook のLike Box プラグインに使える背景色が「light」と「dark」の2種類しかないため、

今回はブログのデザイン（背景色）に合わせてLike Box の背景色を変更する方法を紹介させていただきます。

※Like Box の設置方法については、別途 Facebook のLike Box をブログに設置する方法 の記事も参考にしてみてください。
続きを読む

以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidity を使わずに、ちょっとしたCSS のスタイル記述だけで簡単にiframe 要素をレシポンシブ対応させる方法をご紹介します。
続きを読む

Twitter Bootstrap を使っているサイトでWEBページを印刷した際に、リンクテキストの後ろに「リンク先のURL」が表示されてしまうことがあります。

このURLを印刷時に非表示にする方法が、【CSS】印刷するとリンクの後ろにURLが勝手に表示される のブログ記事で紹介されていましたので、シェアさせていただきました。
続きを読む

Twitter のフォローボタンをCSS でデザインする方法のご紹介です。

以前に紹介させていただいたTwitter フォローボタンをテキストリンクにする 方法を使えば、HTML とCSS だけでTwitter フォローリンクを設置することができるようになります。
続きを読む

CSS でローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.net などを使う方法もありますが、

今回は 画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう の記事で紹介されていた方法をもとに、keyframes を使ったシンプルなCSS のローディングアニメーションの作成方法とカスタマイズ例をまとめてみました。
続きを読む

CSS のwhite-space プロパティのpre-wrap を使って、pre タグ内のテキストやコードを幅に合わせて改行する方法のご紹介です。
続きを読む

過去に CSS で作る「吹き出し」のサンプル の記事で紹介させていただいたカスタマイズを元に、
Facebook やTwitter っぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。
続きを読む

overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。

そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。
続きを読む

<label for=”mail”>のような属性セレクタをCSS で制御する方法のご紹介です。
続きを読む

table のセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSS で指定する方法のご紹介です。
続きを読む