2016年10月11日のブックマーク (2件)

  • 意外と見逃してたかも!配色の知識が増える記事10

    作成:2016/10/11 更新:2016/10/11 Webデザイン > デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 セパレーション(分離配色) 赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。 メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。 色彩の調和/セパレーション カマイユ わずかな明度差を利用した配色方法をカマイユといいます。曖

    意外と見逃してたかも!配色の知識が増える記事10
  • [CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア

    Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

    [CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア
    Hi32
    Hi32 2016/10/11
    行と列を入れ替える見た目だが、ソースではaria-labelを使いtd:before {content: attr(aria-label);}で呼び出す。1行ずつ書くのか