Click here to enter
タグ
- すべて
- .emacs (8)
- .htaccess (10)
- 2007PHPカンファレンス (7)
- 24 (10)
- ATOK (19)
- Amazon EC2 (36)
- AngularJS (30)
- BCP (8)
- CI (31)
- CMS (24)
- CSRF (9)
- CSS3 (87)
- CentOS (18)
- Chef (55)
- CircleCI (13)
- CodeIgniter (7)
- DNS (16)
- Designer (8)
- DynamoDB (17)
- Electron (11)
- ErgoDox (21)
- Flex (37)
- FuelPHP (48)
- GAE (8)
- GPS (27)
- GREE (8)
- GTD (48)
- GitHub (97)
- Google App Engine (27)
- Google Apps (32)
- Google Chart (9)
- Google Docs (18)
- Google Reader (16)
- Greasemonkey (11)
- GrpMail (7)
- HA (7)
- HDD (15)
- Hubot (11)
- IDE (7)
- IE (68)
- IP Phone (13)
- IoT (13)
- JSON (22)
- KVM (9)
- KVS (14)
- Keyboard (50)
- LTSV (8)
- LVS (7)
- MacBook Pro (10)
- MacPorts (13)
- MeCab (11)
- Money (11)
- MongoDB (29)
- NAS (14)
- NoSQL (10)
- OAuth (48)
- OSS (38)
- OpenID (43)
- PDF (44)
- PDO (8)
- PEAR (54)
- PHPUnit (13)
- PaaS (7)
- Pager (17)
- Photoshop (35)
- Plagger (9)
- Plugin (66)
- Postfix (27)
- PostgreSQL (36)
- PowerPoint (14)
- RC (8)
- RIA (10)
- RTM (10)
- Raspberry Pi (22)
- Red Hat (7)
- Redmine (43)
- S3 (46)
- SEO (13)
- SIP (7)
- SMTP-AUTH (7)
- SNS (32)
- SPF (7)
- SQL (14)
- SQLインジェクション (10)
- SSD (19)
- ST2 (31)
- SaaS (49)
- Salesforce (22)
- SmartPhone (99)
- SnowLeopard (13)
- TDD (35)
- TEST (114)
- ToDo (25)
- UI (197)
- UML (8)
- USB (9)
- UTF-8 (18)
- UX (42)
- UnitTest (16)
- VMware (32)
- VPN (24)
- VPS (20)
- VirtualBox (8)
- Vue.js (15)
- WAF (7)
- WYSIWYG (8)
- WebFile (217)
- Wi-Fi (18)
- XHTML (12)
- XSS (20)
- Xcode (35)
- YouTube (15)
- Zen-Coding (15)
- actionscript (17)
- ad (20)
- adobe (35)
- agile (52)
- air (89)
- ajax (249)
- alfred (8)
- amazon (43)
- android (206)
- apache (176)
- api (176)
- app (90)
- apple (27)
- apps (8)
- atom (10)
- auth (16)
- authentication (33)
- aws (239)
- backbone.js (20)
- backup (36)
- bag (7)
- balancer (7)
- bash (10)
- blog (67)
- bluetooth (76)
- book (222)
- bookmark (12)
- bookmarklet (37)
- bootstrap (49)
- bot (12)
- brew (9)
- bug (11)
- business (1261)
- button (34)
- cache (11)
- cacti (9)
- cakephp (179)
- calendar (45)
- camera (21)
- canvas (11)
- capistrano (10)
- capture (10)
- car (40)
- cart (7)
- chat (7)
- chatter (14)
- cheat sheet (32)
- chrome (122)
- cli (8)
- clipart (12)
- clipboard (8)
- cloud (124)
- cluster (16)
- coffee (20)
- coffeescript (28)
- color (45)
- command (10)
- config (18)
- cookie (12)
- cron (8)
- css (330)
- csv (8)
- database (25)
- db (35)
- debug (33)
- dell (13)
- deploy (24)
- design (99)
- designpattern (8)
- developer (249)
- development (45)
- diff (15)
- display (50)
- docker (94)
- docomo (17)
- document (21)
- download (10)
- dropbox (23)
- dvd (8)
- earthquake (7)
- ebook (20)
- ec2 (22)
- eclipse (32)
- editor (22)
- elb (10)
- elisp (11)
- emacs (291)
- emobile (11)
- english (63)
- es (13)
- event (28)
- evernote (71)
- excel (26)
- ext (7)
- extension (154)
- facebook (84)
- favicon (19)
- file (16)
- firebug (16)
- firefox (168)
- fireworks (7)
- fish (12)
- flash (57)
- flickr (13)
- font (108)
- form (84)
- framework (85)
- free (12)
- gadget (363)
- game (20)
- generator (93)
- git (222)
- gmail (50)
- go (20)
- google (128)
- google analytics (21)
- google calendar (13)
- google gears (14)
- google map (35)
- graph (40)
- groupware (8)
- growl (31)
- hack (26)
- hadoop (13)
- hatena (12)
- heroku (12)
- homebrew (21)
- hook (13)
- hp (7)
- html (101)
- html5 (184)
- http (30)
- iBeacon (8)
- iCal (7)
- iOS (88)
- iPad (181)
- iPhone (569)
- iPhoneSDK (10)
- iPod (25)
- iTunes (26)
- icon (167)
- image (79)
- imagemagick (12)
- ipod touch (16)
- iscsi (8)
- iterm (8)
- jQuery (526)
- java (19)
- javascript (484)
- jenkins (36)
- keynote (18)
- kindle (7)
- kp (10)
- kubernetes (8)
- laravel (25)
- layout (12)
- ldap (14)
- lean (8)
- leopard (11)
- library (98)
- life (29)
- lifehack (259)
- lightbox (13)
- linux (146)
- livedoor (10)
- livedoor Reader (7)
- loadbalancer (10)
- loading (7)
- log (28)
- logo (16)
- lrsync (7)
- mac (709)
- mail (87)
- management (22)
- manual (7)
- map (21)
- maple (11)
- markdown (28)
- marketing (21)
- mashup (11)
- material (91)
- math (7)
- mbstring (9)
- memcached (15)
- menu (28)
- mercurial (14)
- microsoft (13)
- milter (10)
- mindmap (15)
- mixi (30)
- mobile (272)
- mochikit (8)
- mod_proxy_balancer (11)
- mod_rewrite (17)
- module (8)
- mosh (7)
- movie (69)
- music (20)
- mysql (349)
- network (98)
- nginx (60)
- node (131)
- nozbe (10)
- objective-c (72)
- office (210)
- opera (16)
- oracle (10)
- pamps (15)
- parallels (10)
- paypal (11)
- performance (132)
- perl (34)
- phonegap (7)
- photo (8)
- php (894)
- php5 (24)
- picture (58)
- piece (20)
- podcast (14)
- program (12)
- programming (114)
- project (23)
- prototype.js (25)
- proxy (32)
- push (10)
- python (22)
- queue (8)
- rails (77)
- react (16)
- redis (14)
- remotework (62)
- replication (21)
- responsive (27)
- rest (17)
- retina (11)
- rss (43)
- ruby (97)
- safari (33)
- samba (9)
- sass (12)
- scalability (9)
- scansnap (12)
- scraping (7)
- screen (35)
- screencast (14)
- screenshot (9)
- script (7)
- script.aculo.us (13)
- scrum (8)
- security (301)
- selenium (19)
- server (250)
- session (18)
- shell (22)
- sketch (8)
- skype (33)
- slack (36)
- smarty (22)
- snippet (9)
- socialapp (9)
- socialgame (8)
- softbank (21)
- software (296)
- sony (49)
- spam (8)
- ssh (52)
- ssl (38)
- sso (9)
- storage (130)
- subversion (89)
- svk (9)
- swift (19)
- symfony (35)
- table (23)
- tag (13)
- template (59)
- terminal (9)
- theme (51)
- thumbnail (15)
- thunderbird (9)
- timemachine (9)
- tips (8)
- titanium (90)
- tmux (23)
- tool (38)
- trac (27)
- tumblr (15)
- tunning (15)
- twitter (243)
- ubuntu (47)
- upload (78)
- vagrant (28)
- vaio (7)
- validation (28)
- venture (76)
- vim (18)
- vpc (9)
- w-zero3 (41)
- wallpaper (34)
- watch (8)
- web (79)
- web design (495)
- web2.0 (69)
- webdav (10)
- webservice (537)
- websocket (36)
- webアプリ (38)
- wii (8)
- wiki (11)
- willcom (9)
- windows (89)
- windows統合認証 (7)
- wordpress (141)
- xen (7)
- xml (10)
- xperia (14)
- yahoo (22)
- yahooUI (18)
- yaml (10)
- yui (9)
- zend (14)
- zfs (10)
- zip (17)
- zsh (95)
- あとで行く (32)
- うどん (11)
- はてブ (34)
- まとめ (42)
- ガンダム (28)
- ガントチャート (8)
- グルメ (38)
- サムネイル (9)
- サーバ管理 (7)
- サービス (13)
- ツール (14)
- ツールチップ (7)
- テンプレート (7)
- デザイン (21)
- ネタ (211)
- フリーソフト (9)
- ブラウザ (57)
- プレゼン (50)
- プロジェクト管理 (12)
- ヘッドセット (10)
- ライブラリ (13)
- リンク集 (10)
- 事件 (11)
- 仕事術 (8)
- 会社 (7)
- 便利 (17)
- 全文検索 (26)
- 写真 (9)
- 動画 (12)
- 多守 (13)
- 年収 (8)
- 採用 (39)
- 携帯 (9)
- 文字コード (22)
- 文字化け (15)
- 文房具 (29)
- 旅行 (9)
- 暗号 (22)
- 楽天 (14)
- 正規表現 (15)
- 物欲 (154)
- 画像 (35)
- 監視 (18)
- 着メロ (7)
- 管理 (23)
- 素材 (15)
- 給与 (21)
- 統計 (8)
- 自炊 (13)
- 英語 (7)
- 製品 (16)
- 調査 (9)
- 負荷分散 (12)
- 資料 (31)
- 運用 (16)
- 開発 (21)
- 開発合宿 (12)
- 面接 (13)
- business (1261)
- php (894)
- mac (709)
- iPhone (569)
- webservice (537)
- jQuery (526)
- web design (495)
- javascript (484)
- gadget (363)
- mysql (349)
menuとresponsiveに関するbigwestのブックマーク (2)
-
bigwest 2013/10/02
- javascript
- menu
- responsive
リンク -
CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方
こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。 作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。 注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx