【コピペOK！html＋Css】便利なレスポンシブのメニューリスト

【html＋Css】CopyOK！ページの説明用リストメニュー

こんにちは。石油王です。今日は石油王が最速3分のコピペリストメニューをお届け。メッチャ便利じゃん。

とにかく時間がない！調整は後でする！そんなときのコピペソース作っておいたから！
パソコンで1列、スマホでは2列にしておいたから。

リストメニューの出来上がり予想図

ページ内リンクを押すと石油王のスタンプボタンに飛ぶちょっとうっとおしい仕様だよ。リンク名は適時変えて使用してね。

リンク1
リンク2
リンク3
リンク4

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 {
   /*フォントサイズなど適時調整してね*/
}
}

主張の強いリンク作っておいたから、ちょっと買っとくと石油王嬉しい。売り上げは油田の維持に使うね。