2020-04-23

HTML＋CSS＋スライド - 実践

HTML CSS jQuery

店舗サイトをつくる（応用編）

PSDカンプからコーディング
クラス名「container」で、横幅960pxに統一

header

h1（左）とナビゲーション（右）が横並び
スライダーを設置：カスタマイズ

main

h2とp（キャッチコピー）は、１カラム
おすすめ写真３点が横並び、画像下にメニュー名
「NEWS」内容は、定義型リスト

footer

フッターナビゲーション
TEL、アクセス情報は２カラム
Copyright

実践

例

出典：01/18 CSSレイアウト - HTML文書構造 - 求職者支援訓練12月19日開講Webサイト制作科白描

＜カンプ＞
odnax.hatenablog.com

リンク先の例（キャプチャ）の下＞「素材」をダウンロード
上記の例（キャプチャ）は応用編、ダウンロードしたカンプは通常編のため、例を元にして、カンプの素材を切り出してコーディングします。

テキスト

タイ料理のお店 THAI-NAMA

CONCEPT
MENU
ACCESS
CONTACT

生春巻き

THAI-NAMAは
タイ風の家庭的な料理をご提供しているお店です。
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。

おすすめメニュー
フォー
カオソーイ
ヤムウンセン

NEWS
2019/12/15
冬のメニューを追加しました
2019/02/01
春の新作メニューを追加しました

CONCEPT
MENU
ACCESS
CONTACT

03-1234-4567
reservation@thai-nama.net

〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F
JR渋谷駅徒歩5分
JR原宿駅徒歩6分
副都心線、千代田線明治神宮前徒歩7分

© 2019 タイ料理のお店 THAI-NAMA

ポイント

jQueryのプラグイン「bxSlider」をカスタマイズ
- キャプションのスタイルを変更して、画像名として使用
回り込みにfloat、display: flex;を使用

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
  $(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,//スライダー下の点を消す
    captions: true
  });
});
</script>
<title>タイ料理のお店 | THAI-NAMA</title>
</head>
<body>
<header>
<div class="container">
<h1><a href="#"><img src="img/logo.jpg" alt="タイ料理のお店 THAI-NAMA"></a></h1>
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</header>

<main>
<div class="container">
<div class="mainimg">
<ul class="bxslider">
<li><img src="img/mainImage01.jpg" alt="生春巻き" title="生春巻き"></li>
<li><img src="img/mainImage02.jpg" alt="鯛" title="鯛"></li>
</ul>
</div>
<p class="intro">THAI-NAMAは<br>
タイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>

<div class="recommend">
<h2 class="red wf-sawarabigothic">おすすめメニュー</h2>
<ul class="subimg">
<li><a href="#"><img src="img/subimage01.jpg" alt="フォー">フォー</a></li>
<li><a href="#"><img src="img/subimage02.jpg" alt="カオソーイ">カオソーイ</a></li>
<li><a href="#"><img src="img/subimage03.jpg" alt="ヤムウンセン">ヤムウンセン</a></li>
</ul>
</div>
	
<div class="news">
<h2 class="wf-sawarabigothic">NEWS</h2>
<dl>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/12/15</dt>
<dd>冬のメニューを追加しました</dd>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/02/01</dt>
<dd>春の新作メニューを追加しました</dd>
</dl>
</div>
</div><!-- container -->
</main>

<footer>
<div class="container">
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="wrapper">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="email">reservation@thai-nama.net</p>
</div>
<div class="axs">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F<br>
JR渋谷駅徒歩5分<br>
JR原宿駅徒歩6分<br>
副都心線、千代田線明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>&copy; 2019 タイ料理のお店 THAI-NAMA</small></p>
</div><!-- container -->
</footer>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,div,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  color: #797979;
}

/* layout */
.container {
  width: 960px;
  margin: 0 auto;
}
footer {
  background: #8fc31f;
  color: #FFF;
  padding: 20px 0;
}

/* nav */
header {
  overflow: hidden;
  border-bottom: 3px solid #a40000;
}
h1 {
  float: left;
  margin: 52px 0 0;
}
.nav {
  display: flex;
  letter-spacing: 2px;
}
header .nav {
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 14px;
  padding-top: 70px;
}
header .nav a {
  display: block;
  line-height: 3.0;
  padding-left: 42px;
}
footer .nav {
  justify-content: space-around;
  width: 700px;
  margin: 0 auto 30px;
  font-size: 18px;
}

