スマホサイトリニューアル
結構変わりました。
メニューボタンも横からスライドで出てきます。
これスマホっぽい
最近チェックした商品も履歴で出てきて横に指でスライドで表示。
これスマホっぽい
ショップサイトはこちら!
マジ疲れました
あと下の方にランキングサイトのリンクを設置しました。
クリックでランキングが上がるので応援よろしくお願いします!
これ重要
タップしとけ
ここから真面目な話。
その部分で本日勉強したのがこちら。
友達のサイトがやってたんで僕もやってみました。
友達のパーティードレスの通販サイトRissです。
水色のランキングのリンク部分。
テキストが長い場合CSSで省略して二行表示にならない様に省略しました。
スマホを横にしたりブラウザサイスが大きい場合は表示されます。
横にすると…
スマホは横幅が狭いんでボタンとして表示サイズを変えたくない場合には便利です。
横でも省略されてますね…。
iPadで見るしかない!
CSSでの制御なんでhtmlでは記述されてるって所がイイですよね。
表示させたいテキストの場合はフォントサイズを小さくするとかで対処はできますね。
その場合、タップしやすい様にサイズの調整は必要ですね。
HTMLはシンプルにこんな感じ。
写真の水色ボタンの場合、CSSはこんな感じです。
表示確認はiPhone5sでしかしていないんでAndroidでも大丈夫かな…。
widthでのサイズ指定。
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
でテキストのサイズオーバー分の…表示みたいです。
実際はタップしてる時色が変わったりと他で指定していますんで
色々試してくださいね。
今見たらline-height: 1;って単位なくても効果あるの??
まぁいいか。
それでは。
メニューボタンも横からスライドで出てきます。
これスマホっぽい
最近チェックした商品も履歴で出てきて横に指でスライドで表示。
これスマホっぽい
ショップサイトはこちら!
マジ疲れました
あと下の方にランキングサイトのリンクを設置しました。
クリックでランキングが上がるので応援よろしくお願いします!
これ重要
タップしとけ
ここから真面目な話。
その部分で本日勉強したのがこちら。
友達のサイトがやってたんで僕もやってみました。
友達のパーティードレスの通販サイトRissです。
水色のランキングのリンク部分。
テキストが長い場合CSSで省略して二行表示にならない様に省略しました。
スマホを横にしたりブラウザサイスが大きい場合は表示されます。
横にすると…
スマホは横幅が狭いんでボタンとして表示サイズを変えたくない場合には便利です。
横でも省略されてますね…。
iPadで見るしかない!
CSSでの制御なんでhtmlでは記述されてるって所がイイですよね。
表示させたいテキストの場合はフォントサイズを小さくするとかで対処はできますね。
その場合、タップしやすい様にサイズの調整は必要ですね。
HTMLはシンプルにこんな感じ。
<div id="ranking">
<a class="rankingbtn" href="○○○" target="_blank">○○○</a>
<a class="rankingbtn" href="○○○" target="_blank">○○○</a>
<a class="rankingbtn" href="○○○" target="_blank">○○○</a>
<a class="rankingbtn" href="○○○" target="_blank">○○○</a>
</div>
写真の水色ボタンの場合、CSSはこんな感じです。
.rankingbtn{
font-size: 100%;
line-height: 1;
margin-bottom: 5px;
padding: 10px;
border: 1px solid #2196f3;
color: #2196f3;
box-sizing: border-box;
display: inline-block;
text-align: center;
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#ranking a{
width: 48%;
margin-left: 1%;
}
表示確認はiPhone5sでしかしていないんでAndroidでも大丈夫かな…。
widthでのサイズ指定。
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
でテキストのサイズオーバー分の…表示みたいです。
実際はタップしてる時色が変わったりと他で指定していますんで
色々試してくださいね。
今見たらline-height: 1;って単位なくても効果あるの??
まぁいいか。
それでは。
- 2015.04.30 Thursday
- WEB関係
- 04:05
- comments(0)
- -
- by NORI