CSS の記事一覧
![[CSS]<input type=submit>にFontAwesomeのアイコンを表示する方法](https://www.webantena.net/wp-content/uploads/2016/05/fontawesome.png)
フォームのサブミットボタンである<input type=”submit”>に、FontAwesomeの虫眼鏡アイコンのフォントを使う方法のご紹介です。
続きを読む
![[CSS]Safariでの検証時にinvalid CSS property declaration at:*エラーが表示される場合の対処法](https://www.webantena.net/wp-content/uploads/2014/07/safari.png)
Safariブラウザで要素の検証をしていると「invalid CSS property declaration at:*」というエラーが表示される場合があります。
ただ、Safari以外のブラウザでは(今の所)このエラー自体が出なかったり、Safariでもエラーが出たり出なかったりするため原因がよく分かりませんでしたが、色々調べてみると、どうやらCSSファイル内に書かれた、IE7やIE6向けなどで用いられるCSSハック(*)に問題があるようです。
続きを読む
![[CSS]画像のマウスオーバー時にtransformで拡大縮小表示する](https://www.webantena.net/wp-content/uploads/2017/10/css3.png)
マウスオーバーした画像を、CSS3のtransformで拡大縮小表示させる方法のご紹介です。
続きを読む
![[CSS]Google Maps iframeでマウススクロールによる拡大縮小を無効にする方法](https://www.webantena.net/wp-content/uploads/2015/08/gmap.png)
Google MapsをブログやWEBサイトに埋め込む(iframeで読み込ませる)際に、マウススクロールにより地図が拡大縮小してしまわないようにする方法のご紹介です。
続きを読む
![[CSS]Noto Sans JP のwebフォントを利用する方法](https://www.webantena.net/wp-content/uploads/2015/01/googlenotofonts.png)
Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語(和文)フォントも利用可能です。
今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。
続きを読む

Google Maps API の地図をレスポンシブWEBデザイン対応にする方法のご紹介です。
PCでブラウザを伸縮しても、スマートフォン端末を縦横に回転しても、Google Maps のピンを常に中央に表示させることができます。
続きを読む
![[CSS]Google Map のズームコントロールが出ない場合の対処法](https://www.webantena.net/wp-content/uploads/2015/08/gmap.png)
Bootstrap のCSS が原因か、Google Map でズームコントロールを使うように設定していても、表示されない場合があります。
続きを読む
![[CSS]aタグリンク下線の色や種類などを変更する方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
CSS でリンクテキストの下線の太さや色を変更するには、text-decoration:none
にした上で、border-bottom
プロパティで線の太さや色、種類を設定してあげると簡単に実現できます。
また、border
プロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。
続きを読む
![[CSS]height:100vh で要素の高さを100%にする方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
以前にjQueryで 特定の要素の高さを100%にする方法 について紹介させていただきましたが、
対応ブラウザは限られるものの、CSS だけでも同じように要素の高さを100%にすることが可能です。
続きを読む
![[CSS]CSS でチェックボックスやラジオボタンを大きく表示する方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。
続きを読む
![[CSS]Facebookの「Like Box」の背景色を変更する方法](https://www.webantena.net/wp-content/uploads/2013/10/facebook.png)
Facebook のLike Box プラグインに使える背景色が「light」と「dark」の2種類しかないため、
今回はブログのデザイン(背景色)に合わせてLike Box の背景色を変更する方法を紹介させていただきます。
※Like Box の設置方法については、別途 Facebook のLike Box をブログに設置する方法 の記事も参考にしてみてください。
続きを読む
![[CSS]<hr> の境界線の色と太さをCSSで変更する方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
<hr> の境界線の色と太さを変更する為には、CSS のbackground-color
とheight
プロパティを使います。
続きを読む
![[CSS]iframe 要素をレスポンシブ対応させる方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidity を使わずに、ちょっとしたCSS のスタイル記述だけで簡単にiframe 要素をレシポンシブ対応させる方法をご紹介します。
続きを読む
![[CSS]簡単にCSS の三角形を生成できるジェネレータ「CSS三角形作成ツール」](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
WEB上で三角形の形状やサイズ、色などを指定しながら、CSS の三角形が簡単に生成できるジェネレータ「CSS三角形作成ツール」のご紹介です。
以前にも CSS で円形、三角形、台形、星形 などを表現する方法のまとめ の記事を紹介させていただきましたものの…、コーディングの時間がない時などには、このような作成ツールは本当に役に立ちます。
続きを読む