/* slider */
.bx-wrapper {
  border: none;
}
.bx-wrapper .bx-prev {
  background: url(../img/controls.png)
}
.bx-wrapper .bx-next {
  background: url(../img/controls.png) -43px -32px no-repeat;
}
.bx-wrapper .bx-loading {
  background: url('../img/bx_loader.gif') center center no-repeat #ffffff;
}
.bx-wrapper .bx-caption {
  background: none;
  left: 3%;
  top: 24%;
}
.bx-wrapper .bx-caption span {
  color: rgba(80, 80, 80, 0.75);
  font-size: 2.2rem;
}/* captions-titleを画像名として使用 */
.bx-wrapper img {
  width: 960px;
  height: 490px;/* 最後のスライダー画像が最初に表示されてしまう対処法 */
}

/* item */
.mainimg {
  margin-bottom: 26px;
}
.intro {
  text-align: center;
  line-height: 2.0;
  margin-bottom: 40px;
}
.recommend {
  text-align: center;
}
.recommend h2 {
  margin-bottom: 10px;
}
.wf-sawarabigothic {
  font-family: "Sawarabi Gothic";
}
.red {
  color: #a40000;
}
.subimg {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #797979;
}
.subimg li {
  width: 300px;
  padding: 6px;
  border: 1px solid #797979;
  margin: 4px 4px 26px;
}
.subimg img {
  margin-bottom: 6px;
}
.news {
  margin-bottom: 26px;
}
.news h2 {
  margin: 20px 0 10px;
}
.fa-square {
  margin-right: 5px;
}
.news dt {
  float: left;
  margin-right: 10px;
}
.news dt, .news dd {
  line-height: 1.6;
}

.wrapper {
  overflow: hidden;
  margin-bottom: 26px;
}
.info {
  float: left;
  width: 400px;
  height: 90px;
  margin: 0 20px;
}
.axs {
  float: right;
  width: 500px;
  font-size: 14px;
}
.axs p {
  line-height: 1.6;
}
.tel {
  font-size: 24px;
  margin-bottom: 4px;
}
.email {
  font-size: 20px;
}
.copy {
  text-align: center;
}

＜参考サイト＞

odnax.hatenablog.com

2020-04-22

DreamweaverのExtract機能

HTML CSS Photoshop その他

DreamweaverのExtract機能を使う

以前は「Brackets」の「Extract for Brackets」を使用していましたが、開発終了との悲報を受けDreamweaverに移行しました。Brackets…無料で素晴らしいソフトです。Extract…ぜひ戻ってきていただきたい。

Dreamweaverとは

Webサイト制作ソフト

Extractとは

デザインカンプ（PSDデータ）から、CSSとテキストデータを取り出せます。
カラー、グラデーション、フォントなどの情報を取得できる機能
アセット（画像）の抽出はもちろんのこと、画像の比率（画像の大きさ）を選択して抽出することも可能

Extracet使い方

Dreamweaverを開く
新規ドキュメント＞HTML＞index.htmlを作成
メニューバー「ウィンドウ＞「Extract」＞「PSDをアップロード」＞PSDファイルをアップロード
画像を選択＞「↓」（アセットを抽出）＞保存

f:id:hak00810:20200423155608p:plain

スライドなどで重なった画像（非表示部分）なども「レイヤー」で表示させれば該当部分を抽出できます。

f:id:hak00810:20200423155641p:plain

[関連] Dreamweaverの設定

環境設定
- 「Extract」＞「抽出した画像の保存形式：JPEG」
- 「フォント」＞「コードビュー」＞12pt（中）
サイト設定を行う
- 相対ルートパスでのコーディング、サイト内一括検索置換、画像ファイル名変更など自動対応できます。
「表示」＞「コードビューオプション」＞「非表示文字」にチェック
- 半角/全角スペースの違い、改行/タブ位置などがわかりやすくなります。
表示を確認する
- 「表示」＞「分割」＞「コード-ライブ」
- 画面右下のマーク「リアルタイムプレビュー」
- リアルタイムプレビューでのHTML文法チェックは、ブラウザ「Google Chrome」の拡張機能「HTMLエラーチェッカー」が使用できないので、The W3C Markup Validation Serviceなどを使用します。
プレビューで指定通りではない箇所の確認、様々なプラグインのカスタマイズ
- ブラウザ「Google Chrome」プレビュー時に右クリック＞「検証」＞左上↖︎（Select an element in the page to inspect it）をクリック＞調べたい要素をクリック＞右窓の「Style」でCSSを確認して、変更したい箇所を自分のCSSで指定します。

