WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

webライティングについて

その他

webライティング

www.slideshare.net










今回のテーマは

webの利便性と危険性

以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。

死にゆくウェブ、犯人はアプリ－便利さの裏で消える開放性

jp.wsj.com


今回の課題では

Counter argument（カウンター・アーギュメント）

というものを意識して書いてみましょう。


Counter argumentとは、簡単に訳すと「反論」「反対意見」といった感じです。
あまり馴染みの無い単語かもしれませんが、英文での論文やアカデミックエッセイと書くときには必須のテクニックです。勿論webライティングにも必要とされます。
「反論」「反対意見」と言っても、ある意見に対しての「反論」「反対意見」を書くのではなくて、自身の主張する意見に対して予め予期出来る「反論」や「反対意見」を敢えて自ら例に挙げ、その問題に対して説得力のある答えを自ら述べる事で自身の主張をより強固にする、といった手法です。一見とても難しそうに思えますが、普段皆が良く目にしているものにもこのカウンター・アーギュメントは使われています。


よく通販番組で商品の性能や品質の良さをこれでもか！という具合に説明し、最後にアシスタントが「でも…、お高いんでしょ？」という質問に対して「通常であれば〇〇円ですが、今なら特別割引で〇〇円です！」
というよくあるやつです。
商品を紹介する際に一方的に良い点ばかりを挙げていると、多くの視聴者は「そんなに良くて便利な物なら、どうせ値段が高いに決まっている」と思ってしまいます。そこをツッコまれる前に敢えて自ら値段が高いという「問題点」を挙げ、さらにその問題点を解決する事で、視聴者に高品質で高性能というメリットと高価格というデメリットが混在する商品のデメリットの部分を取り除き、あたかもメリットしかない商品というイメージを植え付ける、という手法です。

webライティングでもメリットをただひたすら羅列するのでは無く、デメリットも自ら挙げて、さらにそのデメリットの解決方法も加える事でよりメリットが強調される訳です。



参考資料

オープンソースとして爆発的に広がったwordpress
logmi.jp


フリー素材の問題点
news.livedoor.com


まとめサイトの問題点と背景
www.yomiuri.co.jp




人月の神話【新装版】

人月の神話【新装版】

第6回実技試験｜レスポンシブサイトの制作

その他 Webサイト制作
  • モバイルファーストでレスポンシブサイトにする事（ブレイクポイントは自由）
  • ロゴはsvg形式にする事
  • flexboxを１箇所以上で使用する事
  • .containerの幅には最大値を指定する事
  • img要素をフルード化する事
  • 画像のホバーアニメーションにcssのfilter機能を使う事
  • css3のanimation機能を使う事
  • cssのカスタムプロパティを1つ以上指定する事
  • コピーライトの西暦部分を動的（2019年になったら表示が2019になるよう）にする
  • 適切な余白、文字の大きさを各メディアクエリー内で指定する事
PCレイアウト

f:id:yachin29:20181109113040j:plain




SPレイアウト
f:id:yachin29:20181109113115j:plain




参考サイト
http://yachin29.com/school/test-5/

CSS3 filterでの画像加工

HTML5+CSS3

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。
それにより、フェルタ毎に複数の画像を用意する必要がなくなります。



cssのfilterプロパティで出来る事

  • grayscale（グレースケール）
  • saturate（彩度）
  • sepia（セピア）
  • hue-rotate（色相）
  • invert（色の反転）
  • blur（ぼかし）
  • brightness（明るさ）
  • contrast（コントラスト）
  • drop-shadow（ドロップシャドウ）
grayscale(値)

値：0～100%
備考：値が大きいほど、画像の色が白黒に近づく

saturate(値)

値：0～上限なし
備考：値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

sepia(値)

値：0～100%
備考：値が大きいほど、色が黒褐色に近づく。

hue-rotate(値)

値：0deg～360deg（上限・下限なし）
備考：360deg（1周）で元の色に戻る（-360degでも同じ）

invert(値)

値：0～100%
備考：値が大きいほど、写真のネガっぽくなる。

blur(値)

値：0px～上限なし
備考：値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能


brightness(値)

値：0～上限なし
備考：値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1～3：下限上限なし
値4～6：0～255
値7：0～上限なし
備考：値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4～6で色の指定する（色の三原色rgb）
値7で明るさを指定する









migo-media.com

モバイルファーストでのコーディング 

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>北欧家具のECサイトをモバイルファーストでトレース</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<div class="header-inner">
<h1><img src="img/logo.svg" alt="ロゴ"></h1>
<p class="burgur" id="btn"><span></span></p>
</div>
<nav>
</nav>
</header>

<div class="container">
<div class="main">
<div class="inner">
<div class="photo one"></div>
<div class="txt one"></div>
</div>
<div class="inner reverse">
<div class="photo two"></div>
<div class="txt two"></div>
</div>
<div class="inner">
<div class="photo three"></div>
<div class="txt three"></div>
</div>
<div class="inner reverse">
<div class="photo four"></div>
<div class="txt four"></div>
</div>
</div><!--/.main-->
<div class="one-col"></div>

<div class="three-col">
<div class="three-col-1">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-2">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
<div class="three-col-3">
<div class="three-col-photo"></div>
<div class="three-col-txt"></div>
</div>
</div><!--/.three-col-->
<footer></footer>
</div><!--/.container-->
</body>
</html>




