CSS

擬似クラスのコーディングの仕方やスタイルの使用方法・詳細度などをご紹介いたします。 気になる記事がありましたら、今までに投稿したタグ「CSS」に関する投稿記事を是非チェックしてみてください。

[Dreamweaver]作業効率が劇的にアップ!!ショートカットとコードスニペット

  CSS, HTML, WEB , , ,

Dreamweaver

Dreamweaver を使用してコーディングしているとよく使う機能ってないですか?私の場合は「ソースコードのフォーマット」や「すべてを保存」などをよく使用します。使用する際に、メニューから選んだりしているとどうしても効率が悪くなってしまいます。そこで、基本的なショートカットの紹介や「ショートカットとコードスニペット」を設定して作業効率を向上させる方法についてご紹介したいと思います。

続きを読む

[CSS] 勘違いしている擬似クラスの使い方

  CSS

CSS3 Cascading Style Sheets カスケーディング スタイルシート CSS

「あれ!?擬似クラスが適応されない・効かない」や「思ったところに擬似クラスが適応されていない」など擬似クラスの使い方にお困りではないでしょうか?私も同じ経験があります。そこで今回は、first-childlast-childなどの擬似クラスの使い方についてご紹介したいと思います。

続きを読む

[CSS] 擬似クラス・擬似要素まとめ

  CSS

CSS3 Cascading Style Sheets カスケーディング スタイルシート CSS

WEBサイトをコーディングする際に、「先頭・最後のリストだけスタイルを変えたい」や「偶数番号の背景色を変更したい」などに擬似クラス・擬似要素を用います。私自身WEBを勉強している中で、擬似クラス・擬似要素についてもう一度勉強し直す必要性を感じました。そこで今回は、基本的なものからCSS3などの擬似クラス・擬似要素をご紹介したいと思います。

続きを読む

[CSS] CSSの詳細度による「適用順(優先順位)」と「上書き」

  CSS, WEB

CSS 詳細度 id class 上書き 適応 優先順位 タイトル

WEBサイトをコーディングしている際に、複数のCSSのスタイルを書き込みますが、それらにはセレクタの詳細度・固有性によってCSSのスタイルの適用される優先順位が存在します。
優先順位によって、先に定義された記述を上書きすることができる場合・できない場合が存在します。
そこで、今回は詳細度によるCSSのスタイルの適用順についてご紹介したいと思います。

続きを読む

[Google API] 手軽にGoogle Maps APIをカスタマイズできる「gmaps.js」の使い方

  javascript, jQuery , , , , , ,

Google Maps API タイトル

Google Maps APIを使えばオリジナルの画像を使ったマーカーを地図上への設置やルートを地図上に描くことが可能です。しかし、Google Maps API V3はAPI Keyが必要だったりなかったり、導入が面倒だったので何かいいのないかなと探していると良さそうな「gmaps.js」を見つけたので、gmaps.jsの使い方をご紹介したいと思います。

続きを読む

[CSS] floatの浮動化を解除するclearfix

  CSS ,

CSS float clearfix

WEBサイトをレイアウトする際に、よくfloatプロパティを用いると思います。
レスポンシブルデザインにおいても、各デバイス(パソコン・タブレット・スマートフォンなど)でデザインを変化させるために、とても重要であると言えます。
しかし、floatを使用すると浮動化されて「divなどの親の背景が表示されない」「下のレイアウトが崩れる」などの様々な問題が生じてきます。
そこで今回、floatの浮動化を解除するclearfixについてご紹介していきたいと思います。

続きを読む

[CSS] paddingとmarginの使用方法

  CSS ,

padding margin

WEBサイトをコーディングする際に、paddingとmarginをいつも各方向をいっぺんに設定する時に止まってしまうため、
確認・まとめの意味も込めて今回paddingとmarginについて書き込んでいきたいと思います。

続きを読む