スマートフォンの使えるテクニック

WEB戦略

スマートフォン

2011.11.23

スマートフォンの使えるテクニック

******************************************************************
タイトルが長い場合に...と省略する表示方法
******************************************************************

.page-heading {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}


******************************************************************
グラデーションに中間の指定もしたい場合の記述方法
******************************************************************

.nav-page a {
 background-image: -webkit-gradient(linear, left top, left bottom, from(#D9F5F3), color-stop(45%, #c8e4e2), color-stop(55%, #86e0e1), to(#75D9D0));
}


******************************************************************
タイトルを真ん中にする裏ワザ(vertical-align:ではダメ)
******************************************************************
 height: 44px;
 line-height: 44px;


******************************************************************
li要素の最初と最後にのみスタイルを適用する方法(li以外でも使える)
******************************************************************
.nav-about li:first-child {
 -webkit-border-top-right-radius: 8px;
 -webkit-border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-top-left-radius: 8px;
}

.nav-about li:last-child {
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;
}

このエントリーをはてなブックマークに追加

Page_Up