div#wrapper { background: #ffe; } div#wrapper pre { margin:10px 20px; padding: 0px 10px; background: #eef; } span.sample { font-size:larger; } /*ナビゲートリンク*/ div#wrapper div.navigate { margin-top: 10px; display: flex; } div.navigate div { padding: 5px 0px; border: 1px solid; border-radius: 5px; background-color: #eef; text-align: center; cursor: pointer; } div.navigate div.change:hover { background-color: #cce; } /***画面サイズ〜480 スマフォ***/ @media screen and (max-width: 480px) { div.navigate div { flex: 1; } } /***画面サイズ481〜 タブレット,PC画面***/ @media screen and (min-width: 481px) { div.navigate { justify-content: space-around; } div.navigate div { width: 150px; } }