ID非公開

2020/9/17 0:35

33回答

初心者です、レイアウトについて。

初心者です、レイアウトについて。 私は一応初心者の部類に入るのですが、htmlの基本構造は理解していますが、cssでのレイアウト構造が理解できません。 思うようなデザインにできません。 ぜひ皆さんのレイアウトの学習方法を教えていただきたいです。

補足

回答は締め切り間際まで受け付けます。

HTML、CSS16閲覧

ベストアンサー

1

まず、「css入門」でググれば いくつかサイトがヒットすると思います、それをコピペして、1行1行ググりながら挙動を考察して、気の済むまで(ググりながら)改造しまくって下さい、とりあえず それの繰り返しです。

1人がナイス!しています

ThanksImg質問者からのお礼コメント

なるほど、その方法を試してみたいと思います。他の方も含めご回答ありがとうございました。

お礼日時:9/20 17:03

その他の回答(2件)

1

grid による2カラム・レイアウトの例です。基本そのままですが......(^^; 【CSS】 DIV#content {display: grid; grid-template-columns: 1fr 170px; grid-template-rows: auto auto 70px; width: 800px; margin: auto;} HEADER {grid-column: 1 / 3; grid-row: 1; padding-top: 5px; color: black; background-color: beige;} MAIN {grid-column: 1; grid-row: 2; width: 600px; margin-left: 10px; margin-top: 10px; border: 1px silver solid;} DIV#menu {grid-column: 2; grid-row: 2; width: 160px; margin-right: 10px; margin-top: 10px; color: black; background-color: beige;} FOOTER {grid-column: 1 / 3; grid-row: 3; margin-bottom: 1em;} ・DIV#content の display: grid でグリッド配置を宣言。 ・DIV#content の grid-template-columns: 1fr 170px により 右側 170px と残り(1fr)に分割することを宣言。 ・DIV#content の grid-template-rows: auto auto 70px により横を3段(最上段と2段目は自動伸張)に分割。 ・HEADER の grid-column: 1 / 3 により列を構造上2分割する縦線の1番目から3番目までを使用し、grid-row: 1 により最上段であることを宣言。 ・MAIN の grid-column: 1 により列の縦線の左から1番目からデフォルトである次の縦線まで使用し、grid-row: 2 により2段目であることを宣言。 ・DIV#menu の grid-column: 2 により列の縦線の左から2番目からデフォルトである次の縦線まで使用し、grid-row: 2 により2段目であることを宣言。 ・FOOTER の grid-column: 1 / 3 により列をデザイン的に2分割する縦線の1番目から3番目までを使用し、grid-row: 3 により3段目(最下段)であることを宣言。 ※「grid-row: 1」は「grif-row: 1 / 2」と同じ意味です。

1人がナイス!しています