ワンポイントCSS
CSSを使ってしまったら記録するページ(随時更新)
基本はWordPressのブロックエディター類でなんとかするんだけど、不本意ながらどーしてもHTMLとCSSを直接記述したときはここにメモするようにします。
背景を平行四辺形で囲む
ページの中にアクセントをつけたいときなど。skewxで10度斜体をかけた長方形内に、逆方向に10度斜体をかけたテキストを入れ正体とする。
<div style="transform: skewX(10deg); text-align: center;font-size: 1em;color:#fff">ご案内</div>
transform:skewX(-10deg)
box-shadow: 0 0 10px gray
width:60%
max-width:400px
margin: auto
文章中に長方形バックの白抜き文字
本文中の文字列にデザイン処理が必要なときなど。フォームレイアウトの必須項目デザイン処理で使うことが多い。divぢゃなくspanでインライン要素化する。
<span class="shironuki">ご案内</span>
.shironuki{
font-size: 1em;
padding:5px;
background:#44617b;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
ホバーエフェクト
マウスオーバー時のホバーエフェクト。filter: drop-shadowを使ってるので画像のアルファチャンネルに対応する。ブラウザによって意図しない処理になるかも。
.ef {
transition-duration: 0.5s;
}
.ef img{
width: 100%;
cursor: pointer;
}
.ef:hover{
filter: drop-shadow(10px 10px 10px grey);
transform: translateY(-10px);
transition-duration: 0.5s;
}
分離したテーブル
価格表など。
ライトプラン | ボトルプラン | 飲放題プラン |
1,000円 | 2,000円 | 3,000円 |
.table-1 table{
border-collapse:separate;
border-spacing: 10px;
}
横スクロールのテーブル
スマホの可読性を考えた場合の処理の一例。macOSでの挙動とかで好き嫌いが分かれる表現?::-webkit-scrollbarでカスタマイズした方が良いかも。
DTPのプロはWEBのプロになれるか。という永遠?のテーマ | 値段 | エイチティーエムエルとかの呪文暗号を覚えないといけないんでしょ? |
---|---|---|
レモン | 600円 | ブラジル産 |
パイナップル | 沖縄産 | |
バナナ | 100円 | フィリピン産 |
<div style="width: 100%; overflow-x: auto; white-space: nowrap;">
<table style="margin-bottom: 0px;">
<tr>
<th>DTPのプロはWEBのプロになれるか。という永遠?のテーマ</th><th>値段</th><th>エイチティーエムエルとかの呪文暗号を覚えないといけないんでしょ?</th>
</tr>
<tr>
<td>レモン</td><td rowspan="2">600円</td><td>ブラジル産</td>
</tr>
<tr>
<td>パイナップル</td><!--tdは消す--><td>沖縄産</td>
</tr>
<tr>
<td>バナナ</td><td>100円</td><td>フィリピン産</td>
</tr>
</table>
</div>
リストデザイン
シンプルに上下の線で囲んだリスト。
- Photoshop
- Illustrator
- WordPress
- HTML
- CSS
.list {
color: #333;
border-top: solid #333 1px;
border-bottom: solid #333 1px;
padding: 0.5em 0 0.5em 1.5em;
line-height: 1.5;
padding: 0.5em 0;
}