f:id:hak00810:20200423150358p:plain
＜参考サイト＞

blog.maromaro.co.jp
www.marineroad.com
www.pseudo-knowledge.com

2020-04-21

bxSlider - jQueryプラグインのスライダー

HTML CSS jQuery

(2020-04-27 加筆)

bxSliderを設置する

jQuery プラグインのスライダー
スマートフォン、タブレットなどのレスポンシブにも対応しています。

f:id:hak00810:20200423181738p:plain
＜bxSlider＞
bxslider.com

方法１：head内にCDNで読み込む

CDN＝Content Delivery Network：ネットワーク経由でコンテンツを提供できるサービス

＜HTML：head内＞

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
  $(function(){
  $('.bxslider').bxSlider({
    auto: true,
  });
});
</script>

方法２：ダウンロードしてhead内に読み込む

bxSlider＞「The Other Ways」＞「Download jquery.bxslider.zip here」をクリックしてダウンロード
- jquery.bxslider.js、jquery.bxslider.css、bx_loader.gif、controls.pngを任意の場所に設置します。

＜HTML：head内＞

<link href="css/jquery.bxslider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
  $(function(){
  $('.bxslider').bxSlider({
    auto: true,
  });
});
</script>

body内にスライドの中身を記述

titleは画像の説明や名前を記載したい場合に使用します。
- head内のcaptions: true、body内のimgにtitleが必要です。

＜HTML：body内＞

<ul class="bxslider">
<li><img src="../images/sample-01.png" alt="" title=""></li>
<li><img src="../images/sample-02.png" alt="" title=""></li>
<li><img src="../images/sample-03.png" alt="" title=""></li>
</ul>

カスタマイズ

元の設定を生かして変更を加える

ブラウザ「要素を検証」＞変更したいセレクタ（クラス名など）、スタイルを確認し、jquery.bxslider.min.cssの下にstyle.cssを設置してカスタマイズした設定を上書きします。

出典：01/18 CSSレイアウト - HTML文書構造 - 求職者支援訓練12月19日開講Webサイト制作科白描

＜HTML：head内＞

<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"><!-- カスタマイズ設定 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
  $(function(){
  $('.bxslider').bxSlider({
    auto: true,//自動再生
    pager: false,//スライダー下の点を消す
    captions: true//スライド画像下部の説明文を表示させる
  });
});
</script>

＜CSS：style.css＞

/* slider */
.bx-wrapper {
  border: none;
}
.bx-wrapper .bx-prev {
  background: url(../img/controls.png)
}
.bx-wrapper .bx-next {
  background: url(../img/controls.png) -43px -32px no-repeat;
}
.bx-wrapper .bx-loading {
  background: url('../img/bx_loader.gif') center center no-repeat #ffffff;
}
.bx-wrapper .bx-caption {
  background: none;
  left: 3%;
  top: 24%;
}
.bx-wrapper .bx-caption span {
  color: rgba(80, 80, 80, 0.75);
  font-size: 2.2rem;
}

スライダーの白い枠線を消す

.bx-wrapper {
  border: none;
}

スライダー内のPREV/NEXTボタンの色、画像のリンク先を変更

contorols.pngをPhotoshopで修正します。
- Photoshop＞特定色域の選択で色を変更＞WEB用に保存＞任意の場所に保存

f:id:hak00810:20200427125158p:plain

contorols.png / loader.gif*は、保存場所を変更しているので場所指定を記述し直します。（*方法２の場合）

.bx-wrapper .bx-prev {
  background: url(../img/controls.png)
}
.bx-wrapper .bx-next {
  background: url(../img/controls.png) -43px -32px no-repeat;
}
.bx-wrapper .bx-loading {
  background: url('../img/bx_loader.gif') center center no-repeat #ffffff;
}

captions / titleを画像名として文字サイズ、位置を変更

通常captions: trueにすると、スライド画像の下部に灰色のライン-白文字で表示されるので、これに変更を加えます。

.bx-wrapper .bx-caption {
  background: none;
  left: 3%;
  top: 24%;
}
.bx-wrapper .bx-caption span {
  color: rgba(80, 80, 80, 0.75);
  font-size: 2.2rem;
}

数種類のJavaScriptを併用するとき

方法１：head内で外部リンクにして、HTMLの見づらさを改善します。

<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"><!-- カスタマイズ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/script.js"></script><!-- カスタマイズ -->

方法２：body内の最下部へ移動

