つだしん @tsudashin 消費者庁の資料をリデザインしてみた2 とにかく引き算がだいじ、デザインに正解は無いのであくまで一例です pic.twitter.com/N3zd9M86Ze 2020-06-10 22:14:52
「とにかく引き算が大事」消費者庁の資料をデザイナーの人がリデザインしたらめちゃくちゃ見やすくなった
つだしん @tsudashin 消費者庁の資料をリデザインしてみた2 とにかく引き算がだいじ、デザインに正解は無いのであくまで一例です pic.twitter.com/N3zd9M86Ze 2020-06-10 22:14:52
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach
iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。 The Goldilocks Approach [ad#ad-2] The Goldilocks Approachの主な特徴 The Goldilocks Approachのケーススタディ The Goldilocks Approachのアプローチ The Goldilocks Approachの主な特徴 The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。 multi column（マルチカラム） 大きいサイズ用 narrow column（ナロウカラム） 小さいサイズ
[CSS]サイズが分からない要素を真ん中に配置するテクニック
width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 Centering in the Unknown [ad#ad-2] 下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、marginのtopとleftをエレメントの半分のサイズでネガティブマージンで配置します。 CSS .centered { position: fixed; top: 50%; left: 50%; margin-t
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
IE6と7あたりでz-indexが効かなくて困った場合の解決方法 - tukihatuの技術日記
早く死なないかなIE6。寿命後どれくらいかな。 いろいろ解決方法は提示されてるけど、どれもこれもわかりにくいというか説明が長い！ のでメモ。 結論 ◎IE6、IE7の仕様では、positionにrelative、absoluteなどを使うと重なり順が自動で設定される。（たぶん初期値0） ○親要素にz-indexを設定している場合、その中の要素でz-indexを指定しても親要素内でしか効果が無い！（これはどのブラウザでも同じ） （↑第一階層z-index:0 > 第二階層z-index:2000 よりも 第一階層z-index:1 > 第二階層z-index:0 の方が重なり順は上になる） ○z-index要素なしよりz-index:0のほうが強い。どちらも同じz-index:0の場合はソース順で下に書かれたものが強い。（これも他ブラウザと同じ） ×IE6、IE7では親要素positionに
[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework
Demo: Fluid: 768pxで表示 [ad#ad-2] MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを簡単に構築。 カスタマイズ カスタマイズも容易。 カスタマイズ用のスタイルシートファイルもあります。 MQFrameworkの使い方 必要なファイルを一式ダウンロードし、使用するページに外部ファイルとしてスタイルシートを指定します。 <link rel="stylesheet" href="css/master.css" type="
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
artless Inc. / mount inc. / standardimage他...全60件
[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート
Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr
ワンソースマルチユース
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」xyz corporation
Web制作における文章の可読性について考える ｜https://wp.yat-net.com/name
ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
ウェブページに固定表示させるエレメントの効果的な使い方
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 Fixed position web elements [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。 エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。 もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動
Persistent Headers | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section. Header… persisting. Couple things to know before we get started: There are many like it, but thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rodeo 1: Make This Responsive
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
Basic Design Note
Webデザイナーのためのandroid用レイアウト講座
