1. HTMLで画像を読み込んでみよう

それでは,前回作成した評定課題の実験プログラムを修正して,より実験に適したレイアウトに変えていきましょう。具体的には以下のような画面を作成します。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/48f6fc11-96af-4403-97bb-cdb4073d2438/Untitled.png

今回はHTMLとCSSを使っていきますが,それぞれの詳しい説明については割愛します。

「Page HTML」では,HTMLを直接入力することが出来ます。以下の「Raw HTML」を選択してください。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be79b4c7-d79a-451f-a86b-b27d922b262a/Untitled.png

以下のような入力画面が表示されます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/28b74e9a-1387-4d31-b460-bdc9c735dfcb/Untitled.png

<main>タグを使って,主要なコンテンツであることを表明します。HTMLでは,タグの最後にスラッシュつきの同じタグをつけます。

<main>

</main>

また,要素のクラス属性を「class=""」の書き方で記載します。具体的には以下のように記載します。

<main class="content-horizontal-center content-vertical-center">

</main>