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

テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。
CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。
続きを読む

CSSでFont AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。

Font Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うことで、見た目を細くするなどの調整を行うことができます。
続きを読む

iPhoneやiPod touchなどのiOS端末で、<iframe>に指定したoverflow:scrollによるスクロールが効かずに<iframe>の内容がはみ出して表示されてしまう場合の対処法のご紹介です。
続きを読む

特定の要素を中央に配置したいという場合のCSS記述例のご紹介です。

ブラウザを伸縮しても、常に画面（親要素）の中央に表示させることができるというものです。
続きを読む

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

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

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

レスポンシブのサイトを制作している場合は特に「PCサイトでは<BR>タグで改行させている所を、スマホで見た時には改行させたくない」ということが頻繁にあるのではないかと思います。

<br class=”mobile”>にようにクラスを指定する方法も考えられますが、特定のブラウザ幅の時だけ<BR>タグによる改行を無効化する方法もあります。
続きを読む

マウスオーバーした画像を、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 プロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。
続きを読む