Webデザインの核を担う“情報設計”を、見落としていませんか？ - Workship MAGAZINE(ワークシップマガジン)
私たちが普段から触れているコンテンツや機能の多くは、使いやすく、目的がすぐに果たせるよう、設計者と開発者によって“構造化”されています。ユーザーがインターフェイスを認識しやすいよう、適切な方法でコンテンツとナビゲーションシステムを構築しているのです。 Webデザイナーが留意するべき要素は数あれど、コンテンツの構造化はとても重要な項目です。 今回は情報設計の考え方の本質に迫り、デザイナーが知っておくべき基本的なポイントをご紹介します。 情報設計とは？ 情報設計（Information Architecture／以下：IA）とは、WebサイトやWebアプリケーション、モバイルアプリケーション、ソーシャルメディア、ソフトウェアなどのコンテツ上にある情報を、誰でも理解できるよう、何をどのように配置するかを決めることです。 IAは、ユーザーが製品の機能に容易に適応し、簡単に必要なものをすべて見つける
CSSだけでレスポンシブ対応のtableを実装してみた | 無能屋
テーブルをメインに使用しているコンテンツをレスポンシブ対応する必要があるので、色々調べてみて実装してみました。 参考にしたサイトと実装デモ 色々見てみた中で、自分なりに一番しっくりしたレスポンシブ対応の参考サイトはこちら。 Responsive table layout · Matt Smith これを基に実装したテーブルのデモはこちらになります。 レスポンシブ対応 table デモ 各テーブルの説明は下記になります。 縦並びの見出しテーブル 参考サイトとは関係ありませんが、一応縦並びの見出しテーブルのレスポンシブ対応も実装してみました。 会社概要風のテーブル 会社概要とかでよく使われている感じの一般的なテーブルです。 通常 <table class="col-head-type1"> <tr> <th>見出し1</th> <td>コンテンツ</td> </tr> <tr> <th>見出し
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
あなたの街は安全？ 自宅周辺の不審者情報が通知で届く「防犯マップ」
いつもYahoo! MAPをご利用いただきありがとうございます。 今回は、お子さんがいらっしゃる方や女性の方に特に知っていただきたい、『防犯マップ』をご紹介します。 今春公開されたiPhone版につづき、待望のAndroid版でも対応となったYahoo! MAPアプリの『防犯マップ』、おかげさまで大きな反響をいただいています。 近所の不審者情報などを通知や地図でお知らせ 『防犯マップ』は、暮らしの安全にかかわる情報（※1）を、地図と詳細情報でいつでも簡単に確認できる機能です。「近くでこんなことが起きているんだ」と知ることで、身近な危険の回避につながります。 ※1 情報提供元：日本不審者情報センター 自宅や現在地周辺で声かけや痴漢、空き巣などが発生した場合に、通知で最新情報をお届け。地図上の９種類のアイコンでおおよその発生場所とくわしい情報を確認できます。 また毎日届く通知のほかに、過去の防
thタグのscope属性は何を意味しているのでしょうか？ - ホームページ制作Q&A
<table> <tr> <td></td> <th scope="col">平成19年</th> <th scope="col">平成20年</th> </tr> <tr> <th scope="row">男</th> <td>559847</td> <td>559513</td> </tr> <tr> <th scope="row">女</th> <td>531643</td> <td>529971</td> </tr> </table> 「平成19年」のth（見出し用セル）は、「scope="col"」がはいっており、見出しに対応するtd（データ用セル）は列方向（下方向）ですよいう意味を表しています。「男」のthは、「scope="row"」がはいっており、見出しに対応するtdは行方向（右方向）ですよいう意味を表しています。 ビジュアルウェブブラウザでみれば、thとtdの対応は一目瞭
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: 外人部隊125の真実: 合田洋樹: 本
