🌟✨design-s's diary📔📖

メインのおすすめ記事に この春"ハイレゾデビュー"するなら！入門価格のポータブルプレーヤー4選 という記事のリンクを貼りました。

入門価格が手頃でいいですね〜〜
手軽に 何処ででも ハイレゾが聴けるのなら 検討してみる価値はありそうです。
音源のハイレゾ曲のダウンロードは OKの状態です。
対応タブレットは持っていますが、最新のハイレゾ対応のウォークマンも見逃せないところですね〜〜

メインの特集記事にタイトルの 効果的に使っているユーザーの
タブレット活用法をチェック！
を追加しました。

いろいろチェックしてみましょう。

今回は ナビゲーションメニューをコンパクトにしてみました。
改行が入らないようにしました。
@media (max-width: 599px)に設定を追加して調整しました。
ここでは<nav class="menu">内の<li>内の<a>のpaddingで上下の余白サイズを「10px」に、左右の余白サイズを「3px」に、font-sizeで文字サイズを「11px」に変更しました。
次は サイト名と記事のタイトルをコンパクトにしていきます。

ブラウザ画面の横幅を変化させて表示の確認を行います。この表示デザインによる変化で気になるポイントは、横幅を小さくしたとき、ナビゲーションメニューに改行が入ってしまいます。基準のデザインではサブメニューの右側が余白ができやすいことです。横幅を大きくしたときは、幅全体に本文が広がりすぎます。@mediaの設定をし直しました。ブレイクポイントを600pxと1040pxを追加しました。あと 改行をなくしたりの調整を次からやっていきます。