Travelogue

擬似クラスlast-childの後に擬似要素afterをつなげて使うCSS参考例

擬似クラスと擬似要素はつなげて使うことが出来る。例えばliタグやddタグが複数ある時、擬似クラスlast-childの後ろに擬似要素afterを指定して使うCSSの参考例を挙げた。

公開日:

カルーセルスライダーslickの前後ボタンが表示されない原因と対処法

カルーセルスライダーslickの前後ボタンが表示されない原因と対処法

カルーセルスライダー用のjQueryプラグインとして定番の「slick」を設置した時、前後の画像への矢印ボタンが表示されないことがある。この問題のほとんどの場合はcssで解決できるのでその対処方法をまとめた。

公開日:

写真上のデバイステキストを見やすくするためにtext-shadowがとっても便利

写真上のデバイステキストを見やすくするためにtext-shadowがとっても便利

text-shadowはテキストに影をつけるためのプロパティです。数年前までは対応ブラウザの関係でなかなか使うのが難しかったのですが現在はすっかりスタンダードなプロパティとして定着している感があります。 text-sha […]

公開日:

共通ファイル化したナビゲーションで現在閲覧中ページのみスタイルを変更する

共通ファイル化したナビゲーションで現在閲覧中ページのみスタイルを変更する

グローバルナビゲーションのスタイルを現在閲覧中のページだけ変化させておく方法について書きます。 パンくずリストと似たような意味で、サイト内における現在位置を分かりやすくするものです。 例えばラインの色を変えたり、背景の色 […]

公開日:

ビフォーアフター写真のアイコンや矢印をCSSだけで作る

Before、Afterを写真で紹介するようなページは業種を限定せずいろいろなサイトで目にします。BeforeとAfterという文言でなくても、改修前・改修後とか、お掃除前・お掃除後とか、前後を比較するコンテンツは数多く […]

公開日:

CSSで画面を縦に分割して全画面表示する

ウィンドウサイズに追従してコンテンツや背景画像なども伸び縮みするようなデザインが主流になっている感のある昨今ですが、下記のようにウィンドウの左右を縦に分割し、それぞれの横幅はウィンドウ幅に対し50%:50%、縦はウィンド […]

公開日:

nth-childのカッコの中にプラスを使うのが地味に便利

地味に便利なCSS3のセレクタの話。 使い慣れてないとあまりよく考えず別々のclassを割り当てたりしがちですが、使い慣れてくるととってもスマートにコーディングできてなんだか嬉しい。 例えばnth-child()。これ自 […]

公開日:

CSSの属性セレクタやjQueryのcontainsフィルターをうまく使ってコーディングするとスマート

CSSの属性セレクタは馴染みが薄い人が多いかもしれませんが、特定の属性をもつタグだけを指定できるので便利。 これらを使えばclassをいちいち割り振る必要もなくスマートです。 例えばinputタグのtype属性の値がsu […]

公開日:

Copyright © 2004-2018 Travelogue.

Pagetop