CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
ウェブデザインにおけるセマンティック・バージョニング
アプリケーションの世界ではセマンティック・バージョニングが広く受け入れられた……かどうかはわからないが、採用例はすごく増えている印象だ。ウェブデザインではどうかというと、ウェブ・アプリケーションのバージョニングに追随しているだけであったり、そもそもバージョニングされていなかったりするような気がする。ウェブデザイン、主にCSS(とCSSプリプロセッサー)においてセマンティック・バージョニングを導入するとすると、どのようなタイミングでメジャー、マイナーそしてパッチ番号を増やせば良いのだろうか。 セマンティック・バージョニングの中心となる概念は後方互換性だ。後方互換性が: 失われる: メジャー 失われない新機能の追加: マイナー 失われない修正: パッチ 数語でまとめるとこのようになるだろう。ウェブデザインにもこれを当てはめるとすると、ウェブデザインにおける後方互換性とは何なのかということをまず
僕がWEB制作者として必要不可欠だったWEBサービスやツールの厳選まとめ【2013年振り返り版】 | バンクーバーのうぇぶ屋
皆様、新年あけましておめでとうございますっ！ さて、今年も年が明けましたね〜。なんか去年は本当に色々な事があったように思う一方。12ヶ月の内2ヶ月を休暇で過ごしてしまった事もあり、正直サボりの一年だったようにも感じてしまうのが正直な所ですが…。かたや一昨年は学校に合計4ヶ月くらい通って学校ばっかの一年だったし… 『来年本気出すっ！』って言って、全然実現してないダメ人間の典型ですね！ しかし今年こそはちょっと（久々に）本腰入れて自分を追い込もうと思っているプロジェクトがFrog含め幾つかあるため、また一層勉強に仕事に遊びに旅行と、全部思いっきり励んで行きたいなと思っていますのでよろしくお願いします〜。 と、言うわけで早速ですが、今日は僕が去年お世話になりまくったので、2014年も多分お世話になるであろうサイトを、全て片っ端からまとめてみようと思います。 毎回こういうまとめは適当ですが年末年始
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
Webにおいての理想的な行間とは？｜株式会社アクトゼロ｜クリエイティブブログ
おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう！ 今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。 一般的な行間のとり方 一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。 小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。 大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。 そのため、多少行間が狭くても読みやすさに問題は
自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる
ユーザーの目的の内容は、ページの先頭に98ポイントの文字で書かれていた。しかし、彼女はそれを見つけられなかった。そのパネルが静止しておらず、自動送りされていたからである。 Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility by Jakob Nielsen on January 19, 2013 日本語版2013年2月4日公開 先日、イギリスでユーザビリティ調査を実施したのだが、そこで、あるユーザーが「Siemensは洗濯機のキャンペーンをしているか」というタスクを行おうとしていた。 そのユーザーはさして苦労もせず、イギリスのSiemens Appliancesのこのホームページにはたどり着いた： Siemens Appliancesのホームページ どうだろう、そのユーザーは先ほどの課題に答え
All Websites on Siteinspire
A showcase of the world's finest web design.
Webデザイナーが憧れる余白が美しいWebデザイン2012年版
Ambidex 25th Anniversary... / 株式会社 細尾 / mount inc.他...全55件
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
ログインフォーム製作時に個人的に参考にしたいデザインのメモ。
シンプルで柔らかい色合いのログインフォーム。なんと商用利用可能なPSDファイルだそうです。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Free PSD: Elegant Login Form Design | Premium Pixels 2:PSDfreemium 横長タイプのログインフォーム。サインインボタンの位置が右揃えではなく少しはみ出ています。反対側に配置してある「Lost Password?」も少しはみ出ているからバランス良く見えるのかな。 こちらも商用利用可能なPSDファイル。 （＊利用する際は必ずライセンスの確認をご自身でされてください） 参照元： Minimalist Login Form | PSDfreemium 3:wakoopa
Mobile App Gallery｜tappgala.com
Mobile App Galleryは各種アプリのデザインギャラリーサイトです。カテゴリごと、色ごとに分けて分かりやすく表示しています。
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
効果的に「奥行き」をデザインに与えているウェブサイトのまとめ
ウェブデザインにスパイスを効かせる一つの方法に、奥行きを与える、があります。フラットなデザインではなく、エレメントを使って奥行きを作り出します。 そんな奥行きを効果的にとりいれたウェブサイトを紹介します。
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
一味違ったレイアウト&ナビゲーションデザイン集 – creamu
ありきたりのデザインをしたくない。 そんな時に参考になるのが、『Creative and Unusual Layouts and Navigation Designs』。一味違ったレイアウト&ナビゲーションデザイン集です。 特に面白いな、と思ったものをご紹介しますね。 26000 Vodka メニューが浮遊しながら、遠近感のある感じで表示される Sursly 横にスクロールしていくタイプのコンテンツ Lucuma ナビゲーションをクリックすると、画面が横にぐいーっと移動する Okay Dave ローディング後のアニメーションがとても美しいOkay Dave Andreas Smetana スクロールすると、すとんすとん、と画像が切り替わる。マウスオーバー時のアクションも気持ちいい Snuggle Fux レイアウトが斬新なSnuggle Fux Im Design 矢印キーで奥行きのあるイ
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
[CSS]CSS1からCSS3の対応プロパティのチートシート
worldending.jp