html5/bootstrap
プログラム初心者でデザインはサッパリです。
テキストボックスの幅を広くすれば良いのかなと思うのですが、その指定方法が分かりません。分かる方教えて下さい。
他にも変な箇所あれば遠慮なくご指摘いただけると有り難いです。
html
1<header class="navbar navbar-fixed-top navbar-inverse"> 2 <div class="container"> 3 4 <div class="row"> 5 <a id="logo" href="/">アプリ</a> 6 <form action="/items" accept-charset="UTF-8" method="get" class="navbar-form navbar-left"> 7 <div class="input-group"> 8 <form action="/items" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" /> 9 <input value="" class="form-control" placeholder="何かお探しですか?" id="header_text_keyword" type="text" name="search[keyword]" /> 10 <input type="hidden" name="search[paused]" id="search_paused" value="false" /> 11</form> <div class="input-group-btn"> 12 <button class="btn btn-default" type="submit" id="header_search_button"> 13 <i class="glyphicon glyphicon-search"></i> 14 </button> 15 </div> 16 </div> 17 </form> 18 </div> 19 20 <div class="row"> 21 <a href="/categories">カテゴリから探す</a> 22 <ul class="nav navbar-nav navbar-right"> 23 <li><a href="#">お知らせ</a></li> 24 <li><a href="/mypages">マイページ</a></li> 25 <li><a rel="nofollow" data-method="delete" href="/logout">ログアウト</a></li> 26 </ul> 27 </div> 28 29 </div> 30</header>
css
1@import "bootstrap-sprockets"; 2@import "bootstrap"; 3 4/* mixins, variables, etc. */ 5 6$gray-medium-light: #eaeaea; 7 8@mixin box_sizing { 9 -moz-box-sizing: border-box; 10 -webkit-box-sizing: border-box; 11 box-sizing: border-box; 12} 13 14/* miscellaneous */ 15 16.debug_dump { 17 clear: both; 18 float: left; 19 width: 100%; 20 margin-top: 45px; 21 @include box_sizing; 22} 23 24/* universal */ 25 26body { 27 padding-top: 90px; 28} 29 30section { 31 overflow: auto; 32} 33 34textarea { 35 resize: vertical; 36} 37 38.center { 39 text-align: center; 40 h1 { 41 margin-bottom: 10px; 42 } 43} 44 45/* typography */ 46h1, h2, h3, h4, h5, h6 { 47 line-height: 1; 48} 49 50h1 { 51 font-size: 3em; 52 letter-spacing: -2px; 53 margin-bottom: 30px; 54 text-align: center; 55} 56 57h2 { 58 font-size: 1.2em; 59 letter-spacing: -1px; 60 margin-bottom: 30px; 61 text-align: center; 62 font-weight: normal; 63 color: $gray-light; 64} 65 66p { 67 font-size: 1.1em; 68 line-height: 1.7em; 69} 70 71 72/* header */ 73#logo { 74 float: left; 75 margin-right: 10px; 76 font-size: 1.6em; 77 color: white; 78 text-transform: uppercase; 79 letter-spacing: -1px; 80 padding-top: 9px; 81 font-weight: bold; 82 &:hover { 83 color: white; 84 text-decoration: none; 85 } 86} 87 88 89 90 91/* footer */ 92footer { 93 margin-top: 45px; 94 padding-top: 5px; 95 border-top: 1px solid $gray-medium-light; 96 color: $gray-light; 97 a { 98 color: $gray; 99 &:hover { 100 color: $gray-darker; 101 } 102 } 103 small { 104 float: left; 105 } 106 ul { 107 float: right; 108 list-style: none; 109 li { 110 float: left; 111 margin-left: 15px; 112 } 113 } 114} 115 116 117 118 119 120 121/* forms */ 122input, textarea, select, .uneditable-input { 123 border: 1px solid #bbb; 124 width: 100%; 125 margin-bottom: 15px; 126 @include box_sizing; 127} 128 129input { 130 height: auto !important; 131} 132 133 134 135 136 137 138
回答3件
あなたの回答
tips
プレビュー