æ–°ç€è¨˜äº‹
『フォトショップ・ブイアイピーã€ã®æ–°ç€è¨˜äº‹ã§ã™ã€‚フォトショップやデザインをãŸã®ã—むウェブサイト。2009年３月創刊以æ¥ã€3800を超ãˆã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ›´æ–°ã—ã¦ã„ã¾ã™ã€‚フリーフォントãªã©ã®ç„¡æ–™ãƒ‡ã‚¶ã‚¤ãƒ³ç´ æï¼é…色やWeb制作ã¨ã„ã£ãŸæœ€æ–°ãƒˆãƒ¬ãƒ³ãƒ‰ã‚‚公開ä¸ã€‚
ãªã‚“ã¨ãªãCSSを使ã£ã¦ã„る人ãŒï¼ŒCSSä¸ç´šè€…ã«ãªã‚‹ãŸã‚ã«ã€€ï¼ˆã€Œå´©ã‚Œãªã„レイアウトã€ã®ã‚»ã‚ªãƒªãƒ¼ï¼‰ - 主ã«è¨€èªžã¨ã‚·ã‚¹ãƒ†ãƒ 開発ã«é–¢ã—ã¦
CSSを「ãªã‚“ã¨ãªãã€çŸ¥ã£ã¦ã„ã¦ï¼Œã€Œãªã‚“ã¨ãªãã€ä½¿ã£ã¦ã„る， ã¨ã„ã†ã‚±ãƒ¼ã‚¹ãŒã‚る。 ãã†ã„ã†å ´åˆï¼Œæ€ã‚ã¬ã¨ã“ã‚ã§ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå´©ã‚Œï¼Œ è¦ç´ ã®æ£ç¢ºãªãƒã‚¸ã‚·ãƒ§ãƒ‹ãƒ³ã‚°ãŒã§ããšï¼Œ 「ãªã‚“ã¨ãªãã€ãšã£ã¨æ‚©ã¿ç¶šã‘ã‚‹ã“ã¨ã«ãªã‚‹ã€‚ ãã®åŽŸå› ã¯ï¼ŒCSSã®ä¸ç´šã®ãƒŽã‚¦ãƒã‚¦ãŒè¶³ã‚Šãªã„，ã¨ã„ã†ç‚¹ã«ã‚る。 一発ã§æ£ç¢ºãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒã§ãるよã†ã«ãªã‚ã†ã€‚ ãã†ãªã‚Œã°ï¼ŒCSSä¸ç´šè€…ã 。 以下ã¯ï¼ŒCSSä¸ç´šè€…ã«ãªã‚‹ãŸã‚ã®ãƒŽã‚¦ãƒã‚¦ã€‚ （１） è¦ç´ ã®åˆ†é¡ž （１−１） インラインè¦ç´ ã¨ãƒ–ãƒãƒƒã‚¯è¦ç´ （１−２） ç½®æ›ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³è¦ç´ ã¨éžç½®æ›ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³è¦ç´ （２） æ£ç¢ºãªãƒã‚¸ã‚·ãƒ§ãƒ‹ãƒ³ã‚° （２−１） positionã®relative/absoluteã®ä½¿ã„æ–¹ （２−２） DOCTYPEスイッãƒã«ã‚ˆã‚‹ãƒœãƒƒã‚¯ã‚¹ãƒ¢ãƒ‡ãƒ«ã®è§£é‡ˆæ–¹æ³•ã®é•ã„ （２−３） è¦ç´ 内ã®é«˜ã•ä½ç½®ã¨ï¼Œè¦ç´ ã®é«˜ã• （２−４） floatã®å´©ã‚Œãªã„使ã„æ–¹ （３） æ£ç¢ºãªãƒ†ãƒ¼ãƒ–ルレイ
ウェブデザイナーã¯çŸ¥ã£ã¦ãŠããŸã„ã€ãƒšãƒ¼ã‚¸ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ä»£è¡¨çš„ãª10ã®ãƒ‘ターン
実際ã®ã‚¦ã‚§ãƒ–サイトを例ã«ã€ãšã£ã¨å»ƒã‚Œãªã„ã§ã‚ã‚ã†ãƒšãƒ¼ã‚¸ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®10ã®ãƒ‘ターンã¨ãã®ç‰¹å¾´ã‚’紹介ã—ã¾ã™ã€‚ 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ 2カラムã€åºƒã„ヘッダ 3カラムã€åºƒã„ヘッダ フォーボックス ä¸ç¢ºå®šãªã‚°ãƒªãƒƒãƒ‰ 大ãã„スクリーンショット シングルカラム打ã¡å‡ºã—ç”»åƒ å›ºå®šã‚µã‚¤ãƒ‰ãƒãƒ¼ グリッドベースã®ã‚®ãƒ£ãƒ©ãƒªãƒ¼ マガジンスタイル [ad#ad-2] 2カラムã€åºƒã„ヘッダ ã“ã‚Œã¯æœ€ã‚‚普通ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã¨è¨€ã£ã¦ã‚‚よã„ã§ã—ょã†ã€‚広ã„ヘッダãŒä¸Šéƒ¨ã«ã‚ã‚Šã€960pxã‚’2カラムã«ã—ã€ä¸€ã¤ã¯åºƒãã€ã‚‚ã†ä¸€ã¤ã¯ç‹ãã—ãŸã‚‚ã®ã§ã™ã€‚ç‹ã„æ–¹ã¯ã‚µã‚¤ãƒ‰ãƒãƒ¼ã§ãƒŠãƒ“ゲーションãªã©ãŒè¨ç½®ã—ã¦ã‚ã‚Šã¾ã™ã€‚ 慣習的ã«ã€ãƒ–ãƒã‚°ã§ã¯åºƒã„æ–¹ã®å³ã«ãƒŠãƒ“ゲーションを置ãã€ã‚¹ã‚¿ãƒ†ã‚£ãƒƒã‚¯ãªã‚µã‚¤
９．売れるランディングページデザインã®ï¼‘ï¼ã®ç‰¹å¾´
ランディングページã®ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã€ã‚¤ãƒ³ã‚¿ãƒ¼ãƒãƒƒãƒˆã®æŠ€è¡“ã®å‘上ã«åˆã‚ã›ã¦å¤‰é·ã—ã¦ã„る。ãã‚Œã«ä¼´ã„ã€é«˜ã„コンãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚’見込ã‚るレイアウトもã€ã‚ã¾ãã‚‹ã—ã変ã‚ã£ã¦ã„る。 ã—ã‹ã—ã€çµå±€ã€ã©ã®ãƒ“ジãƒã‚¹ã‚‚最終的ã«ã¯ä¼¼é€šã£ãŸãƒ‡ã‚¶ã‚¤ãƒ³/レイアウトã«è½ã¡ç€ã„ã¦ã„ã。 ãªãœãªã‚‰ã€çµæžœã‚’出ã™ãƒ©ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãƒšãƒ¼ã‚¸ãƒ‡ã‚¶ã‚¤ãƒ³/レイアウトã«ã¯ã€ã‚る一定ã®ãƒ«ãƒ¼ãƒ«ã®ã‚ˆã†ãªã‚‚ã®ãŒå˜åœ¨ã™ã‚‹ã‹ã‚‰ã 。ãã—ã¦ã€ãã®ãƒ«ãƒ¼ãƒ«ã«å‰‡ã£ã¦ãƒ©ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãƒšãƒ¼ã‚¸ã‚’作るã¨ç°¡å˜ã«é«˜ã„æ•°å—ãŒå‡ºã›ã‚‹ã€‚ ã¤ã¾ã‚Šã€ã‚¼ãƒã‹ã‚‰ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’考ãˆã‚‹ã®ã§ã¯ãªãã€æ—¢ã«çµæžœãŒå‡ºã‚‹ã“ã¨ãŒè¨¼æ˜Žã•ã‚Œã¦ã„ã‚‹æˆæžœä¿è¨¼æ¸ˆã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„デザインを使ã†æ–¹ãŒã€é¥ã‹ã«ç°¡å˜ã§çµæžœãŒå‡ºã‚„ã™ã„ã®ã 。 ãã“ã§ã€è¿‘å¹´éžå¸¸ã«è‰¯ã見られるランディングページã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ/デザインをインフォグラフィックã§ã”紹介ã™ã‚‹ã€‚ 拡大表示ã¯ã“ã¡ã‚‰ 出典：http://www.formstack.com/the-anatomy-
レスãƒãƒ³ã‚·ãƒ–webデザインã§åˆ¶ä½œã™ã‚‹æ™‚ã®ãƒã‚¤ãƒ³ãƒˆ
先日ã€CSS Nite in Ginza, Vol.59「Dreamweaverã«ã‚ˆã‚‹ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–Webデザインã®å®Ÿè£…ã€ã«å‡ºå¸ã—ã¦ãã¾ã—ãŸã€‚ ã¨ã¦ã‚‚勉強ã«ãªã£ãŸã®ã§å¾©ç¿’ã‚‚å…¼ãã¦ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–webデザインã«é–¢ã—ã¦ã€ã‚»ãƒŸãƒŠãƒ¼ã§å¦ã‚“ã 内容ã«è‡ªåˆ†ã®èª¿ã¹ãŸç‚¹ã‚’åŠ ãˆã¦ã¾ã¨ã‚ã¾ã™ã€‚ （一部ã®å›³ã¯ã‚»ãƒŸãƒŠãƒ¼ã®è³‡æ–™ã‚’å…ƒã«ä½œæˆã—ã¦ã¾ã™ã€‚） 始ã‚ã«ï¼šã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆåˆ¶ä½œã®é¸æŠžè‚¢ スマートフォンサイトを制作ã™ã‚‹ã«ã¯å¹¾ã¤ã‹ã®æ–¹æ³•ãŒã‚ã‚Šã¾ã™ã€‚ アプリ 独自系 スクラッãƒï¼ˆ0ã‹ã‚‰ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆç”¨ã«æ§‹ç¯‰ï¼‰ jQuely mobileを使用 æµç”¨ç³» ç¾åœ¨ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’ã»ã¼æµç”¨ã€èª¿æ•´ã®ã¿ レスãƒãƒ³ã‚·ãƒ–・デザイン ã©ã®æ–¹æ³•ã«ã‚‚メリットデメリットã¯ã‚ã‚Šã€ã©ã‚ŒãŒæœ€é©ã‹ã¯ サイトã®ã‚³ãƒ³ã‚»ãƒ—トやè¦æ¨¡ã€äºˆç®—ãªã©è¤‡åˆçš„ã«è€ƒãˆã¦é¸æŠžã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ 今回ã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã§ã¯ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–・デザインã®ã¿ã«ãµã‚Œã¾ã™ã€‚ レスãƒãƒ³ã‚·ãƒ–webデザ
è¦ç´ をレンガ風ã«é…列ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト・jQuery Masonryã§ã€é…列ã•ã›ã‚‹è¦ç´ を下æƒãˆã«ã™ã‚‹ - ã‹ã¡ã³ã¨.net
è¦ç´ をレンガ風ã«é…列ã™ã‚‹jQueryプラグイン ã®Masonryã§ã€è¦ç´ を下æƒãˆã«é…置出æ¥ã‚‹ã‚ˆ ã†ã«ã—ãŸã„ã€ã¨ã„ã†å†…容ã§ã™ã€‚オプション é …ç›®ã‚’è¿½åŠ ã—ã¦ã‚ªãƒ³ã‚ªãƒ•ã‚’出æ¥ã‚‹ã‚ˆã†ã«ã‚«ã‚¹ タマイズã—ã¾ã™ã€‚下æƒãˆã«ã™ã‚‹æ©Ÿä¼šãŒã‚ã‚‹ã‹ ã©ã†ã‹ã¯ç½®ã„ã¨ã„ã¦ï½— jQuery Masonryã¨ã„ã†ã®ã¯è¦ç´ を時系列を崩ã•ãšã«é…列ã•ã›ã‚‹äº‹ãŒå¯èƒ½ãªjQueryã®ãƒ—ラグインã§ã™ã€‚以å‰å°‘ã—記事書ã„ãŸã®ã§åˆã‚ã›ã¦ã”覧下ã•ã„。 ボックスè¦ç´ を綺麗ã«æ•´åˆ—出æ¥ã‚‹jQueryプラグイン・jQuery Masonryã«Infinite Scroll（無é™ã‚¹ã‚¯ãƒãƒ¼ãƒ«ï¼‰æ©Ÿèƒ½ã‚’åŠ ãˆãŸã‚µãƒ³ãƒ—ル ã”覧ã®é€šã‚Šãƒ†ã‚ストコンテンツã¨ã¯éžå¸¸ã«ç›¸æ€§ãŒæ‚ªãã€é€šå¸¸ã®ãƒ–ãƒã‚°ã‚„Webサイトã§ã¯ã»ã¼ä½¿ã„ã©ã“ã‚ãŒçš†ç„¡ãªãƒ—ラグインã§ã™ãŒã€å€‹äººçš„ã«ã¯ã‚®ãƒ£ãƒ©ãƒªãƒ¼ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ä½œæˆæ©Ÿä¼šãŒå¤šã„ã®ã§å¤šå°‘調ã¹ã‚‹æ©Ÿä¼šãŒå¤šã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 ã“ã‚“ãªæ„Ÿã˜ã§ä¸‹æƒãˆã«ã—ã¾ã™ã€‚ã¾ããã‚“ã ã‘ãª
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}