背景と構造
Coddyの「Instagramページのクローン作成 | フロントエンド・プロジェクト」コースのレッスン 3/16。
bodyをdisplayをflexにしてスタイル設定し、すべてを垂直方向および水平方向に中央揃えにしました。これは、これからページの背景/キャンバスを作成するためです。widthとheightが95%のdivを用意します。後ほど、次のような構造になります。
ウェブサイトの上部はprofileInfoという名前のsectionになり、下部はpostsになります。その後、それぞれをさらに細かく分割していきます。
チャレンジ
簡単- HTMLの
head部分に、タイトルがInstagramとなるtitleタグを入力してください。 index.htmlのbodyタグの中に、idがbackgroundのdivを作成してください。今は空のままにしておきます。styles.cssでそのidを使用して、divに95%のheightとwidthを設定してください。- backgroundプロパティの値をwhiteにします。
- そして、border-radiusを15pxにします。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<!-- タイトルを入力してください -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ここにHTMLコードを記述してください -->
</body>
</html>Instagramページのクローン作成 | フロントエンド・プロジェクトのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド