サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
takuya0805.hatenadiary.org
HTML5でレスポンシブデザインのページを作ってみました。 画像のサイズは可変に設定してあるので、画面のサイズを変えても崩れません。 PC用、タブレット用、スマートフォン用で切り替わるようになっています。 ポイント ①以前、同天下一WEB道会で紹介したレスポンシブデザインでは、ひとつのCSSに全ての条件を記述していましたが、今回は条件ごとにCSSを分けて記述してあります。 ②画像のサイズを可変にするために、以下のように設定してあります。 img { max-width: 100%; height: auto; }③前回同様、特殊なCSSであるスマートフォン用のCSSから記述していきます。ただ、私はPC用のものから記述してしまったので、今回のコードに無駄なものが多く含まれていると思います。修正後アップロードしなおします。 【index.html】 <!DOCTYPE html> <html
HTML5でのメガドロップダウンメニューを紹介します。 近年では商品数の多いECサイトで利用されることが多くなってきました。 簡単に作成できるので、サイトに実装してみては。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <img src="images/logo.png" width="225" height="45" alt=""> </header> <!--メガドロップダウンメニュー--> <nav> <ul> <li class="color-blue
このページを最初にブックマークしてみませんか?
『takuya0805.hatenadiary.org』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く