スタイルシート

@charset "utf-8";
/* CSS Document */

:root {
  --bg_color: #f0ede7;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*モバイルレイアウト*/
body {
  background:var(--bg_color);
}
header {
  height:55px;
  background:#e4dfd6;
  margin-bottom:10px;
  padding:5px;
}
.header-inner {
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
}
h1 {
  width:150px;
  margin-right:10px;
}
.burgur {
  width:60px;
  height:45px;
  background:#EB6062;
  position:relative;
}
.burgur span {
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:0;
  right:0;
  bottom:10px;
  left:0;
  margin:auto;
}
.burgur span:after {
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:#444;
  position:absolute;
  top:20px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
.container {
  max-width:1366px;
  margin:0 auto;
}
.photo {
  height:30vh;
  background: url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  height:60vh;
  background:#c87f63;
  margin-bottom:10px;
}
.txt.two {
  background:#e1cfb9;
}
.txt.three {
  background:#dbdbdb;
}
.txt.four {
  background:#FFFFFF;
}
.one-col {
  height:80vh;
  background:#c7a96e;
  margin-bottom:10px;
}
.three-col-photo {
  height:25vh;
  background:url(../img/3col-01.jpg) no-repeat center center/cover;
}
.three-col-2>.three-col-photo {
  background:url(../img/3col-02.jpg) no-repeat center center/cover;
}
.three-col-3>.three-col-photo {
  background:url(../img/3col-03.jpg) no-repeat center center/cover;
}
.three-col-txt {
  height:50vh;
  background:#e4dfd6;
  margin-bottom:10px;
}
footer {
  height:80vh;
  background:#bed5db;
}

@media screen and (min-width:768px){
header {
  height:150px;
}
.container{
  padding:0 10px 10px 10px;
}
.inner {
  display:flex;
  flex-wrap: wrap;
}
.photo {
  width:calc(66.66% - 5px);
  height:80vh;
  margin:0 10px 0 0;
  background:url(../img/aw18.png) no-repeat 20px 20px, url(../img/main01.jpg) no-repeat center center/cover;
}
div:nth-of-type(2) .photo {
  background: url(../img/main02.jpg) no-repeat center center/cover;
}
.photo.three {
  background: url(../img/main03.jpg) no-repeat center center/cover;
}
.photo.four {
  background: url(../img/main04.jpg) no-repeat center center/cover;
}
.txt {
  width:calc(33.33% - 5px);
  height:80vh;
}
.inner.reverse {
  flex-direction:row-reverse;
}
.inner.reverse .photo {
  margin:0 0 0 10px;
}

.three-col-1,.three-col-2,.three-col-3 {
  display:flex;
}
.three-col-photo {
  width:50%;
  height:60vh;
}
.three-col-txt {
  width:50%;
  height:60vh;
}
}
@media screen and (min-width:901px){
.three-col {
  display:flex;
}
.three-col-1,.three-col-2,.three-col-3 {
  width:calc((100% - 20px) / 3);
  flex-direction:column;
}
.three-col-1,.three-col-2 {
  margin-right:10px;
}
.three-col-photo {
  width:100%;
  height:40vh;
}
.three-col-txt {
  width:100%;
  height:60vh;
}
}

高機能なフィルタリングjQueryプラグイン　「Shuffle.js」

jQueryプラグイン ポートフォリオ

vestride.github.io


デモページ

http://yachin29.com/school/shuffle/






jQuery

$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
htmlタグを参照文字で書く
<li><a href="img/04.jpg" data-lightbox="photo" data-title="<a href="https://www.kirin.co.jp/" target="_blank">サイトへ"><img src="img/03-thum.jpg" alt=""></a></li>

を参照文字に直すと

<li><a href="img/04.jpg" data-lightbox="photo" data-title="&lt;a href=&quot;https://www.kirin.co.jp/&quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;">テキスト</a></li>

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィルタリングとモーダルの組み合わせ</title>
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
.container {
  width:840px;
  margin: 0 auto;
}
h1 {
  padding:20px 0;
  margin-bottom:60px;
}
.g-nav ul {
  display:flex;
  margin-bottom:60px;
}
.g-nav li {
  margin-right:20px;
}
.g-nav li a {
  display:block;
  padding:10px;
  font-size:18px;
}
.g-nav li a:hover {
  background:#DDD;
}
.g-nav li.active {
  background:#DDD;
}
.grid li {
  width:200px;
  float:left;
  margin:5px;
}
</style>
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.shuffle.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');
			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});
		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>
</head>
<body>
<div class="container">
<header>
<h1>Shuffle.js</h1>
<nav class="g-nav">
<ul id="btn">
<li class="active" data-group="all"><a href="#">all</a></li>
<li data-group="html"><a href="#">HTML&amp;CSS</a></li>
<li data-group="js"><a href="#">JavaScript</a></li>
<li data-group="php"><a href="#">PHP</a></li>
<li data-group="banner"><a href="#">バナー</a></li>
</ul>
</nav>
</header>
<div class="content">
<ul class="grid" id="animationList">
<li data-groups='["html"]'><a href="img/model1.jpg" data-lightbox="image-1" data-title="&lt;a href=&quot; &quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;"><img src="img/00.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>