HTML5 × CSS3 × jQueryを真é¢ç›®ã«å‹‰å¼· – #16 レスãƒãƒ³ã‚·ãƒ–Webデザインã§ãƒ†ãƒ¼ãƒ–ルを最é©åŒ–ã™ã‚‹ãƒ™ã‚¹ãƒˆãƒ—ラクティス | DevelopersIO
dislay 属性ã«ã¤ã„ã¦ã‚‚ã£ã¨çŸ¥ã‚ŠãŸã„ã¨ã„ã†æ–¹ã¯ã€ã“ã¡ã‚‰ã®ã‚µã‚¤ãƒˆã‚’å‚ç…§ãã ã•ã„。 display - CSS | MDN è¦ã™ã‚‹ã«ä½•ãŒè¨€ã„ãŸã„ã‹ã¨ã„ã†ã¨ã€ãƒ†ãƒ¼ãƒ–ルもã¾ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã® display 属性ã«ã‚ˆã£ã¦ãã®å½¢çŠ¶ã‚’実ç¾ã—ã¦ã„ã‚‹ã«éŽãŽãšã€ã“ã®å€¤ã‚’色々ã¨æ“作ã™ã‚Œã°ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã®ã‚ˆã†ãªã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã®ç‹ã„環境ã«ã‚‚最é©åŒ–ã•ã‚ŒãŸè¡¨ç¤ºãŒå‡ºæ¥ã‚‹ã®ã§ã¯ãªã„ã‹ã¨ã„ã†ã“ã¨ã§ã™ã€‚ 実際ã«ä½œã£ã¦ã¿ãŸ - 下準備 今回ã¯4パターンã®è¡¨ç¤ºã‚’紹介ã—ã¾ã™ã€‚ã¾ãšã¯ä¸‹æº–å‚™ã¨ã—ã¦ç°¡å˜ãªãƒ†ãƒ¼ãƒ–ルレイアウトã¨å…ƒã¨ãªã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚’組んã§ã„ãã¨ã—ã¾ã™ã€‚ ã¯ã˜ã‚ã« HTML ã§é©å½“ãªãƒ†ãƒ¼ãƒ–ルを作りã¾ã™ã€‚ <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
æ–‡ç« ã®ä½œã‚Šæ–¹ - ä¼ã‚るデザイン ç ”ç©¶ç™ºè¡¨ã®ãƒ¦ãƒ‹ãƒãƒ¼ã‚µãƒ«ãƒ‡ã‚¶ã‚¤ãƒ³
ç ”ç©¶è€…ã‚„ç ”ç©¶ã«é–¢ã‚る大å¦ç”Ÿã‚„大å¦é™¢ç”Ÿã¯ã€ä¸€å¹´ã‚’通ã˜ã¦ç ”究室ゼミやå¦ä¼šãªã©ã§ç ”究æˆæžœã®ç™ºè¡¨ã‚’è¡Œãªã‚ãªã‘ã‚Œã°ãªã‚Šã¾ã›ã‚“。ã¾ãŸã€è¿‘å¹´ã€ç§‘å¦è€…ã§ãªã„人ãŸã¡ã«å¯¾ã™ã‚‹ä¸€èˆ¬å‘ã‘ã®ãƒ—レゼンや講演（アウトリーãƒæ´»å‹•ï¼‰ã®æ©Ÿä¼šã‚‚増ãˆã¦ãã¦ã„ã¾ã™ã€‚ä»–ã«ã‚‚ã€ç ”ç©¶è«–æ–‡ã‚„å ±å‘Šæ›¸ã‚’æ›¸ã„ãŸã‚Šã€ç ”究費調é”ã®ãŸã‚ã«äºˆç®—申請書やプãƒã‚¸ã‚§ã‚¯ãƒˆã®æ案書を作æˆã—ãŸã‚Šã™ã‚‹ã“ã¨ã‚‚ã€ç ”究者ã«ã¨ã£ã¦æ¬ ã‹ã›ãªã„仕事ã§ã™ã€‚ã“れらã¯ã„ãšã‚Œã‚‚æƒ…å ±ã‚’ä»–è€…ï¼ˆç ”ç©¶ä»²é–“ã‚„å¯©æŸ»å“¡ã€ä¸€èˆ¬å¸‚民）ã¸ä¼ãˆã‚ˆã†ã¨ã™ã‚‹è¡Œç‚ºã§ã‚ã‚Šã€æ£ç¢ºã‹ã¤åŠ¹æžœçš„ãªæƒ…å ±ã®ç™ºä¿¡ãŒæœ›ã¾ã‚Œã¾ã™ã€‚ã—ã‹ã—ã€è‡ªå·±æµã§è³‡æ–™ã‚’作æˆã—ã¦ã€é—‡é›²ã«æƒ…å ±ã‚’ç™ºä¿¡ã—ã¦ã„ã¦ã‚‚ã€ã‚¹ãƒ ーズã«æƒ…å ±ã¯ä¼ã‚ã‚Šã¾ã›ã‚“。ã¨ãã«ã¯èª¤ã£ãŸæƒ…å ±ãŒä¼ã‚ã£ã¦ã—ã¾ã„ã€ç ”究ã®ä¾¡å€¤ã‚’æ£å½“ã«è©•ä¾¡ã—ã¦ã‚‚らãˆãªã„ã“ã¨ã•ãˆèµ·ã“ã‚Šãˆã‚‹ã®ã§ã™ã€‚ æƒ…å ±ã‚’æ£ç¢ºã«ã‹ã¤ã‚¹ãƒ ーズã«ä»–者ã«ä¼ãˆã‚‹ãŸã‚ã«ã¯ã€æƒ…å ±ã‚’ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ã“ã¨ã€ã¤ã¾ã‚Šæ–‡ç« ã‚’èªã¿ã‚„ã™ãæ•´ãˆãŸã‚Šã€å›³è¡¨ã‚’見やã™ã
第一回 プãƒã‚°ãƒ©ãƒžå‘ã‘デザイン勉強会 #design4p ã§ã€Œã‚ºãƒ«ã„デザインテクニックã€ç™ºè¡¨ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ - ç´è±†ã«ã¯åµã‚’入れる派ã§ã™ã€‚
ã©ã†ã‚‚。 書ãã®ãŒé…ããªã‚Šã™ãŽã¦ã‚‚ã†åŠæœˆã»ã©ã‚‚å‰ã®ã“ã¨ã«ãªã£ã¦ã™ã”ã今更感ãŒã‚ã‚‹ã®ã§ã™ãŒã€æ›¸ã„ã¦ãŠãã¹ãã“ã¨ã‚’書ããã³ã‚Œã‚‹ã¨ã€ãã®å¾Œå‡ºã¦ãã‚‹ä»–ã®æ›¸ããŸã„å°ãƒã‚¿ãŒã©ã‚“ã©ã‚“書ã‘ãªããªã£ã¦ã„ã£ã¦ãƒ‰ãƒ³ã¥ã¾ã‚‹ãƒ‘ターンã«ãªã‚‹ã®ã§ã€ã‚„ã¯ã‚Šæ›¸ã„ã¦ãŠãã¾ã™ã。。 先日ã€ç¬¬ä¸€å›ž プãƒã‚°ãƒ©ãƒžå‘ã‘デザイン勉強会ã¨ã„ã†ã‚¤ãƒ™ãƒ³ãƒˆã§ä¸‹è¨˜ã®ã‚¹ãƒ©ã‚¤ãƒ‰ç™ºè¡¨ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ å°‘ãªã„手間ã¨çŸ¥è˜ã§ãã‚Œãªã‚Šã«è¦‹ã›ã‚‹ã€ã‚ºãƒ«ã„デザインテクニック// Speaker Deck å響ã®å¤§ãã•ã«é©šãï¼ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã—ãŸã€‚ 実ã¯ã‚ã‚“ã¾ã‚Šç™ºè¡¨è‡ªä½“ã¯ã€ç››ã‚Šä¸ŠãŒã£ãŸã¨ã„ã†æ‰‹å¿œãˆãŒã‚ã¾ã‚Šãªãã¦ã€ä¸€æ–¹ã§ä»–ã®2人ã®ç™ºè¡¨ãŒç´ 晴らã—ã™ãŽã¦ã€å‰²ã¨ã—ょんã¼ã‚Šã—ãªãŒã‚‰å¸°ã£ã¦ããŸã‚“ã§ã™ãŒã€ã‚¹ãƒ©ã‚¤ãƒ‰ã‚’アップãƒãƒ¼ãƒ‰ã—ãŸã‚‰ã‚れよã‚れよã¨ã„ã†é–“ã«2000ブクマ超ãˆâ€¦é©šãã¾ã—ãŸã€‚èªã‚“ã§ä¸‹ã•ã£ãŸçš†æ§˜ã€ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã—ãŸã€‚何ãŒåŽŸå› ã ã£ãŸã®ã‹è€ƒãˆã¦ã¿ãŸã®ã§ã™ãŒã€ãƒ‡ã‚¶ã‚¤ãƒ³
ウェブデザインãŒè‹¦æ‰‹ãªãƒ—ãƒã‚°ãƒ©ãƒžãƒ¼ãŸã¡ã¸ã€ŒXHTML+CSSデザイン 基本原則ã€ã“ã‚Œã ã‘。〠- elm200 ã®ãƒŽãƒžãƒ‰ã§è¡Œã“ã†ï¼
ç§ã¯ã‚¦ã‚§ãƒ–デザインãŒã§ããªã„プãƒã‚°ãƒ©ãƒžãƒ¼ã§ã‚る。以å‰ã¯ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã•ã‚“ã«ä»»ã›ã¦ãŠã‘ã°è‰¯ã„ã¨æ€ã£ã¦ã„ãŸã€‚ã ãŒã€è€ƒãˆã¦ã¿ã‚‹ã¨ã€ã‚ã‚Œã‚ã‚Œã¯ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã•ã‚ŒãŸã‚‚ã®ã—ã‹ç›®ã«ã™ã‚‹ã“ã¨ã¯ã§ããªã„ã®ã 。ã©ã‚“ãªã«å„ªã‚ŒãŸã‚¢ãƒ«ã‚´ãƒªã‚ºãƒ をプãƒã‚°ãƒ©ãƒžãƒ¼ãŒå®Ÿè£…ã—ã¦ã‚‚ã€æ®‹å¿µãªãŒã‚‰ç§ãŸã¡ã®ç›®ã«ã¯è¦‹ãˆãªã„（å応速度ã§ä½“æ„Ÿã§ãã‚‹ã“ã¨ã¯ã‚ã‚‹ã«ã—ã¦ã‚‚）。人もウェブサイトも見ãŸç›®ãŒï¼™å‰²ãªã®ã§ã‚る。 最近ã€ç§ã¯ã€Œæ›¸è©•äººã€ã¨ã„ã†ã‚¦ã‚§ãƒ–サービスを始ã‚ãŸã€‚当然ã€ç§ã«ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã‚’雇ã†ä½™è£•ãªã©ãªã„。自分ã§ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’制作ã™ã‚‹å¿…è¦ã«è¿«ã‚‰ã‚ŒãŸã€‚ã•ã¦å›°ã£ãŸã©ã†ã™ã‚‹ã‹ã€‚ ç§ã¯ã€ã‚る人気ウェブサービスをé‹å–¶ã™ã‚‹å‹äººã«å°‹ãã¦ã¿ãŸã€‚å½¼ã¯ã€æ˜”ã€ä¸€ç·’ã«ä»•äº‹ã‚’ã—ãŸã“ã¨ãŒã‚るプãƒã‚°ãƒ©ãƒžãƒ¼ã 。特ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’専門的ã«å‹‰å¼·ã—ãŸã“ã¨ã¯ãªã„ã¯ãšãªã®ã«ã€å½¼ãŒä½œã‚‹ã‚µã‚¤ãƒˆã¯ã©ã“ã‹ã‚ã‹ã¬ã‘ã¦ã„る。彼ã«æ ¹æŽ˜ã‚Šè‘‰æŽ˜ã‚Šå°‹ãã‚‹ã†ã¡ã«ã€å‹§ã‚ã¦ãã‚ŒãŸæœ¬ãŒã“れ。 XHTML&CSSデザイン
色彩センスã®ã„らãªã„é…色講座
3. 自己紹介 è·æ¥ï¼šãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ 物心ã¤ã„ãŸã¨ãã«ã¯çµµã‚’æãã®ãŒå¥½ãã ã£ãŸ ãã®ã¾ã¾ã®å‹¢ã„ã§æŸç¾Žå¤§æŸãƒ‡ã‚¶ã‚¤ãƒ³ç§‘ã«é€²å¦ 社会ã«å‡ºãŸã‚‰ãƒ‡ã‚¶ã‚¤ãƒ³ã®è©±ãŒé€šã˜ãªã•ã™ãŽã¦æ‚¶çµ¶ ãã‚“ãªç¤¾ä¼šã«å¯¾ã—ã¦ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã®åŠ¹æžœã‚’ã‚Šã‚ã‚“ã¦ãã«èª¬æ˜Žã—ã¦èª¬å¾—ã—よã†ã¨ã—ã¦ã„ã‚‹ marippe_
Webサイトã«ãŠã‘るユーザービリティã®å¾©ç¿’ã‚’ã—ãŸã®ã§ã€ã‚ˆããƒã‚§ãƒƒã‚¯ã™ã‚‹ãƒã‚¤ãƒ³ãƒˆã‚’リスト化ã—㟠- ã‹ã¡ã³ã¨.net
ユーザービリティã«é–¢ã—ã¦å°‘ã—復習ã—ãŸã®ã§ メモã£ã¦ãŠãã¾ã™ã€‚åˆå¿ƒå¿˜ã‚Œã‚‹ã¹ã‹ã‚‰ãšã¨ã„ㆠ事ã§ãƒ»ãƒ»ãƒ»Webサイトã¯åŸºæœ¬çš„ã«ãƒ¦ãƒ¼ã‚¶ãƒ“リティ を考慮ã—ãŸãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„コンテンツãŒç†æƒ³ã§ã™ã€‚ ã‚‚ã¡ã‚んケースãƒã‚¤ã‚±ãƒ¼ã‚¹ã§ã¯ã‚ã‚Šã¾ã™ãŒã€ ã“ã‚Œã¯å…¨å…±é€šã—ã¦è¨€ãˆã‚‹ã€ã¨ã„ã†äº‹ã‚’忘れãªã„ よã†ã«ãƒ¡ãƒ¢æ›¸ã。 ã¨ã„ã†ã‚ã‘ã§ã€ç”³ã—訳ãªã„ã§ã™ã‘ã©ç›®æ–°ã—ã„事ã¯ä½•ä¸€ã¤ç„¡ã„内容ã§ã™ã€‚ ãã‚‚ãã‚‚ã“ã®ãƒ–ãƒã‚°è‡ªä½“ユーザビリティを考慮ã—ãŸè¨è¨ˆã¨ã¯è¨€ãˆã¾ã›ã‚“（「やã£ã¡ã‚ƒãƒ€ãƒ¡ãªã“ã¨ã€ã‚‚ã—ã¦ã„ã¾ã™ï¼‰ã®ã§å…¨ç„¶èª¬å¾—力ãªã„æ„Ÿã˜ã§ã™ã€‚ ã„ã‚ã„ã‚ã¨ãƒ†ã‚¹ãƒˆ&エラーをã—ã¦è¡ŒããŸã„ã®ã§ã”了承下ã•ã„。 ã¯ã˜ã‚ã« æ£ã—ã„ユーザビリティã¯ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã«ã‚ˆã£ã¦ã‚±ãƒ¼ã‚¹ãƒã‚¤ã‚±ãƒ¼ã‚¹ã ã¨æ€ã„ã¾ã™ãŒåŸºæœ¬çš„ã«ã¯åƒ•ã¯ãƒ¤ã‚³ãƒ–・ニールセンã®è€ƒãˆã«å¾“ã£ã¦ã„ã¾ã™ã€‚ å…¨ã¦ã®é …ç›®ã¯ã€Œã™ã¹ã¦ãŒæ£ã—ã„ã€ã‚‚ã®ã§ã¯ã‚ã‚Šã¾ã›ã‚“。100ã®ã‚µã‚¤ãƒˆãŒã‚ã‚Œã°100通りã®ãƒ¦ãƒ¼ã‚¶ãƒ“リティãŒè€ƒãˆã‚‰ã‚Œã‚‹ã¯ãšã§ã™ã€‚å ´åˆ
デザインを勉強ã—ãŸã“ã¨ãŒãªã„人ã§ã‚‚デザインã§ãるよã†ã«ãªã‚‹ã‹ã‚‚ã—ã‚Œãªã„4ã¤ã®åŸºæœ¬åŽŸå‰‡
ã“ã®ãƒ–ãƒã‚°ã€Webデザインレシピã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’リニューアルã—ã¾ã—ãŸã€‚ ã“ã®æ©Ÿä¼šã«ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’勉強ã—ãŸã“ã¨ãŒãªã„人ã§ã‚‚ã€æ¥½ã—ãデザインをã™ã‚‹ã“ã¨ãŒã§ãã‚‹ã‹ã‚‚ã—ã‚Œãªã„ã€åŸºæœ¬åŽŸå‰‡ 4ã¤ã‚’ã”紹介ã—ã¾ã™ã€‚ ã“ã®åŽŸå‰‡ã¯ã€ŒãƒŽãƒ³ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã‚ºãƒ»ãƒ‡ã‚¶ã‚¤ãƒ³ãƒ–ックã€è‘—者 Robin Williams ã§è©³ã—ã解説ã•ã‚Œã¦ã„ã¾ã™ã€‚ å¤ã„本ã§ã™ãŒã€ã¨ã£ã¦ã‚‚ç´ æ™´ã‚‰ã—ã„本ã§ä»Šã§ã¯æ–°è£…増補版ã¨ãªã£ã¦ç™ºè¡Œã•ã‚Œã¦ã„るよã†ã§ã™ã€‚ 今回ã€ã“ã®ãƒ–ãƒã‚° – Webデザインレシピã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’ã€ã‚¬ãƒ©ãƒƒã¨å¤‰ãˆã¦ã¿ã¾ã—ãŸã€‚ã“れを機会ã«ã¡ã‚‡ã£ã¨ãƒ‡ã‚¶ã‚¤ãƒ³ã®åŸºæœ¬ã¨ã„ã†ã‹ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’ã™ã‚‹ã¨ãã«ã‚¬ã‚¤ãƒ‰ã¨ãªã‚‹ã€4ã¤ã®åŽŸå‰‡ã‚’ãŠã•ã‚‰ã„ã—ã¦ãŠãã¾ã™ã€‚Webデザインã«é™ã‚‰ãšã€ä¼šç¤¾ã§æ出ã™ã‚‹å ±å‘Šæ›¸ã‚„å¦ç”Ÿã•ã‚“ã®ãƒ¬ãƒãƒ¼ãƒˆã€ãƒ¬ã‚¹ãƒˆãƒ©ãƒ³ã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼ãªã©ã€ãƒšãƒ¼ã‚¸ã¨å‘¼ã¹ã‚‹ã‚‚ã®ã«ã¯å…¨éƒ¨å½“ã¦ã¯ã¾ã‚‹ã¨æ€ã†ã®ã§ã€Webサイトを作るã¨ã‹ã˜ã‚ƒãªãã¦ã‚‚ã€çŸ¥ã£ã¦ãŠã„ã¦æã¯ãªã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ã。 ã›ã£
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
ã“ã‚Œã¯ã‚¹ã‚´ã‚¤ãžï¼Bootstrapã®ãƒšãƒ¼ã‚¸ä½œæˆãŒç©ã¿æœ¨æ„Ÿè¦šã§ç°¡å˜ã«ã§ãã¦ã—ã¾ã†ã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ -lollytin
{{#tags}}- {{label}}
{{/tags}}