ヒトノワblog | hitonowa.net ヒトノワblog | hitonowa.net

WEB戦略

スマートフォンで使うcssメモ

2020年06月29日

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

.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;
}

カテゴリ:WEBサイト【基礎】

人気記事ランキング

まだデータがありません。

«