スマートフォンで使う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サイト【基礎】

« 制作メモ 鞠躬尽力 »