ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
YUKI HARUYAMA Portfolio Site | 春山 有由希
春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル（現ラクマ）のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE
[CSS]背景画像をページの最下部に固定表示させるスタイルシート
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea>
テーブルやリストを使用した価格表のデザイン集
プロダクトやサービスを販売しているサイトにとって非常に重要な価格表のデザイン集を1st Web Designerから紹介します。 40 Fantastic Pricing Tables for Your Inspiration 価格表はその設計を決しておろそかにするものではなく、直観的で使いやすく、ユーザーに最も重要な情報を提供する非常に重要なコンテンツです。 上記サイトでは、シンプルなテーブルからフューチャーリストなど優れた手段で価格表を提供しているサイトが多数紹介されています。 その中から、下記にいくつかピックアップしました。 傾向としては、ページ幅いっぱいに配置し、お勧めを目立つようにしています。
FireworksがWebデザインに向いているポイント6つ - EC studio デザインブログ
みなさんはデザインをするとき、どのソフトを使っていますか? きっと多くの方はPhotoshopやIllustratorを使っていると思います。 私もEC studioに入るまではそうでした。 しかし、今は違います。 PhotoshopやIllustratorではなく、Fireworksをメインに使っています。 EC studioのサイトページは主にFireworksでつくられているため 始めはPhotoshopの方が使いやすいな」と思いながら、 すすめられるままFireworksを使っていました。 でも、1ヵ月もしないうちにPhotoshop派からFireworks派に乗り換えました。 今ではFireworksがないとWebデザインの作業が進まないほどです。 今日はそんなFireworksの良さをご紹介したいと思います。 【10月18日 ポイントを2つ追加しました。】 Fireworksが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
