• RSS
[CSS]Font Awesomeのアイコンを細く見せたい場合の対処法

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

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

[CSS]iOSでiframeの内容がはみ出して表示される場合の対処法

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

[CSS]<input type=submit>にFontAwesomeのアイコンを表示する方法

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

[CSS]Safariでの検証時にinvalid CSS property declaration at:*エラーが表示される場合の対処法

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

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

[CSS]brタグの改行を無効化する方法

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

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

[CSS]画像のマウスオーバー時にtransformで拡大縮小表示する

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

[CSS]Google Maps iframeでマウススクロールによる拡大縮小を無効にする方法

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

[CSS]Noto Sans JP のwebフォントを利用する方法

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

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

Google Maps API の地図のレスポンシブWEB対応

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

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

[CSS]Google Map のズームコントロールが出ない場合の対処法

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

[CSS]aタグリンク下線の色や種類などを変更する方法

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

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

[CSS]height:100vh で要素の高さを100%にする方法

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

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

[CSS]CSS でチェックボックスやラジオボタンを大きく表示する方法

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

[CSS]Facebookの「Like Box」の背景色を変更する方法

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

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

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