Web制作 | Travelogue

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

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

公開日：2018.04.26

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

公開日：2018.02.18

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

公開日：2017.12.16

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

公開日：2017.11.20

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

公開日：2017.10.24

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

公開日：2016.04.21

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

公開日：2016.01.18

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

公開日：2015.01.19