【2020年総まとめ】WebデザインギャラリーS5-Styleで秀逸だった国産サイト｜田渕 将吾 (Shogo Tabuchi)
S5-Styleでは2020年に659件ものサイトを更新させていただきました。この記事では、その中でも特に素敵なサイトを国産限定に絞ってまとめさせていただきました！ そして、記事の最後に2020年の秀逸サイトを筆者の観点で3つ選んでいます。ぜひ最後までご覧ください。 S5-Styleとは、通算8,000弱におよぶハイクオリティなWebサイトを毎日キュレーションしているWebデザイナーのためのギャラリーサイトです。 選定基準としましては、Webデザインやクリエイティビティの観点で良質だと思ったものを選ばせてもらいました。企業や商材の良し悪しは考慮していません。 そして、優秀なプロダクションの認知を広げていきたいという想いで、制作したクリエーターのクレジットも掲載させていただいております。もしクレジットの申告・修正依頼があればとても助かります。是非ご連絡ください。 --- それでは、まずこちら
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
ウェブデザインの文章レイアウト組みパターンを展開してみる | バニデザノート
ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
sakutto
NEWSニュースリリース 2014年11月26日 ｢トップページ｣に使える資料(PART2)を計32点追加いたしました！ 2014年11月12日 ｢トップページ｣に使える資料を計32点追加いたしました！ 2014年11月07日 お役立ち資料『フィーチャーフォンサイトのコーディング規約』を追加いたしました！ 2014年11月05日 ｢商品｣の詳細ページに使える資料を計24点追加いたしました！ 2014年10月31日 お役立ち資料『フィーチャーフォンサイトのデザイン規約』を追加いたしました！ 2014年10月24日 お役立ち資料『PCサイトのコーディング規約』を追加いたしました！ 2014年10月22日 ｢クーポン｣の詳細ページに使える資料を計24点追加いたしました！ 2014年10月17日 お役立ち資料『PCサイトのデザイン規約』を追加いたしました！ 2014年10月15日 ｢クーポン｣のペ
CSS Flexible Box （Flexbox） を使ってみよう - 最新仕様対応版 | WWW WATCH
スクリーンサイズや可変するウィンドウサイズなどに柔軟に対応するレイアウトが可能な CSS Flexible Box について、最新の W3C 仕様に基づいた解説をサンプルソースを使いながらやってみます。 CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。 CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
櫻田潤 | インフォグラフィック・エディター
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
レイアウトの視点から考える、伝わるプレゼン資料の構成要素（追記あり） ｜プレゼンデザイン
シンプルな「表紙」 表紙はシンプルに。具体的には≪タイトル≫と≪CI（コーポレートアイデンティティ。ロゴマーク、提供者名）≫を記載しましょう。原則、これだけあれば十分です。顧客名や作成日は、そのときどきに応じて。 提案書や企画書で大切なのは、何よりも中身。といっても実際には諸処の事情が関係することはもちろんですが、やはり表紙のイラスト・写真選びに時間を費やすよりも、コンテンツを練り込むことに注力したいものです。 章立ての切り替わりを印象づける「目次」 目次は、資料の内容を一覧化して全容を示すほかにも、大切な役割があります。それは≪読み手を安心させる効果≫と≪トピックを切り替える機能≫です。 前者は、普通に目次を書きさえすれば、その恩恵を得ることができます。人は、先の分からない道を進み続けることに不安を感じる生き物です。つまり、冒頭部で資料の全容を知らせることにより、読み手に安心して資料を読
プレゼン資料を読みやすくする３つの方法｜PowerPoint Design
この記事は2012年03月17日時点の情報に基づいて書かれています。情報が一部古くなっている場合があるためご注意ください。 文章の読みやすさは、デザイン・レイアウトの見せ方で変わります。例えば「書体」・「行間」・「見出し」、それぞれのバランスの取り方で、文章は読みやすくも読みにくくもなります。ここでは上記３つの観点から、文章を読みやすく記載する方法について紹介します。 書体を選ぶ 文章の読みやすさを考える上で、書体は重要な検討の要素です。目的に応じた書体を利用することで、伝えたい内容をより正確に・より自然に伝えることができるようになります。 プレゼン資料では「ゴシック体」を使う 日本語の代表的な書体といえば「ゴシック体」と「明朝体」です。ゴシック体は、縦と横のラインの幅がほぼ等しく、明朝体は縦のラインに対して横のラインが 細いのが特徴。一般的にゴシック体は可視性の高い書体（瞬時に認識しやす
提案書・企画書作成に役立つ「レイアウト」の基礎知識 ｜プレゼンデザイン
「提案書をキレイに書きたいが、うまくまとまらない」、「せっかくテンプレートを買ったのに、使いこなせずにいる。。」それはひょっとしたら『レイアウト』の知識が不足しているのかもしれません。レイアウトの基礎をおさえるだけで、プレゼン資料のビジュアル・伝わりやすさは、ぐっと変わります。この記事では、グラフィックデザインやDTPにおけるレイアウトのテクニックを、プレゼン資料に役立つものに絞り、「整列・余白・分割・反復」の4つの観点から紹介します。 整列（揃える） 整列とは、スライドを整理するテクニックです。「タイトル」や「見出し」、「画像」といった要素を互いに揃えることで、ビジュアルと情報の両方を整理します。整列がゆきとどいた資料は、見た目にカッコ良いだけでなく、論理的にも整えられ、読み手にすっと理解してもらうことができます。 揃えるポイントは「端」と「中心」 うまく揃えるポイントは、要素の「端」と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」