更新日 2021.04.20

#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タグを使います。 srcという属性タグはsourceソースの略です。
枠「logo」の中にimgタグで画像を、続いて文字を入力します。

cssでは親要素「logo」にdisplayプロパティ flexを使い、ロゴ画像と文字を横並びにするよう指示し、 align-itemsプロパティ centerで、親要素「logo」の天地に対してセンター合わせになるよう指示します。

このようになります。

背景色の指示と配置


<div class="header">
  header /*← 削除する */
  <div class="header_contents">
    <div class="logo">
      <img src="./images/cbc_icon.svg">
      CRI BOOT CAMP
    </div>
  </div>
</div>


.header{
  height:150px;
  margin-bottom:20px;
  /*border: 1px solid #000;*/  /*← 削除する */
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
cssでは子要素「header_contents」の配置について指示を書きます。displayプロパティ flexを使い、 align-itemsプロパティ centerで、親要素「header」の天地に対してセンター合わせになるよう指示します

このようになります。

※htmlでは、必要がなくなったheaderという文字を削除します。
cssでは、必要がなくなったborderプロパティを削除します。

背景画像の配置


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




  

    楽しく習得。

    もっと学習。
タイトルに当たる要素はhタグ(h1〜6 heading)を使いましょう。
brタグ(line break)はテキストを改行させるタグです。
※必要がなくなったvisualとcopyという文字を削除します。


.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;
}
visualクラスに対するflex関係のプロパティはもう大丈夫ですね。天地の中央に配置するためのものです。
背景画像を指定している最初の「 ../ドットドットスラッシュ 」は「一つ前のフォルダ」という意味です。style.cssファイルからみて imagesフォルダは一つ前の階層にあるフォルダなので../を入れます。
※必要がなくなったborderプロパティを削除します。

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>タグは別のページにリンクさせたいときに使います。<a href="リンクページファイル名">という感じに使います。


<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>


.text_wrapper{
  margin:0 auto;
  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>タグを入れます。

このようになります。

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

footer部分も入れて完成させましょう。
まず、不要な線を画面上に出している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{
  margin:0 auto;
  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;
}
サンプルサイト01
cssで使ったプロパティの数
width7個
height5個
margin8個
padding1個
font4個
color2個
text-align1個
background3個
border1個
display7個
align-items5個
justify-content2個

コーディングのおさらい

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. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

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

  1. コマンドラインを使おう
  2. パッケージマネージャーHomebrewを使う
  3. タスクランナーgulp.jsで処理の自動化
  4. Gitでファイルのバージョン管理
  5. Gitを扱うためのBacklogとsourcetree
  6. Gitで使われる用語の説明
  7. Gitでファイルを共有する
  8. リモートリポジトリの作成&プッシュ
  9. リポジトリをクローンする
  10. 新しいブランチを作成する
  11. 変更履歴をプルする
  12. 競合(コンフリクト)を解消する

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

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

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

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  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を作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで！ 誰でも無料でできます。
勧誘とかないですよ
https://cbc-study.slack.com
powerd by logo