コピペOK！メニューに使えそうなHTMLとCSS

コピペOK！メニューにぴったりな、横並びのボタン風デザインです。かわいくて使いやすいスタイルに仕上げています。

1 HTML
2 CSS

HTML

<div class="hum-menu">
<div class="kensaku-bar">
    <input type="text" placeholder="キーワードで検索">
    <i class="fas fa-search"></i>
</div>
<div class="menu-colu">
    <div class="menu-ite"><i class="fas fa-store-alt"></i> 新店情報</div>
    <div class="menu-ite"><i class="fas fa-utensils"></i> グルメ・お土産</div>
    <div class="menu-ite"><i class="fas fa-landmark"></i> 観光・おでかけ</div>
    <div class="menu-ite"><i class="fas fa-calendar-alt"></i> イベント</div>
    <div class="menu-ite"><i class="fas fa-map-marker-alt"></i> エリア別</div>
    <div class="menu-ite"><i class="fas fa-question-circle"></i> 話題の京都</div>
    <div class="menu-ite"><i class="fas fa-water"></i> 滋賀</div>
    <div class="menu-ite"><i class="fas fa-book"></i> 雑誌・書籍</div>
    <div class="menu-ite"><i class="fas fa-gift"></i> プレゼント</div>
    <div class="menu-ite"><i class="fas fa-shopping-cart"></i> Online Store</div>
</div>
<div class="secondary-menu">
    <div class="menu-ite">新着記事</div>
    <div class="menu-ite">特集</div>
    <div class="menu-ite">ニュース</div>
    <div class="menu-ite">読み物</div>
    <div class="menu-ite">動画</div>
    <div class="menu-ite">あじわい館</div>
</div>
<div class="bottom_fo">
    メルマガ 会員登録
</div>
<div class="fo-us">
    <p>FOLLOW US</p>
    <div class="soc-icons">
        <i class="fab fa-line"></i>
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-youtube"></i>
    </div>
</div>
</div>

CSS



.hum-menu {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.kensaku-bar {
display: flex;
align-items: center;
margin-bottom: 20px;
border: 1px solid #e0e0e0;
padding: 5px;
border-radius: 5px;
}

.kensaku-bar input {
border: none;
flex: 1;
padding: 5px;
}

.kensaku-bar i {
color: #fea99;
}

.menu-colu {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 20px;
}

.menu-ite {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0px 8px 0px;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;line-height: 15px;
border-radius: 5px;
text-align: center;
font-size: 9px;
}

.menu-ite i {
font-size: 18px;
margin-bottom: 5px;
color: #fea99;
}

.secondary-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}

.bottom_fo, .fo-us {
text-align: center;
margin: 10px 0;
}

.fo-us p {
margin: 0;
font-weight: bold;
color: #FF4500;
}

.soc-icons {
display: flex;
justify-content: center;
gap: 15px;
}

.soc-icons i {
font-size: 24px;
color: #333;
}