CSSグリッドで作るコンテンツラッパー
はじめに サイトコーディングをする際、コンテンツの配置を揃えるためのレイアウト要素（以下ラッパーとします）があります。 以下赤色の部分にあたる領域。 こちらのラッパーですが、CSSグリッドを使うことでも実装が可能です。 また従来のアプローチでは難しかったレイアウトの実装も可能になるので、今回はその解説をいたします。 サンプル 下記サンプルになります。 詳細に関してこれまでの実装と比較しながら、順を追って説明したいと思います。 従来の方法 こちらのコンテンツラッパーですが、CSSグリッドを使わなかった従来の実装方法が下記になります。 ※コンテンツ幅を1080pxにした例 ※あくまで一例です。 .container { max-width: 1080px; width: calc(100% - 20px * 2); margin-right: auto; margin-left: auto;
【完全保存版】非デザイナー向け「#シリョトレ」厳選10選｜西村マサヤ
こんにちは、西村マサヤです。 「#シリョトレ」という、企業が公開している決算資料や媒体資料から、真似すべきポイントをまとめてツイートする活動をしています。 資料数もかなり増えてきたため、本日はこれまでのシリョトレの中から厳選した10社のスライドをご紹介したいと思います。 ソフトバンク まず僕が大好きなのがソフトバンクの決算資料。 とにかく「シンプル」 言いたいことが死ぬほどわかりやすい。 端的なグラフとポジティブポイントを一言で表す簡素さが最高。 ソフトバンク出身者の資料作成本いくつか出てますが、正直これらのスライド写経すればすぐ身につくと思う。 #シリョトレ pic.twitter.com/WFRdOpOpVB — 西村真陽@DeNA (@masayaquality) March 26, 2020 実はシリョトレの初投稿はソフトバンク。ソフトバンクのスライドは学びの宝庫で、資料作成の教科
【2015年度版】イケてるデザインの国内コーポレートサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはデザイナーの藤田です。 最近、節約のために毎晩の楽しみである晩酌のビールを発泡酒に変えました。 さて、そんな私は最近コーポレートサイトのリニューアルを担当させていただく機会が多く、その際にお客様にリニューアルの方向性として提示させていただく「参考サイト」のストックがたまってきたので、今回のブログでは「イケてるコーポレートサイト」をご紹介したいと思います。 イケてる国内のコーポレートサイトまとめ ハウスウェルネスフーズ株式会社 http://www.house-wf.co.jp/ コーポレートサイトならではの清潔感や見やすさを担保しつつも、ホワイトスペースを十分にとることで、今っぽいデザインになっています。 ヤンマー株式会社 https://www.yanmar.com/jp/ 企業の先進性をデザインで表現しており、今後このようなデザインがコーポレートサイトのスタンダードになるので
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次の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/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
バナーレイアウト20選
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Basic Design Note