【html+Css】CopyOK! ページの説明用リストメニュー
とにかく時間がない!調整は後でする!そんなときのコピペソース作っておいたから!
パソコンで1列、スマホでは2列にしておいたから。
リストメニューの出来上がり予想図
ページ内リンクを押すと石油王のスタンプボタンに飛ぶちょっとうっとおしい仕様だよ。リンク名は適時変えて使用してね。
htmlのコピペ
<ul class="page_link"> <li><a href="#link01" class="">リンク1</a></li> <li><a href="#link01" class="">リンク2</a></li> <li><a href="#link01" class="">リンク3</a></li> <li><a href="#link01" class="">リンク4</a></li> </ul>
最小限のCssのコピペだよ。自分で調整してね。
/*パソコン*/ .page_link{ display: flex; display: -webkit-box; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: center; align-items: center; padding:0; list-style:none; } .page_link li{ width:20%; margin: 20px 0; font-weight:bold; letter-spacing:1px; } .page_link li a{ position: relative; border: 1px solid #f7c4c6; box-shadow: 0 2px 0 #f7c4c6; display: block; padding: 10px 25px 10px 5px; box-sizing: border-box; border-radius: 3px; font-size: 1.2em; color: #503627 ; background: #fff; margin: 0 5px; text-align: center; text-decoration: none ; } .page_link li a:after{ content: ""; position: absolute; left: 85%; top: 40%; width: 10px; height: 10px; display: block; border-width: 0 3px 3px 0; border-style: solid; border-color: #f37286; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page_link li a:hover{ position:relative; top:2px; opacity:0.8; } /*スマホ*/ @media (max-width: 767px){ /*デフォルトボタンのスタイル調整*/ .page_link li { width: 50%; margin:5px 0; } .page_link li a { /*フォントサイズなど適時調整してね*/ } }
主張の強いリンク作っておいたから、ちょっと買っとくと石油王嬉しい。売り上げは油田の維持に使うね。

The following two tabs change content below.
最新記事 by 嫁の方 (全て見る)
- 橋本(神奈川県駅)のリニアを楽しみにしています - 2021年1月23日
- 保護中: イラストの制作紹介 かぴのんスタジオ - 2020年9月11日
- 【ストーリーネタバレなし】ゴーストオブツシマレビュー - 2020年7月22日
- 保護中: ご依頼の流れ - 2020年7月14日
こんにちは。石油王です。今日は石油王が最速3分のコピペリストメニューをお届け。メッチャ便利じゃん。