Travelogue(トラベローグ)

Travelogue

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

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

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

2018.04.26

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

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

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

2018.02.18

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

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

2017.12.16

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

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

2017.11.20

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

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

2017.10.24

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

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

2016.04.21

用語の意味を相手と共有できてないと的外れな作業をしてしまうかも。という話

Webデザインの提案や修正の打ち合わせの際、相手の意向を聞いて意思疎通することが必要ですが、同じ言葉について双方が別々の意味でとらえていることがあり、そのまま進めると的外れな作業をしてしまうかもしれません。特にメールの文 […]

2016.01.18

tableをブロック要素にすると中のtdが横に伸びない

スマホサイトでtableを扱うとき、横並びになっていたthやtdのセルが、そのままだと横幅が狭いので、これらをブロック要素に変換してひとつのセルごとに横幅100%で表示させることがよくあります。 PCサイトのHTMLにあ […]

2015.01.19

123

Copyright © 2004-2018 Travelogue.

Pagetop