1. 見出しのデザイン h2
シンプルかつ視認性の高いものをテーマに試行錯誤したんですが、最終的にはシンプルイズベスト、ライン一本に行き着きました。とはいえ単色だと味気ないなということで左右に違う色のグラデーションを入れました。ダークモードでは、単色で徐々に細くなる感じに。
見出しのデザイン h3
見出しに統一感を感じれるような自然でオーソドックスなデザインに。細かすぎて言われないと分からないレベルですが、角を丸めてるので少し可愛いはずです。「可愛いは細部に宿る」って古の神様が言ってました
見出しのデザイン h4
h5 h6 について
2. 吹き出し
アイコンの上下を 「 box-shadow 」で囲い、「 border-radius 」でまんまるにしてみました。ただの「 border 」で囲うよりちょっといい感じ。吹き出しを使っている人が多く、なんか流行ってるぽいので一応用意しました。
3. ボックス
まとめ
ベタ塗り
引用
引用したい部分をコピペしここに貼ります。しっかり引用元を明記しないとただのパクリになってしまい、ゲンコツじゃ済まない可能性も出てくるので、しっかりルールに沿って引用しましょう。
CVボタン（コンバージョンボタン）
リスト（番号あり）
- 番号ありは ol
- ol と li の組み合わせ
- 記事の要点
- 強めの色味
- 目次は打ち消しCSS必要
リスト（番号なし）
- 番号なしは ul
- ul と li の組み合わせ
- 箇条書きは命
- 少し色の違う2つの要素
- 擬似要素2つでチェックを表現
コード
.code {
background: #f7f7f7;
padding: 32px 16px;
margin-bottom: 16px;
transition: all 0.1s ease-in-out;
}
/* コードは緑っぽいイメージｗ（安易） 自分用のメモで使う */
アコーディオンボックス
商品リンク
Amazonや楽天の商品リンク。ほとんどそのままですが、余白とボタンサイズ、枠線などを少しいじりました。通常はブックマークレットをそのままコピペすればいいですが、あまりにもテキストが長くごちゃついている場合は、「楽天商品リンク（商品タイトル変更）」を選択しタイトルを変更。
ブログカード ①
内部リンクや外部リンクを貼るときに使うやつ。少しごちゃついた感じだったので、「display:none」でキャプションとファビコンを消して、余白・テキストサイズなどを調整。画像、タイトル、サイトURLのシンプルな構成に。内部と外部でクラス名が違うのでまとめて指定。
ブログカード ②
タイトル・ブログカード・テキストを1カラム内にまとめたものを2カラムに。タイトル(h4)とブログカードは専用のスタイルを指定し、画像は高さを固定し左右上下を中央寄せ。
楽天リーベイツ
今なら購入代金の5%が楽天ポイントで還元されます。楽天経済圏の住人には特におすすめ。
LINEショッピング
今なら購入代金の5%がLINEポイントで還元されます。LINEポイントの使い道がある方におすすめ。
ブログカード ③
3つぐらいのリンクを貼りたい場合に使用。これも個別のスタイルを設定。幅が狭いのでテキストは基本的にはなし。
4. その他
テーブル1
| iPhone 11 | iPhone SE | |
|---|---|---|
| チップ | A13 Bionic | A13 Bionic |
| ディスプレイ | 6.1インチ | 4.7インチ |
| カメラ | 超広角・広角 | 広角 |
| 生体認証 | Face ID | Touch ID |
| バッテリー | 17時間 | 13時間 |
| ナイトモード | ○ | × |
| フロントカメラ | 12MP | 7MP |
テーブル2
| iPhone 11 | iPhone SE2 |
|---|---|
| A11 | A13 |
| 6.1インチ | 4.7インチ |
| 超広角・広角 | 広角 |
| Face ID | Touch ID |
| 17時間 | 13時間 |
| ○ | × |
| 12MP | 7MP |
テーブル3
| 昼 | 11:00〜14:50 |
|---|---|
| 夜 | 18:00〜20:30 |
| 土祝の夜 | 17:30〜20:00 |
| 定休日 | 火曜・日曜の夜 |
| 開業日 | 2010/2/3 |
| 従業員数 | 4 |
| カウンター席 | 6〜8席 |
横スクロールのガイドは、.scroll-hint-icon { display: none; }で非表示に。この３種類があれば事足りそうです。配色はまだ少し迷い中ですが、今のところはやたらカラフルな色をつけたりせず、行ごとの色の変化もしない方向で。
テーブル4
| トークンアドレス |
|---|
| Matic mainnet |
| RPC URL |
| https://rpc-mainnet.maticvigil.com/ |
| チェーンID |
| 137 |
| シンボル |
| MATIC |
| ブロックエクスプローラーのURL |
| https://polygonscan.com/ |
URLやアドレスなど長い文字列の場合、スマホだと横スクロールが発生しますので、そういう時はこの縦のテーブルを使います。
ステップバー
<div class=”step-label1″>STEP</div>
<div class=”step-title1″>タイトル</div>
<div class=”step-body1″>テキスト</div>
</div>
<div class=”step-label1″>STEP</div>
<div class=”step-title1″>タイトル</div>
<div class=”step-body1″>
<div class=”step-wrap2″>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
<div class=”step-content2″>
<div class=”step-title2″>ミニタイトル</div>
<div class=”step-body2″>ミニ補足テキスト。</div>
</div>
</div>
</div>
</div>
5. 注意点
色は使いすぎず最小限にとどめる
色はアクセントとして少しだけ使うように意識。多様しすぎると目線があちこちに散らばってしまい、内容の理解スピードが落ちやすくなりがち。色数が多すぎると色は風景となり、どこを強調しているのか訳がわからなくなります。ここぞという部分に最小限使う。それで十分。
大きいものほど色味を抑える
色をつける部分が大きいものは色味を抑えました。色味が強すぎると悪目立ちして、そっちに意識が行ってしまい内容を見失いがち。あくまで主役はテキスト（内容）で、装飾はそれを補佐する役割。逆に小さい部分については、彩度を高めて存在感を出した方が効果的。もちろんサイト全体のバランスを意識し調和するような配色で。
ギラツキを抑える
原色バチバチや、コントラスト比が高すぎてギラギラしていると見ていて不愉快なので、記事内容に没頭できるような心地よい色味を意識。特にダークモードにすると通常の色味が眩しく感じることが多いので、ダークモード用に明度を抑えた色を別途用意しました。とにかく、読んでいてストレスを感じない（何も感じない）事が理想。
6. スタイルを追加削除
これらのデザインしたものをエディタに表示したり、不要なスタイルを削除する。今後必要が出て来れば自分でデザインしたものを都度追加。
xxx