フォームのサブミットボタンである<input type=”submit”>に、FontAwesomeの虫眼鏡アイコンのフォントを使う方法のご紹介です。
続きを読む

Safariブラウザで要素の検証をしていると「invalid CSS property declaration at:*」というエラーが表示される場合があります。

ただ、Safari以外のブラウザでは（今の所）このエラー自体が出なかったり、Safariでもエラーが出たり出なかったりするため原因がよく分かりませんでしたが、色々調べてみると、どうやらCSSファイル内に書かれた、IE7やIE6向けなどで用いられるCSSハック（*）に問題があるようです。
続きを読む

マウスオーバーした画像を、CSS3のtransformで拡大縮小表示させる方法のご紹介です。
続きを読む

Google MapsをブログやWEBサイトに埋め込む（iframeで読み込ませる）際に、マウススクロールにより地図が拡大縮小してしまわないようにする方法のご紹介です。
続きを読む

Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語（和文）フォントも利用可能です。

今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。
続きを読む

Google Maps API の地図をレスポンシブWEBデザイン対応にする方法のご紹介です。

PCでブラウザを伸縮しても、スマートフォン端末を縦横に回転しても、Google Maps のピンを常に中央に表示させることができます。
続きを読む

Bootstrap のCSS が原因か、Google Map でズームコントロールを使うように設定していても、表示されない場合があります。
続きを読む

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 をブログに設置する方法 の記事も参考にしてみてください。
続きを読む

<hr> の境界線の色と太さを変更する為には、CSS のbackground-color とheight プロパティを使います。
続きを読む

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

WEB上で三角形の形状やサイズ、色などを指定しながら、CSS の三角形が簡単に生成できるジェネレータ「CSS三角形作成ツール」のご紹介です。

以前にも CSS で円形、三角形、台形、星形 などを表現する方法のまとめ の記事を紹介させていただきましたものの…、コーディングの時間がない時などには、このような作成ツールは本当に役に立ちます。
続きを読む