#14 枠の中に画像や色を入れる

画像表示はhtmlで配置する場合と、cssで配置する2パターン

まずは素材をダウンロードしましょう。
素材をダウンロード
ダウンロード→解凍が終わったら、imagesフォルダをindex.htmlと同じ階層に入れましょう。

画像の配置





.logo{
  width:200px;
  color:#52b6ac;
  font-size:12px;
  display:flex;
  align-items:center;
}
.logo img{
  width:50px;
  margin-right:10px;
}
htmlでは、画像を配置するときimgタグを使います。枠「logo」の中に<img>タグで画像を、続いて文字を入れます。
srcという属性タグはsource（ソース）の略です。
cssでは、親要素にdisplayプロパティflexを使い、ロゴと文字を横並びにするよう指示し、 align-itemsプロパティcenterで親要素の天地に対してセンター合わせになるよう指示します。

このようになります。

背景色の指示




  header /*← 削除する */
  

    
  





.header{
  height:150px;
  margin-bottom:20px;
  /*border: 1px solid #000;*/
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
htmlでは、必要がなくなったheaderという文字を削除します。
cssでは、必要がなくなったborderプロパティを削除します。

子要素の配置について指示を書きます。displayプロパティflexを使いflexボックスにして、 align-itemsプロパティcenterをつかって親要素の天地に対してセンター合わせになるよう指示します

このようになります。

背景画像の配置


配置する画像のサイズは「幅1,000px・高さ667px」となっています。 枠「visual」は「幅980px・高さ400px」なので画像は切り取られて配置されます。どの部分を切り取るかは、cssで指示します。
また、ロゴのように配置したい場合は<img>タグを使って配置しますが、 画像の上に文字を置きたい場合は、cssでbackgroundプロパティを使い背景画像として配置します。




  

    楽しく習得。

    もっと学習。
  





.visual{
  height:400px;
  background: url("../images/top_bg.jpg") no-repeat center center;
  display: flex;
  align-items: center;
}
.copy{
  color:#FFF; /*文字の色指定*/
  margin-left:100px; /*左側の余白*/
  font:normal 32px/2em sans-serif;
}
htmlでは、必要がなくなったvisualとcopyという文字列を削除します。
また、タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。

cssでは、必要がなくなったborderプロパティを削除します。
visualクラスに対するflex関係のプロパティはもう大丈夫ですね。天地の中央に配置するためのものです。

copyクラスのfontプロパティで使われている単位「em」とは1文字分の大きさのことです。32pxという指示がありますので、2emは64pxということなります。

このようになります。
・backgroundプロパティについて
background: url("images/top_bg.jpg")（画像ファイルの場所） no-repeat（繰り返し処理） center（画像の左右の位置） center（画像の上下の位置）;

・文字に関してはfontプロパティを使います。
font: normal（文字のウェイト） 32px/2em（文字のサイズ / 行間） sans-serif（書体の種類）;

#15 枠の中にテキストを入れる

リストタイプのテキストを入れてみましょう

右側のテキストエリアのようにリスト形式の場合は、<li>タグを使います。
<li>タグは必ず<ol>タグか<ul>タグで囲ってあげます。
<a>タグは別のページにリンクさせたいときに使います。属性タグhrefはhypertext reference(ハイパーテキストを参照)という意味です。 



  

    html+cssを習得するには、実際に作りながら覚えるのが一番！
    英語でも文法を学ぶより、話すことが上達への近道なように。
  

  

    
  





.text_wrapper{
  height:200px;
  display:flex;
  justify-content: center; /*左右センター*/
}
.text{
  width:280px;
  height:160px;
  margin-top:20px;
  padding-right:15px;
  border-right:8px solid #666; /*右側の黒い線*/
  font:normal 18px/2em sans-serif;
  display:flex;
  align-items: center; /*天地センター*/
}
.menu{
  width:300px;
  font:normal 18px/1.6em sans-serif;
  display:flex;
  align-items: center; /*天地センター*/
}
htmlでは、枠「text」内に文章をコピーしましょう。枠「menu」内にはリスト形式の文章を入れたいため、 枠<ul>タグを用意し、その中に<li>タグを入れます。<li>タグは単体では使えません。必ず<ul>や<ol>でラッピングします。

このようになります。

#16 簡単なwebサイトの完成

footer部分も入れて完成させましょう。
サンプルサイト01
まず、不要な線を画面上に出しているborderプロパティをcssファイルから削除しましょう。 タグを表示するためだけに入れていたテキストをhtmlから削除します。またfooter_contents部分の文字を枠内の最下部に配置するようcssで指定します。 

<!DOCTYPE html> 
<html lang="ja"> 
 <head>
  <meta charset="UTF-8"> 
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
 </head>
 <body>
  <div class="header">
    <div class="header_contents">
      <div class="logo">
        <img src="images/cbc_icon.svg">
        CRI BOOT CAMP
      </div>
    </div>
  </div>

  <div class="contents">
    <div class="visual">
      <h1 class="copy">
        楽しく習得。<br>
        もっと学習。
      </h1>
    </div>
    <div class="text_wrapper">
      <div class="text">
        html+cssを習得するには、実際に作りながら覚えるのが一番！
        英語でも文法を学ぶより、話すことが上達への近道なように。
      </div>
      <div class="menu">
        <ul>
          <li><a href="/page1.html">ホームページの作り方</a></li>
          <li><a href="/page2.html">htmlとcssをつかう</a></li>
          <li><a href="/page3.html">htmlで枠を作る</a></li>
          <li><a href="/page4.html">htmlの枠の使い方</a></li>
          <li><a href="/page5.html">cssでデザインする</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="footer_contents">©cri</div>
  </div>
 </body>
</html>


body{
  margin:0; /*ブラウザの初期設定の余白を削除*/
}
.header{
  height:150px;
  margin-bottom:20px;
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
.header_contents{
  margin:0 auto;
  width:980px;
}
.logo{
  width:200px;
  color:#52b6ac;
  font-size:12px;
  display: flex;
  align-items: center;
}
.logo img{
  width:50px;
  margin-right:10px;
}
.contents{
  margin:0 auto;
  width:980px;
}
.visual{
  height:400px;
  background: url("../images/top_bg.jpg") no-repeat center center; /* ../ は一つ前の階層に戻るという意味 */
  display: flex;
  align-items: center;
}
.copy{
  color:#FFF;
  margin-left:100px;
  font:normal 32px/2em sans-serif;
}
.text_wrapper{
  height:200px;
  display:flex;
  justify-content: center;
}
.text{
  width:280px;
  height:160px;
  margin-top:20px;
  padding-right:15px;
  border-right:8px solid #000;
  font:normal 18px/2em sans-serif;
  display:flex;
  align-items: center;
}
.menu{
  width:300px;
  font:normal 18px/1.6em sans-serif;
  display:flex;
  align-items: center;
}
.footer{
  height:120px;
  margin-top:30px;
  background-color:#bec9c9;
  display:flex;
  justify-content: center;
}
.footer_contents{
  width:980px;
  text-align: center;
  align-self: flex-end;
}
cssで使ったプロパティの数13
width7個
height5個
margin8個
padding1個
font4個
color4個
text-align1個
background3個
border1個
display7個
align-items5個
justify-content2個
align-self1個

コーディングのおさらい

step1. 紙で枠線を書く
step2. 枠線に名前をつける
step3. html書類にマークアップする
step4. cssで余白やサイズなどを記入し枠だけのデザインを完成させる
step5. 枠の中にテキストや画像といった要素を入れていく
入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. エクセル関数（カレンダーを作る）
  5. jQueryってなに？
  6. jQueryライブラリの読み込み
  7. 簡単な機能をjQueryで実装しよう
  8. 変数を使う
  9. 関数を使う
  10. コンソールでデータの確認
  11. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPのいろんな演算子
  9. データベースを作る（SQL）

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
実践

実践1（フロントエンドエンジニア 中級3）

  1. WebAPIを自作してVeu.jsで表示させる
  2. PHPの代わりにVue.jsでHTML表示
  3. コンポーネントでHTML表示させる

実践2（フロントエンジニア 中級4）

  1. コマンドラインを使おう
  2. パッケージマネージャーHomebrewを使う
  3. タスクランナーgulp.jsで処理の自動化
  4. Gitでファイルのバージョン管理
  5. Gitを扱うためのBacklogとsourcetree
  6. Gitで使われる用語の説明
  7. Gitでファイルを共有する
  8. Gitでファイルの取り込み
  9. jsフレームワークを使う(vue.js)

実践3（バックエンド 中級）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズ
powerd by