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

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

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

とにかく時間がない!調整は後でする!そんなときのコピペソース作っておいたから!
パソコンで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 {
   /*フォントサイズなど適時調整してね*/
}
}

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

LINEスタンプ購入

The following two tabs change content below.

嫁の方

代表取締役かぴのんスタジオ
株式会社かぴのんスタジオ夫婦の嫁のほう。 webのデザイン&イラスト&コーディングまでが得意なフリーランス。写真は田舎が大好き。富士山の樹海でよくキノコを追いかけています。 ご質問はこちら

ご質問はこちら