Webデザイナーという仕事の終焉 ～デザインが脂肪ならばコンテンツこそが筋肉である～ - MdN Design Interactive
現在のWebメディアにおいて、Webデザイナーの役割は相対的に落ちている。はっきり言えば、Webデザインというものは、ほぼ死語になりつつある。 WebメディアはPCと比べて圧倒的に小さなモバイルの画面で閲覧されるので、凝ったデザインを施す余地がない。というより、Webメディアは小さな画面の中でできるだけ大きくコンテンツを見せなければならないので、コンテンツ消費の邪魔になりかねないデザインはむしろ排除するべき「余分な脂肪」なのである。だから現代のWebメディアにおいてはデザインは最小限でよい。 本サイトを見るユーザーはWebデザイナーである人が多いだろうが、この数年以内に単なるデザインをするだけのWebデザイナーという職業は消えて無くなると思った方がいい。 デザインが脂肪ならば（脂肪だから少しは必要ではあるが）、コンテンツこそが筋肉である。コンテンツを目立たせ、できるだけ多くのコンテンツを読
レスポンシブ対応、Googleマップの中心にピンを表示するテクニック -the new code
Googleマップをレスポンシブ対応にするのは、簡単です。embedのコードから高さと幅を削除して、ラッパーを用意するだけです。しかし、クリティカルな問題が一つあります。サイズを水平方向に変更した際に、地図の端が切断されてしまいます。 Googleマップの中心にピンを表示し、且つレスポンシブ対応にするテクニックを紹介します。 Create An Auto-Centered Responsive Google Map 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 デモ 実装 デモ デモでは、デスクトップでも、タブレットでも、スマホでも、そしてコンテンツのサイズを変更しても、Googleマップの中心にピンが表示されています。
SVGでテキストの縦位置(baseline)を調整する方法を調べてみた - 風柳メモ
SVGで、テキストの縦位置(baseline)を揃える処理を書こうとしてはまったので、覚え書き。 経緯 コピィ・ライターを作成していてふと、 「あれ？ 基本的にテキストを配置してバナーを作るものだし、SVGと相性良いんじゃ？ 設定ファイルを JSON で書き出しているところをちょっといじれば、SVG で書き出すこともできるようになるかも？」 と思い立ったので、処理を追加してみたところ、テキストの baseline を揃えるところで苦労したというもの。 そもそも、SVGをいじるのはこれが初めてなので、誤解をしているところはあるかも……変なところがあればご指摘願いたい。 どこではまったか？ 「え……またIEかよっ！」 HTML5 Canvas の場合、textBaseline プロパティを指定すればテキストの baseline が指定できていた。 同じようなものが SVG でも無いか探してみる
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bootstrapで"col-xs-"より小さい"col-xxs-"クラスを作ってみる | 雲をつかみに