プロパティの記述順序:CSSコーディングガイドライン

さあ、今すぐルールを作ろう!

cssプロパティ書き順記事へ

CSSプロパティの記述順序に、厳格なルールはありません。

ですが、ある程度ガイドラインを決めておいた方が、共有やメンテナンスがしやすくなります。

今日は、私が日々のタスクで使用している、ガイドライン(※CSS3は除く)を紹介しますので、ご参考ください。

記事の続きを読む

CSSのテキストインデントで2行目以降の行頭を字下げする方法

例えば、
「※注意書きホニャララ・・・」
といった記述に対して、右の画像みたいに2行目以降を自動的に字下げしたいケースってありませんか?

今日は このようなケースを、text-indentプロパティを上手く使って、実現する方法を紹介したいと思います。

記事の続きを読む

セレクタ/プロパティ/疑似クラス/疑似要素 CSSの基本を整理!

CSSイメージ

サイトやブログの制作に関わる方なら、普段当たりまえのように記述しているCSS(カスケードスタイルシート)。

今さら感もありますが、私自身の復習も兼ね、セレクタ・プロパティ・疑似クラス・疑似要素といった言葉の意味、その役割を整理しましょう。

※このコンテンツは、CSS2の基礎レベルのみで作成しました。
CSS3関連には触れていませんのでご了承ください。

記事の続きを読む

【注意】CSSのclassやidを数字始まりや数字のみで命名してしまうと、

id・class名を数字から×

CSSを記述しても効かない時、もしかするとclass名やid名に問題があるのかもしれません。

まず、classやidの値はアルファベットで始めなければなりません。

なので、数字から始まる(数字のみで)命名を行うと、そのスタイルは無効になります。

class=”3colmuns”といった値って、うっかり付けてしまうことがありますので ご注意を。

CSS3のbox-shadowで画像がめくれた様な影を!

boxshadow

↑上記↑のような画像がめくれているような影、良く見かけると思います。

さて、今日はこのようなエフェクトを作る、CSS3のbox-shadowプロパティを紹介します。

記事の続きを読む

IE6 7 8でCSS3風の角丸を実現するjQuery.corner

jQuery.corner

角丸を表現するCSS3プロパティのborder-radiusは、ご存知のとおりIE8以下では使用できません。

で、IEにおいて角丸を表現する一般的な方法にPIE.htcファイルの使用があります。

しかし、これが導入しても、なかなか上手く効かない。
(※読み込みパスの指定方法や.htaccessの設定に問題があることが多いのですが・・・)

そんな時におすすめなのが、紹介するjQuery.cornerというプラグインです。

記事の続きを読む

IE・Safariでのレイアウト崩れや表示違い対策 CSSハックのまとめ

CSS

※2013年6月9日記事作成。2014年6月3日加筆修正。

サイトの制作や更新を行っていると、どうしてもブラウザ間で表示が異なる事象が出てしまいます。

言わずもがなIEの古いバージョンのレイアウト崩れは多いです。
そしてSafariも、表示フォントが変わってしまったりする場合があります。

で、通常の対策を行っても、ブラウザ間の表示違いを修正できないときに役立つのがCSSハックというテクニックです。

ちなみにCSSハックとは、各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なる宣言を読み込ませるための記述。

別の言い方をすると「IE6だけに読ませるスタイル」とか「safari2〜3.1のみに読み込ませるスタイル」を指定する記述です。

記事の続きを読む

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

サイトをシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

flight