スクリプトが長くなると読み込みに時間がかかるので、負荷軽減のために移動します。読み込みの順序は、見た目のCSSが先、動的作用のスクリプトが後の方が望ましいとされています。

<head>
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"><!-- カスタマイズ -->
</head>
<body>
〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/script.js"></script><!-- カスタマイズ -->
</body>

最後のスライド画像が最初に表示されてしまう問題の対処法

CSSに横幅と高さを指定します。SP表示のときに不具合あり

＜CSS＞

/* △PC表示だけでよければ高さをpxで固定すれば解消できるが… */
.bx-wrapper img {
  width: 960px;
  height: 490px;
}

高さがpxで固定されないと発生する問題のようで、PC表示のときは、高さをpxで固定できるため不具合が解消されますが、SP表示では「max-width: 100%」のため不具合がでます。
そのため、参考サイトにより、下記の方法をとります。

プラグインのソースを変更

「3.1.1/jquery.min.js」リンク、「bxSlider v4.2.1d」読み込みで検証しています。
1. 最後の行を追加します。
＜jquery.bxslider.js＞

    // create a namespace to be used throughout the plugin
    var slider = {},
    // set a reference to our slider element
    el = this,
    // get the original window dimens (thanks a lot IE)
    windowWidth = $(window).width(),
    windowHeight = $(window).height();
    var imgWidth = el.width();//追加

2. 「setPositionProperty(-position.left」を「setPositionProperty(-imgWidth」に修正します。
＜jquery.bxslider.js＞

   if (slider.settings.mode === 'horizontal') { setPositionProperty(-imgWidth, 'reset', 0); }//修正

＜参考サイト＞

on-ze.com
wemo.tech

2020-04-20

複数ページのリンク - 実践

HTML CSS

複数ページのリンクをつくる

「season」フォルダを作る
メインビジュアルを960×250pxにする
- トップページを４分割、各ページは１枚の画像にする
ナビゲーションは、カーソルを合わせたときのホバーの色を変える
画像はフリー素材を用意

実践

例

出典：01/19 複数ページのリンクを作成 - 求職者支援訓練12月19日開講Webサイト制作科白描

ポイント

bodyにidを設定してリンクとホバーの色を設定。見出しなどの要素も作成する場合、色分け設定しやすくなります。
bodyのid、メインビジュアルの画像ファイル名、ナビゲーションのcurrentを変化させれば、すぐに別ページが作成できます。

解答

＜HTML：トップページ＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>四季の風景</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body id="home">
<div class="container">
<h1>四季の風景</h1>
<p>日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。</p>
<div class="mainimg"><img src="img/mainimg.jpg" alt="四季の風景">
</div>
<ul class="nav">
<li><a href="#" class="home current">ホーム</a></li>
  <li><a href="spring/" class="spring">春</a></li>
  <li><a href="summer/" class="summer">夏</a></li>
  <li><a href="fall/" class="fall">秋</a></li>
  <li><a href="winter/" class="winter">冬</a></li>
</ul>
</div>
</body>
</html>

＜CSS＞

@charset utf-8;

/* reset */
html,body,h1,p,div,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
img {
  border: none;
  vertical-align: bottom;
}
ul,li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;/* 受け継ぐ */
}

/* body */
body {
  color: #333;
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* layout */
.container {
  width: 960px;
  margin: 0 auto;
}
h1,p {
  text-align: center;
  margin: 20px;
}
/*
.nav {
  display: flex;
  justify-content: space-between;
}floatとは別の横並び方法
*/
.nav {
  overflow: hidden;
}
.nav li a {
  float: left;
  width: calc(960px / 5);
  height: 46px;
  padding: 12px 0;
  display: block;
  border-left: 1px solid #CCC;
  text-align: center;
  box-sizing: border-box;/*ボーダーを内側に入れてカラム落ちを防ぐ*/
}
.nav li:last-child a {
  border-right: 1px solid #CCC;
}
a.home:hover, #home .current {
  border-bottom: 5px solid #c1b58e;
}
a.spring:hover, #spring .current {
  border-bottom: 5px solid #ec9a99;
}
a.summer:hover, #summer .current {
  border-bottom: 5px solid #1d8dc6;
}
a.fall:hover, #fall .current {
  border-bottom: 5px solid #b27f3a;
}
a.winter:hover, #winter .current {
  border-bottom: 5px solid #868686;
}

＜HTML：春のページ＞

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>四季の風景</title>
  <link href="../css/style.css" rel="stylesheet">
