• RSS
[CSS]半円を表示する方法(半円上、半円下、半円左、半円右)

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

[CSS]テキストにマーカーのような背景を適用する方法

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

[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]position:absoluteとmargin:autoで要素を中央配置する方法

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

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

[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 プロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。
続きを読む