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

[CSS]<hr> の境界線の色と太さをCSSで変更する方法

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

[CSS]iframe 要素をレスポンシブ対応させる方法

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

[CSS]簡単にCSS の三角形を生成できるジェネレータ「CSS三角形作成ツール」

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

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

[CSS]WEBページの印刷時に、リンクの後ろにURLが表示される問題の解決法

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

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

[CSS]iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」

Google Maps やYoutube などを埋め込み表示したiframe 要素をレスポンシブ対応(表示サイズをブラウザに合わせてくれる)するのに便利なCSS「Fluidity」のご紹介です。
続きを読む

[CSS]Javascript を使わずにCSS でTwitter フォローボタンをデザインする方法

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

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