</head>
<body id="spring">
  <div class="container">
    <h1>四季の風景</h1>
    <p>日本では春・夏・秋・冬、それぞれの季節に風景の様々な変化を感じることができます。</p>
    <div class="mainimg"><img src="../img/spring.jpg" alt="四季の風景">
    </div>
    <ul class="nav">
      <li><a href="../" class="home">ホーム</a></li>
      <li><a href="../spring/" class="spring current">春</a></li>
      <li><a href="../summer/" class="summer">夏</a></li>
      <li><a href="../fall/" class="fall">秋</a></li>
      <li><a href="../winter/" class="winter">冬</a></li>
    </ul>
  </div>
</body>
</html>

odnax.hatenablog.com

2020-04-19

PLACEHOLDER - ダミー画像を簡単に挿入

HTML CSS

PLACEHOLDER.COM ダミー画像を簡単に挿入する

画像が未定。納品待ちなどの場合に使用します。
サイズは960×150pxで指定しています。
数字を変えれば欲しいダミー画像枠ができます。

＜HTML＞

<img src="https://via.placeholder.com/960x250">

f:id:hak00810:20200420214308p:plain

画像の色、テキストの色も任意に変更できます。

<img src="https://via.placeholder.com/960x250/666666/CCCCCC">

f:id:hak00810:20200420214341p:plain

背景画像で使用する場合

