コード判定結果
コンテンツブロックなどが動作していないかご確認ください。
paizaの会員登録が必要です
#01:CSSの基本形を理解しよう
実技課題 「余白を追加する」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyの内側に30pxの余白を追加してください。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。
CSSでは、各スタイルを次のように記述します。
まず、スタイルの適用対象があります(例 body)。それから波カッコの中に、プロパティと設定値をコロンで区切って記述します。各プロパティの行の末尾にセミコロンを書きます。body {
padding-top: 50px;
background-color: lightgray;
}
- CSSファイルに記述し、linkタグで読み込む。<link rel="stylesheet" href="your_style.css">
- HTMLのheadタグ上に、styleタグで記述する。<style>
body {
padding-top: 50px;
background-color: lightgray;
}
</style>
BootstrapのCSSは、下記のURLが利用できます。
・Flat-UI-CSS
https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css
やさしいホームページ入門 - CSS入門
http://www.ink.or.jp/~bigblock/css/
Bare - Bootstrap Starter Template - Start Bootstrap
http://startbootstrap.com/template-overviews/bare/
Flat UI - Free Bootstrap Framework and Theme
http://designmodo.github.io/Flat-UI/