プログラミング学習ロード～その５～
こんにちは。しんやです。
manablogので出されたHTML、CSSコーディングについて、2つの課題のうち1つに取り組んだので、注意点をまとめます。
https://twitter.com/Shinyaaah0311/status/1411814266877865985?s=20
と泣き言をいいながらも一通り進めました。
https://twitter.com/Shinyaaah0311/status/1411978529743331332?s=20
というのは本音ですね。
僕が今まで仕事やプライベートで開発したCOBOLやExcelVBAは1行間違えたとしてもコンパイルエラーになって、文法上のミスは修正できます。
しかし、HTMLやCSSはマークアップ言語なのでコンパイルしないため、実行されてしまい、ページを確認するとグチャグチャになってしまうということがよくあります。
それでは、見ていきます。
「Airbnbでお家、アパート、お部屋をシェアしよう」のＬＰ1枚を模写します。
のっけからレイアウト微妙ですが、paddingやmarginの細かい値には一旦目をつむります。
1. 背景色
最初から苦労しました。
を重ねていくものだと思い、白い背景、黒い背景を交互に書いていきましたが、背景1枚をグラデーションしてあることに気づき、修正しました。
body全体のbackgroundにlinear-gradientで設定します。
* black 20%, white 20%
とすることで、ページ上方から20%のところで黒白がはっきり分かれます。
```
body {
background: linear-gradient(
black 0%, black 20%,
white 20%, white 30%,
black 30%, black 60%,
white 60%, white 80%,
black 80%, black 90%,
white 90%, white 100%,
white 100%);
}
```
##
## 2. ロゴとスタートボタン
```
```
```
.logoimg {
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
```
position: absolute;
left: 0;
で左詰めします。
```
.starthosting {
width: 300px;
height: 50px;
background-color: rgb(240, 60, 90);
font-size: 20px;
font-weight: bold;
color: white;
text-align: center;
text-decoration: none;
border-radius: 100vh;
position: absolute;
right: 0;
display: flex;
justify-content: center;
align-items: center;
```
right: 0;
display: flex; で右端に横並びで表示。
justify-content: canter;（※text-align: center; としても無効です）
align-items: center;
でボタン内の文言を上下左右中央揃えにします。
## 3. display: flex; で横並びを実現
```
ホスティングこそ
```
```
.container {
display: flex;
margin: 0;
}
.hosting {
width: 100%;
height: 300px;
padding: 300px 50px;
margin: 0;
}
.movie {
width: 100%;
height: 900px;
}
```
containerクラスにdisplay: flex;と指定した上で、hostingとmovieという2つのクラスを入れ子で持たせることでdivを横並びにできます。
```
```
```
.container {
width: 100%;
overflow: auto;
display: flex;
scroll-snap-type: x mandatory;
margin: 0;
color: white;
}
.item {
margin: 50px;
float: none;
scroll-snap-align: start;
font-size: 20px;
}
```
containerクラスにitemクラスを入れ子で持たせ、display: flexで横並びを実現します。
scroll-snap-type: x mandatory; で横スクロールバーを表示させます。
## 4. HTMLでリストボックスを作成するのは面倒
```
ホスティングこそ
まさにAirbnbが
Airbnbである理由
動画
お部屋をホスティングしたことで私の人生は変わり、思い出に残る経験や出会いに恵まれました。
ミラノのホスト
自宅にゲストを迎え、ホスティングすることで、起業家として経済的に自由な道を切り開くことができました。
アトランタのホスト
パスタ作り体験のホスティングを通じて、文化を生かし続けられています。
パロンバーラ・サビーナのホスト
Airbnbは、「自分の家でゲストをもてなす」という情熱を仕事に変える機会を与えてくれました。
チェンマイのホスト
ベドウィンのテントにゲストを受け入れることで、世界中の人たちに出会うことができました。
ワディ・ラムのホスト
ゲストが自然や大切な人とつながれるエコハウスをホスティングすることが大好きです。
パラチのホスト