タグ "CSS" を含む投稿を表示中:85件
-
【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。 CSSを使ってボックスを画面全体に表示させたいとき、通常は[height:100%;]と指定するだけなのですが、なぜか思いどおりの高さにならず、1時間近くもハマってしまいました。 ウェブ制作者ならば誰もが一度は陥るであろうこの問題の解決策を… 【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。続きを読む →
-
【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。 百聞は一見に如かず。 まず最初にデモをご覧ください。 【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。 CSSで円を作るにはbordar-radiusを使います。 HTML の記述 <a class=”button” hr… 【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。続きを読む →
-
【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。 普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレー… 【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。続きを読む →
-
【CSS】マウスカーソルの形状を変える。 CSS の[cursor]プロパティで、マウスカーソルの形状を変更する方法を紹介します。 通常「cursor」プロパティには以下の値を指定できます。 auto default pointer crosshair move text wait… 【CSS】マウスカーソルの形状を変える。続きを読む →
-
【CSS3】電光掲示板を再現するテクニック。 昨日の記事で紹介した[CSS3 Marquee]を改造して、電光掲示板を再現する方法を紹介します。 百聞は一見に如かず。 まずはデモページをご覧ください。 →CSS3 電光掲示板 基本的な作り方は[CSS3 Marquee]と同じです。 :… 【CSS3】電光掲示板を再現するテクニック。続きを読む →
-
【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。 HTML5からは非推奨(廃止?)となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をする… 【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。続きを読む →
-
CSSの[text-rendering: optimizeLegibility;]は指定しないほうが無難かも。 WordPress のデフォルトのテーマファイル「Twenty Fourteen」のスタイルシートを眺めていたところ、[text-rendering: optimizeLegibility;]という見慣れないプロパティがあったので調査してみ… CSSの[text-rendering: optimizeLegibility;]は指定しないほうが無難かも。続きを読む →
-
【CSS】先頭の文字を大きく表示する。 洋書でよく見かけるこの表現。 これは p:first-child:first-letter プロパティを使うことで、一番始めのパラグラフの一番始めの文字だけに指定することができます。 p:first-child:first-letter {… 【CSS】先頭の文字を大きく表示する。続きを読む →
-
【CSS】番号リストの表示を変更する方法。 通常は ol + li 要素を使って番号付きのリストを表示させることができますが、「第1章、第2章…」や「1問目、2問目…」など、数字と一緒に他の単語も表示させたい場合は counter-increment プロパティを使い、:before… 【CSS】番号リストの表示を変更する方法。続きを読む →
-
【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには? テキストに、単に背景色を加えるだけなら background でしていできますし、下線を引くなら border-bottom や CSS3 の text-decoration-line で実装できます。 今回はもっとグラフィカルに、蛍光ペン… 【CSS3】テキストに蛍光ペンでマーカー線を引いたような効果を加えるには?続きを読む →
-
【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。 当サイトでも随所で多用使っている、マウスオーバーした際に画像を拡大させるCSSテクニックを紹介します。 まずはこちら。CSSの設定です。 img.grow { -webkit-transition:0.2s ease-in-out; -mo… 【CSS3】マウスオーバーした際に画像を拡大させるCSSテクニック。続きを読む →
-
【CSS3】フォントサイズは「rem」で指定するのが最適解。 CSSでフォントサイズを指定するとき、通常は「em」、「%」、「px」あたりを使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位が非常に便利なので、その使い方を紹介します。 「rem」とは「root… 【CSS3】フォントサイズは「rem」で指定するのが最適解。続きを読む →
-
【CSS】2行目以降を1文字下げる[text-indent]の使い方。 箇条書きや注意書きの文章を書く場合に、文章の先頭に「・」や「※」などの記号を記述することがよくあると思います。 しかし、2行目以降がその記号の下に回り込んでしまうことが気になっている方も多いのではないでしょうか。 手作業で地道に改行を入れた… 【CSS】2行目以降を1文字下げる[text-indent]の使い方。続きを読む →
-
【CSS3】テキスト選択時のハイライトのカラーを変更する方法。 CSS3を用いて選択したテキストのスタイルを変更する方法を紹介します。 ::selection {background:#1aa;} 基本的にはこの一行で変えることができます。 ただし。このままだとFirefoxには対応していないようなので… 【CSS3】テキスト選択時のハイライトのカラーを変更する方法。続きを読む →
-
【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。 先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。 しかしながら、HTML5ではmarqueeタグは非推奨。 今後は廃止予定のタグということで、別の方法を模索。 jQue… 【CSS3】わずか2行の CSS3 でmarqueeを再現する方法。続きを読む →
-
HTMLタグ、CSSタグの読み方。 HTMLやCSSのタグ。普段何気なく使っていますが、制作者同士で話題にするときになってはじめて、その正確な読み方がわからないことに気づくことがあります。 間違った読み方を口に出してしまうと恥ずかしいですし、ちょっと困るときがあるんですよね。… HTMLタグ、CSSタグの読み方。続きを読む →