Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
Free Templates on Speckyboy Design Magazine
Browse a wide selection of free templates for all your design needs, from web to print, ensuring your projects impress.
「ソリッド」を使った今時のWebデザインの作り方がかっこいいUIキット・ページレイアウトのまとめ
ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテンプレート。100MB超えのPSDがダウンロードできます。
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
レスポンシブ対応でPCとスマホで違う画像を使う
先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。 LateCalc（電卓） - Google Play の Android アプリ なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。 さて、今回は久々にCSS関連なエントリーです。 ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね... そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。 レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
This Is Responsive | Patterns and Resources for Responsive Web Design
This Is Responsive. Patterns and resources for creating responsive web experiences.
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
厳選！縦長なサイトデザイン8選 one page scroll
twitter facebook hatena google pocket 昨今あふれんばかりに登場する縦長なサイト。 独断と偏見で気になったものを8個選んでみました。 sponsors Bench -- Online Bookkeeping Services https://bench.co/ オーソドックスな感じなやつですね。 Tectonica Studios http://www.tectonica.co 王道系でイラストベース。下の方に動きも取り入れていて面白いです。 TOMOYAARTS http://www.tomoyaarts.com/ 細かく要素に効果を与えていて、大きくシーンが変わらないので落ち着いて見られます。 Études N°4 http://etudes-studio.com/store/ 画像がどん！その後は商品が画像サイズばらばらで登場してきます。 Pasc
そろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。
ブログを書けって大先生に怒られたので、仕事も落ち着いてきたんで以前から書きたかった事でも。 今更なネタなんですけど、「Sassの教科書で一番読んで欲しいところ。はこちら」みたいな感じで、「こちら」にだけリンクになってるケースがいまだに結構多くて、色々な面でよろしくないので、そろそろやめません？と。 普段から使っていると、「こちら」以外の文言がパッと浮かばない場合なんかも有りますし、コーダー的には下手に文言を変更して色々言われるのが面倒的な理由も有るので、その場合は、こちらも含めてリンクにするのがよろしいかと。 例えば、 製品の詳細はこちら ↓ 製品の詳細はこちら って感じですね。 んでは、「何で、こちらにだけリンクするのは良くないの？」的な部分を色んな視点から書きたいと思います。 アクセシビリティ的な理由から これが一番な理由になるかもですが、前後の文脈から読み取らないとリンク先が分からな
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高級感のある配色やデザインを作るコツまとめ
ウェブデザインのセンスを磨こう！ 2013年洗練されたディテールのUIデザインのまとめ
Loading...
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
http://cosao.net/archives/4331
jQueryを使ったパンくずリスト - jsdo.it - Share JavaScript, HTML5 and CSS