5分で完璧に分かる！CSS Gridの基本的な使い方を解説
CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で
CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり
注目度アップ！画面を二分割するWebサイトの制作ポイントまとめ（参考テンプレート付）
画面を縦半分に二分割した「スプリット・スクリーン（英: Split Screen）」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「ひとつの画面に2つのメッセージ」というシンプルなルールだけです。 各パネルには写真イメージや文字テキスト、イラストなど異なるさまざまな要素を配置できるのが特長のレイアウトです。 シンプルとなってきているグラフィックのデザイントレンドに比べ、画面を2つに分割することは、よりユニークな方法でサイトへの興味を引くことができます。もう少し詳しく見ると、以下のような利点があります。 特定のパートにユーザーの注意を引きつける。 コントラストをうまく利用できる。 これまでにないスタイルを提供できる。 また、あらゆる画面サイズに対応する、レスポンシブデザインにとっても良い選択と言えるでしょう。このタイプのレイアウトは、大画面やタブレットでの表示が特におすす
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
モバイルのUI要素を視覚的に分けるための６つのガイドライン
アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。 例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。 今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。 従来の区切り線 水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。 この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。 区切り線の種類と使い分け フルブリードディバイダー フルブリードディバイダー（余白なしで横幅100％の区切り線）
デザインやレイアウト、見せ方、使い勝手が参考になるオンラインショップやプロダクトページのまとめ
ストアページ、プロダクトページ、価格表ページ、チェックアウトページなど、オンラインショップやプロダクトページのレイアウト、商品の見せ方、UI周りの使い勝手が参考になるページをコレクションしているサイトを紹介します。 Store Pages ローンチして間もないサイトですが、そのコレクションは充実しています。 ストア、プロダクト、価格表、チェックアウトはそれぞれ別ドメインを取得されているので、気合いが入っています。
デザイン上達の秘訣は「文字の扱い方」！テキストを読みやすくする5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのまきこです。 わたしは以前、著名なアートディレクターの方に「デザインがうまくなるにはどうしたらいいでしょう？」と、大変にストレートな質問をしたことがあります。そのときいただいたのは、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉でした。 あれから何年か経ちますが、ふとその言葉を思い出すことがあります。そして、「あのときはあんなふうに言われたけど、たいしてうまくなってないなあ」と、ぼんやり考えてから、また作業に戻っていく。と、ここまでが、去年までのわたしのいつものパターンでした。 でも、2016年のわたしはちょっと違います。ちょうど昨日、「文字の扱いがうまくなると、デザインがうまくなるよ」という言葉をまた思い出しました。そこで、「あ、これ、ブログにしよう」と思い立ったわけです。 今回はデザインにおける文字の扱い方の中でも、わたしが普段意識している、「
デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - Qiita
ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文
文字組みの基礎を解説！しっかり理解して美しいデザインへ！
デザイン作業をおこなう機会がある方の中には、文字組みをあまり意識していないという方もいらっしゃるのではないでしょうか。デザインの美しさ、フォント選びももちろん重要ですが、基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。 今回は、必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介します。 これまで文字組みに真剣に取り組んでこなかった、という方はこれを機に是非意識してみてください。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポ
Webデザイナー必見、実務で役立つ逆引きレイアウト集
作成：2015/07/21 更新：2016/06/29 Webデザイン > オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６．メリハリを出したい ７．先進的な演出をしたい ８．広がりを出したい ９．メッセージを目立たせい １０．要素を上手に対比させたい １１．ラインをオシャレに使いたい １２．躍動感を出したい １３．ハッキリ見せたい １４．シンボル・ロゴを目立つ位置に配置した
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
floatを使わずにinline-blockで横並びにする方法｜web bibo
floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class="box height">float 2</div> <div class="box">float 3</div> <div class="box">float 4</div> <div class="box">float 5</div> <div
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
| デザイナー視点で見る！イケてるバナーとトホホなバナー～イケてるバナー編～神戸ホームページ制作センター
前回のデザイナー視点で見る！イケてるバナーとトホホなバナー～これはトホホ編～ に引き続き今回は参考にしたいグッドデザイン編！ 前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。 縦に割る 写真を文字を分けることでスッキリとした印象になります。
bizyou.jp
Buy this domain. 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーが考慮すべき「錯視」のあれこれ | Swings
Penguin Random House
nh-lab.com
