お返事

トップ画像をぬくぬくしてる猫さんに変えました。かわいい!indexよりリンクしております伝染病さまからお借りしています。暖かくなるまではこれでいこうと思います。

続きでお返事です。
>彩織さま
こんばんは。お返事が遅くなりすみません!
リンクコーナーのバナー説明文をスマホで見やすくする方法ですね。

1)文字を縮小表示する場合
dl.link dd{font-size: 10px;}(数値は例です。pxでもptでも%でもなんでもいいです)
2)画像の下に表示する場合
dl.link dt{float: none;margin: 0;}
dl.link dd{margin-left: 0;padding: 0;border: none;}

1、2どちらかの記述をstyle.cssの終わりの方、
/* 小さい画面での表示 */
@media all and (max-width: 768px){
この部分に追加してください
}
これで読みやすくなるかと思います。

【簡易説明】
・バナーリンクの部分は、定義リスト<dl>を使っていて、バナーは<dt>、説明文は<dd>で囲ってあります。
・パソコンでの表示はCSSの145行目/* リンクページ */辺りから
dl.link{…}
dl.link dt{…}
などで「linkと名前のつくdl・その中のdtやdd」の設定を書いています。
・スマホなど横幅の狭いデバイスでの表示を@media all and…で設定する形になります。

うまく解説できず心苦しいですが、HTMLとCSSを理解するヒントになれば幸いです。

コメント
コメントする








   

category

archives

links