動画データをhtmlで再生させる

www.ditjapan.com



まずはhtmnl5のvideoタグのプロパティを覚えましょう




src=""    (URL)ファイルのURL
height=""  数値 要素の高さ
width=""    数値 要素の幅
autoplay="" autoplay 自動的に再生を行います。
controls="" controls 動画再生をコントロールするUIを表示します。
loop=""   loop 動画を繰り返し再生します。
metadata 動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
poster="" (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
muted   動画に音声がついている場合、音を出さない設定にできます。
mediagroup="" 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。

css演習課題

演習1

<body>
style要素
style element
HTML文書内にまとめて設定します。
</body>

演習2

<body>
About wine

Chianti Classico Riserva

1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。
キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。
当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。
</body>


演習3

<body>
background-colorの設定

見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。
</body>

背景画像の指定

演習4

素材


完成イメージ



演習5
(水平方向に繰り返し)
素材

<body>
Page Design
</body>

完成イメージ



演習6
(垂直方向に繰り返し)
素材

<body>
Page Design
</body>

完成イメージ




演習7

素材

<body>
Page Design
背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。
また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。
このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。
</body>


完成イメージ



演習8
背景画像(繰り返さない)

素材

<body>
古池や蛙飛び込む水の音
芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。
明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、
「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。
明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。
発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。

完成イメージ






演習9
各値は適宜

宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。


完成イメージ


演習10(テキストは演習9のを使用)
素材



完成イメージ

divの使い方と1カラムレイアウト

カラムレイアウト
www.weblab.co.jp





divタグ  ・・ひとかたまりの範囲として定義する

divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。


今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。
カラムとは段を組むこと(段組)を指します。今回は1つのカラムを組んでレイアウトしていきます。
また画像も自身で選び、Photoshopで適切なサイズにトリミングして使用しましょう。

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

©️2020 Net Smart All Rights Reserved.

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの作成</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div class="concept">
<h2>Concept</h2>
<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div class="service">
<h2>Service</h2>
<p>低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
<div class="footer">
<p><small>&copy; 2021 Net Smart All Rights Reserved.</small></p>
</div>
</div><!-- /.container -->
</body>
</html>

style.css

@charset "utf-8";

/* リセット部分 */
html,body,h1,h2,p{
margin: 0;
padding: 0;
}

/* スタイル部分 */
body{
background-color: #dbd8b0;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 960px;
height: 350px;
background: url(../img/bg.jpg) no-repeat;
color: #FFF;
}
h1{
font-family: 'Ubuntu', sans-serif;
font-size: 42px;
padding: 30px 0 0 30px;
margin-bottom: 20px;
}
.header>p{
padding-left: 30px;
}
.concept{
width: 960px;
height: 400px;
background-color: #FFF;
}
h2{
text-align: center;
font-size: 40px;
font-family: 'Ubuntu', sans-serif;
padding: 50px 0 6px;
border-bottom: 6px solid #000;
width: 300px;
margin: 0 auto 30px;
}
.service{
width: 960px;
height: 400px;
background-color: #383a55;
color: #FFF;
}
.service>h2{
border-bottom: 6px solid #FFF;
}
.concept>p,.service>p{
width: 400px;
margin: 0 auto;
line-height: 2;
}
.footer{
width: 960px;
height: 100px;
background-color: #525151;
color: #FFF;
text-align: center;
}
.footer>p{
line-height: 100px;
}

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。


www.uniad.co.jp

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

文字を入れてみる

決めたサイズとメインカラーで背景レイヤーを作り、文言を入れてみる。

優先順位とジャンプ率

入れた文言に対し、訴求したい順に優先順位を決め、文字サイズやジャンプ率をここで決めましょう。

文字のジャンプ率で印象は大きく変わる

ferret-plus.com


tsutawarudesign.com




バナー全体のデザイン

フォントの種類や色、テーマに沿ったデザインを作っていきましょう。
中々アイデアが出ない場合は既存のバナーを参考にしましょう。



uxmilk.jp


既存のバナー制作

既存のバナーをモデルにし、バナー画像を作成する。


ローソンフレッシュのバナー
サイズ:300x250






通信制 科学技術学園高等学校のバナー
サイズ:300x250



フリー素材

食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

www.pakutaso.com

インターネット広告について

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。
広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。


dentsu-ho.com


dentsu-ho.com


上の記事にあるように2020年のインターネット広告費はマスメディア4媒体(テレビ、ラジオ、新聞、雑誌)とほぼ同じです。マスメディア4媒体の広告費は6年連続で減少していますが、インターネット広告費は年々増加しています。

インターネット広告の種類

ディスプレイ広告(ターゲット広告)

ディスプレイ広告とは、年齢や性別、地域、過去のWebサイト閲覧履歴などでターゲティングを行うことで、まだ自社のサービスや商品を知らない潜在層に適したWeb広告だと言えます。

リスティング広告

リスティング広告とは、ユーザーがGoogleYahoo!といった検索エンジンを使用して検索した際に表示されるページに、検索キーワードに応じて表示されるWeb広告です。ユーザーが広告をクリックして初めて料金が発生するクリック課金型であることも大きな特徴です。

純広告・バナー広告

純広告とは、特定のWebサイトの広告枠を買い取って掲載するWeb広告のことです。テキストや画像、動画での広告表示が可能で、バナー広告と呼ばれることもあります。

動画広告

動画広告とは、動画コンテンツを配信するWeb広告です。テキストや画像と比較して伝えられる情報量が多く、目を引きやすいため、効果の出やすい広告として多くの企業が取り組んでいます。特にYouTubeの動画に差し込まれるCMのような15秒程度の短い「TrueView広告」は今非常に需要が高くなっています。

digitalidentity.co.jp



バナーサイズについて

www.uniad.co.jp

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。これを使う事でfloatを使って作っていたレイアウトが感覚的に作れるようになります。

視覚で見るのが非常に解りやすいです。
www.youtube.com

メリット
  • 少ない記述で簡単に横並びにできる!
  • 横並びになった要素の高さが最初から揃ってる!
  • 要素を上下左右、好きな順序に並び替えられる!
  • 高さの異なる横並びの要素を、簡単に上下中央揃え!

などなど、本来CSSでは出来ずにjQueryなどで行っていた事が非常に簡単に出来るようになります。



Flexboxの基本

flexboxレイアウトを使うには親要素のdisplayプロパティに「flex」を指定するだけです。今回は「ul」要素を使います。

ul {
  display: flex;
}

flex-direction

flex-direction」プロパティを設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flex-direction: row; で左から右
       row-reverse; で右から左
       column; で上から下
       column-reverse; で下から上

ul {
  width:600px;
  margin: 20px;
  display: flex;
  flex-direction: row;
}
flex-wrap

flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrap: nowrap;(初期値)は各アイテムの幅が親要素の幅に収まるように縮小される。
flex-wrap: wrap; 各アイテムの幅が親要素の幅に収まらない場合、下に回り込みます。
flex-wrap:wrap-reverse; 子要素を折り返し、複数行に下から上へ並べる

justify-content

「justify-content」プロパティは、flexアイテムを一行に配置します。(text-alignの指定と類似)

justify-content: flex-start;(初期値)flexコンテナの左側に配置されます。
justify-content: flex-end;  flexコンテナの右側に配置されます。
justify-content: center; 中央に配置されます。
justify-content: space-between; 最初と最後のアイテムは端に、残りは等間隔で配置されます。
justify-content: space-around; 全てのアイテムが等間隔に配置されます。

子要素に指定

order

「order」プロパティは、display: flexを指定している親要素に配置される子の順番をコントロールします。
order: 1;
order: 2;
order: 3;



www.webcreatorbox.com




Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld

idとclassの使い方

htmlの要素(タグ)はh1など特別な物以外は基本的には複数使用する事が出来ます。
例えばpタグが4つある場合、それぞれのp要素に名前を付ける事で判別する事が出来るようになります。

idの使い方

idには「ファイル内で同じidは2回使えない」「1つの要素に付けられるidは1つだけ」というルールがあります。1つしか使えないidは、言わばとっておきの物なので、通常はcssでは使わずにjavascript等のプログラムの為に取っておきます。

<p id="txt">テキスト</p>

classの使い方

classはidに比べると使い方が自由で、同じclassを複数の要素に使う事が出来、1つの要素に複数のclassを付ける事が出来ます。なので、cssでは通常このclassを使います

<p class="txt">テキスト</p>
class名を複数付ける場合は1つ目と2つ目の間をスペースで空けます。
<p class="txt copy">テキスト</p>