CSS 先頭の一文字だけにスタイルを適用させたいときの「first-letter」
新聞や雑誌などの印刷物でよく見かける手法ですが、文章の先頭の文字だけ拡大表示や、文字色を変えるなどして視線の誘導などに有効だったり、文章にリズムが生まれたりするというものがあります。実際にどういったも...
CSS
CSS 
CSS サムネイルをマウスオーバーした時に画像を拡大表示する方法
CSSの「transform:scale()」を使用することで、マウスオーバー時などで要素を拡大・縮小することが可能になります。各コンテンツへのリンク用に設置するサムネイル画像などなどによく見られます...
CSS text-indentした要素が複数行になった時の左側を揃えたいとき
注意事項などの小見出しなどの後に、インデントを付けて説明分を挿入する場合などでtext-indentを用いて字下げをしたりしますが、複数行になる場合に、2行目以降がインデントされずに左寄せになってしま...
CSS WEBフォントを使ってちょっとお洒落に…
CSSでフォントのスタイルを設定する際に一般的なプロパティは「font-style,font-variant,font-weight,font-size,line-height,font-family...
CSS positionプロパティの「absolute」と「relative」の違いって？
横並びの要素＝floatプロパティと考えがちですが、positionプロパティの方が都合がいい場合があります。数あるCSSのプロパティの中で、イマイチ曖昧なpositionプロパティについて「abso...
CSS 基本的な横並び配置のメニューの作り方
html+cssだけで簡単な「横並び配置のメニュー」を作るときに、よくある3パターンのコードをメモしておきます。そのまま使えるようなシンプルなものになっていますので、ご自由にコピー＆ペーストしてご利用...
CSS CSSなどでコメントアウトに利用できるテンプレート
CSSやPHP、JavaScriptを記述する際に、使用できる「コメントアウト」の一覧をまとめて置こうと思います。他にも格好いいコメントアウトの記述方法をされている方が、いらっしゃいますが一般的によく...
CSS background-sizeについて…
背景の指定をする際に用いる「backgroundプロパティ」ですが、画像を配置したい場合「background-image」プロパティで任意の画像を指定します。その際に「background-size...
CSS テキスト背景をCSSだけでアニメーションにする簡単な方法
テキストの文字部分の背景をCSSのみでアニメーション画像にする方法がありましたのでご紹介します。現状、残念なことにwebkit系のみの対応になっていますが試してみてください。▼サンプルとして「Anim...
CSS ボタンのマウスオーバー時に「hover.css」で動きをつける！
お問い合わせボタンや各ページへのリンクボタンなどに対して、マウスオーバーした時に何かしらのアクションを付けて置くことで、ユーザー側としては少し安心感を得られます。背景色も変わらなければテキストカラーも...
CSS Bootstrapの基本的な使い方
唐突ですが、皆さんは「Bootstrap」を利用していますか？ 「何となく聞いたことがあるけれど結局何のことなの？」 「ちょっと使ってみたかったんだよね～。」そんな方に向けて「Bootstarap」を...
CSS z-indexがイマイチよくわからない!?
今回は「z-index」にフォーカス！なんやかんや「z-indexがイマイチよくわからない!?」って人向けです。簡単に言ってしまえば、z-indexプロパティは、要素の重なりの順序を指定することができ...
CSS デバイス幅に合わせたメニューボタンを、どうしてもサイズ可変の背景画像で作成したいとき。
スマートフォンサイトなどをコーディングする際に、トップページにサブ的なナビゲーションや各コンテンツへのリンクを目立つような画像で配置したい！などの要望があるかと思います。そんな時に、デバイス幅に合わせ...
CSS W3Cの勧告ステータスまとめ！
様々なWeb標準企画が、W3C勧告に至るまでのプロセスをまとめてみました。こむずかしい内容ですが、ニュアンス程度にも理解しておくといいかもしれません。サラっと流す程度にどうぞ。// // W3C(Wo...