セレクタ { background:url(https://via.placeholder.com/960x250) center no-repeat; background-size:cover;}

gihoh.net

2020-04-18

２カラムレイアウト - 実践

HTML CSS

２カラムレイアウト

２列に別れたレイアウトのこと

column：列、項目
row：行、レコード

実践

例

出典：01/11 2カラムレイアウト - 実践 - 求職者支援訓練12月19日開講Webサイト制作科白描

テキスト

Mont-Saint-Michel

フランスの旅フランス国旗
モンサンミシェル

フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。

カテゴリー
    遺跡
地域
    フランス北西部のノルマンディー地方
アクセス
    レンヌからバスで１時間30分

世界の旅

文化・芸術・ファッション・グルメ・・・世界の旅には、様々な楽しみ方があります。
自分の個性にあったステキなフランスの旅を見つけてください。

<サンプル画像>

出典：01/11 2カラムレイアウト - 実践 - 求職者支援訓練12月19日開講Webサイト制作科白描

f:id:hak00810:20200423153834j:plain
※モン・サン・ミシェルの画像は、フリー画像を加工して自分で用意

解答

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>２カラムレイアウト 実践</title>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><img src="img/logo.gif" alt="フランスの旅" class="logo"><img src="img/flag_f.gif" alt="フランス国旗" class="flag"></h1>
<h2>Mont-Saint-Michel</h2>
</header>
<div class="container">
<div class="wrapper">
<div class="main">
<h3><i class="far fa-thumbs-up"></i>
  モンサンミシェル<img src="img/Mont_Saint_Michel.jpg" alt="Mont-Saint-Michel" class="mainimg"></h3>
<p>フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。</p>
</div>

<div class="sidebar">
<dl>
<dt>カテゴリー</dt>
<dd>遺跡</dd>
<dt>地域</dt>
<dd>フランス北西部のノルマンディー地方</dd>
<dt>アクセス</dt>
<dd>レンヌからバスで１時間30分</dd>
</dl>
</div>
</div><!-- wrapper -->

<div class="comment">
<h4>世界の旅</h4>
<p>文化・芸術・ファッション・グルメ・・・世界の旅には、様々な楽しみ方があります。<br>
自分の個性にあったステキなフランスの旅を見つけてください。</p>
</div>
</div><!--container-->
<footer>
<p><small>&copy;世界の旅</small></p>
</footer>
</body>
</html>

＜CSS＞

@charset "utf-8";

/* reset */
html,body,h1,h2,h3,h4,p,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  border: none;
  vertical-align: bottom;
}
body {
  background: #FFF;
  font-size: 16px;
}

/* layout */
header, .container {
  width: 860px;
  margin: 0 auto;
}
.logo, .flag {
  width: auto;
  height: 70px;
  margin: 10px 20px 10px 0;
}
h2 {
  background: #4299F0;
  color: #FFF;
  text-align: right;
  font-family:
    Georgia,
    serif;
  font-weight: bold;
  padding: 5px 20px;
  margin-bottom: 26px;
}
i {
  color: #4299f0;
}
h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
p {
  line-height: 1.6;
}
.mainimg {
  width: 240px;
  height: 256px;
  float: right;
  margin: 0 0 0 15px;
}
.wrapper {
  overflow: hidden;
  margin-bottom: 26px;
}
.main {
  float: left;
  width: 600px;
}
.sidebar {
  float: right;
  width: 220px;
  margin: 0 0 0 30px;
}
dl {
  border: 1px solid #4299F0;
}
dt {
  color: #FFF;
  background: #4299f0;
  text-align: center;
  padding: 5px;
}
dd {
  padding: 12px 14px;
  font-size: 14px;
}
.comment {
  border: 1px solid #666;
  background: #EEE;
  padding: 10px 20px;
  margin-bottom: 30px;
}
h4 {
  border-left: 7px solid #4299f0;
  padding: 2px 5px 2px 7px;
  margin: 5px 0;
}
.comment p {
  font-size: 14px;
}
footer {
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 10px 0 50px;
}

＜参考サイト＞

odnax.hatenablog.com

2020-04-17

floatを使用した回り込み

HTML CSS

float

float = 浮遊 = 回り込み
- p要素内の先頭文字と同じ扱いの画像にfloatを設定すると、続く文字が画像の後ろに続き並ぼうとします。それを「画像の後ろに文字が回り込んでいる」と表現します。

実践１

例

出典：01/09 floatを使った回り込み - 求職者支援訓練12月19日開講Webサイト制作科白描

テキスト

サンプル画像１つめの段落のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。

２つめの段落のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。

サンプル画像３つめの段落のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。

４つめの段落のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。

＜サンプル画像＞

出典：01/09 floatを使った回り込み - 求職者支援訓練12月19日開講Webサイト制作科白描

解答

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  html,body,p {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family:
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;
  }
  body {
   background: #FFF;
   color: #333; 
  }
  img {
    border: none;
    vartical-align: bottom;
  }
  .container {
    width: 800px;
    margin: 0 auto;
  }
  p {
  margin: 0 0 10px;
  line-height: 1.5;
  }
  .right {
  float: right;
  margin: 0 0 10px 20px;
  }
  .left {
  float: left;
  margin: 0 20px 10px 0;
  }
</style>
<title>float実習</title>
</head>
<body>
<div class="container">
<p><img src="20180612082804.jpg" alt="つくし画像" class="right"><b>１つめの段落</b>のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。</p>

<p><b>２つめの段落</b>のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。</p>

<p><img src="20180612082804.jpg" alt="つくし画像" class="left"><b>３つめの段落</b>のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。</p>

<p><b>４つめの段落</b>のテキストです。このテキストが画像の横に回り込みます。このテキストが画像の横に回り込みます。
</p>
</div>
</body>

実践２

例

出典：01/09 floatを使った回り込み - 求職者支援訓練12月19日開講Webサイト制作科白描

テキスト

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。800円

シーフードスパゲッティ
バルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。900円

＜サンプル画像＞

出典：01/09 floatを使った回り込み - 求職者支援訓練12月19日開講Webサイト制作科白描

解答

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  html,body,h1,h2,p,b {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family:
      "Hiragino Kaku Gothic ProN",
      Meiryo,
      sans-serif;
  }
  img {
    border: none;
    vertical-align: bottom;
  }
  body {
    background: #FFF;
    font-size: 16px;
  }
  #container {
    width: 500px;
    margin: 0 auto;
  }
  h1 {
    width: 231px;
    margin: 20px auto 40px;  
  }
  h2 {
    border-left: 7px solid orange;
    color: brown;
    padding: 2px 10px;
    margin: 0 0 10px 0;
    font-size: 18px;
  }
  p {
    line-height: 1.4;
  }
  .menu {
    width: 300px;
    float: left;
    margin: 0 10px 0 0;
    line-height: 1.6;
  }
  .image {
    width: auto;
    margin: 0 0 30px 0;
  }
</style>
<title>float2</title>
</head>
<body>
<div id="container">
<h1><img src="title.gif" alt="今月のおすすめ"></h1>
  
<h2>きのこのオムライス</h2>
<div class="menu"> 
<p>ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<b>800円</b></p>
</div>
<div class="image">
<img src="ph01.jpg" alt="きのこのオムライス">
</div>

<h2>シーフードスパゲッティ<br>
バルサミコ風味</h2>
<div class="menu">
<p>エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<b>900円</b></p>
</div>
<div class="image">
<img src="ph02.jpg" alt="シーフードスパゲッティ">
</div>
</div>
</body>

＜参考サイト＞
odnax.hatenablog.com