WEBサイト制作の勉強

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

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

レスポンシブ レイアウトの作成

ポイント

  • レスポンシブサイトに必要なmetaの設定
  • cssは外部参照で記述し、適切なリセットをかける事
  • 960pxまではPC、959~768pxまではタブレット、767px以下はモバイルレイアウトになるようにメディアクエリーを設定する
  • flexプロパティを使ってコンテンツを横に並べる
  • 画像を自身で用意、適切なサイズにトリミングしフルードイメージに設定する
  • ロゴをsvgで作成し、h1の背景画像に指定する。この時画像がはみ出ないようにbackground-sizeで適切な指定をする
  • font-awesomeを使ってアイコンを表示させる
  • transformとtranstionを使ってホバーアクションを設定する
  • GoogleMapを貼り付け、GoogleMapをcssで幅・高さを指定出来るように設定する-


作例
f:id:yachin29:20200713114511j:plain



ホバーアクション例
f:id:yachin29:20200713114719p:plain




使用するテキスト

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

HOME
CONCEPT
SERVICE
ACCESS

必要なものは、ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマートなインターネットライフを送るお手伝いを致します。

CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore




会社情報

会社名
株式会社Net Smart

住所
東京都豊島区南池袋

電話番号
03-0000-0000

従業員
1000名

資本金
100,000,000円


© Net Smart all rights reserved.

使用するリセットcss


yachin29.hatenablog.com


作成
http://school.yachin29.com/test02/


8月6日分作業データ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブサイトの作成</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="inner">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを</p>
</div><!-- /.inner -->
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav>
</header>

<p class="main-photo"><img src="https://placehold.jp/3d4070/ffffff/960x300.jpg" alt=""></p>

<div class="main">
<h2>必要なものは、ビジネスの価値を届けるデザインの力。</h2>
<p class="lead">Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br>よりスマートなインターネットライフを送るお手伝いを致します。</p>
</div>

<div class="wrapper">
<div class="box">
<h3>CONCEPT</h3>
<p class="box-photo"><img src="https://placehold.jp/b81a71/ffffff/600x400.jpg" alt=""></p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->

<div class="box">
<h3>SERVICE</h3>
<p class="box-photo"><img src="https://placehold.jp/b81a71/ffffff/600x400.jpg" alt=""></p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->

<div class="box">
<h3>ACCESS</h3>
<p class="box-photo"><img src="https://placehold.jp/b81a71/ffffff/600x400.jpg" alt=""></p>
<p class="box-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
</div><!-- /.wrapper -->


<div class="wrapper">
<div class="info">
<h2>会社情報</h2>
<dl>
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd>03-0000-0000</dd>
<dt>従業員</dt>
<dd>1000名</dd>
<dt>資本金</dt>
<dd>100,000,000円</dd>
</dl>
</div><!-- /.info -->

<div class="map">
<h2>Map</h2>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9296463658147!2d139.71221001474763!3d35.72794873501677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1596676662239!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div><!-- /.map-inner -->
</div><!-- /.map -->
</div><!-- /.wrapper -->

<footer>
<p><small>&copy; Net Smart all rights reserved.</small></p>
<ul class="sns">
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i>
</a></li>
</ul>
</footer>
</body>
</html>

style.css

@charset "utf-8";

:root{
--main-color:#008080;
}


/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 * 全ての要素にbox-sizing: border-box;.
 * 全ての背景画像にbackground-repeat: no-repeat.
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}

/* PCレイアウト */
header{
margin-bottom: 40px;
}
.inner{
max-width: 960px;
margin: 0 auto;
}
h1{
color:var(--main-color);
margin-bottom: 10px;
font-family: 'Josefin Sans', sans-serif;
padding-top: 20px;
font-size: 40px;
}
header p{
margin-bottom: 10px;
}
.g-nav{
width: 100%;
height: 50px;
background-color: var(--main-color);
}
.g-nav>ul{
max-width: 960px;
margin: 0 auto;
display: flex;
}
.g-nav li{
width: 25%;
height: 50px;
}
.g-nav a{
display: block;
color: #FFF;
text-align: center;
line-height: 50px;
border-right: 1px solid #FFF;
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: gray;
}
.main-photo{
max-width: 960px;
margin:0 auto 60px;
}
.main-photo>img{
max-width: 100%;/* フルードイメージの指定 */
}
.main{
max-width: 960px;
margin: 0 auto 60px;
text-align: center;
}
.main>h2{
margin-bottom: 30px;
}
.lead{
line-height: 2.4;
}
.wrapper{
max-width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
padding: 10px;
}
.box{
width: 30%;
padding: 10px;
transition: 0.3s;
}
.box:hover{
box-shadow: 0 0 6px #BBB;/* x方向、y方向、影の距離、色 */
}
.box img{
max-width: 100%;
}
.box>h3{
color: var(--main-color);
margin-bottom: 10px;
border-left: 20px solid var(--main-color);
padding-left: 20px;
}

.info{
width: 42%;
}
.info>dl{
display: flex;
flex-wrap: wrap;
}
.info dt{
width: 30%;
margin-bottom: 20px;
}
.info dd{
width: 70%;
margin-bottom: 20px;
}
.map{
width: 42%;
}
.map-inner{
height: 340px;
}
.g-map{
width: 100%;
height: 100%;
}
.info>h2,.map>h2{
color: var(--main-color);
text-align: center;
margin-bottom: 20px;
}
footer{
width: 100%;
background:var(--main-color);
}
footer>p{
text-align: center;
color: #FFF;
padding:30px 0;
}
.sns{
display: flex;
max-width: 960px;
margin: 0 auto;
}
.sns>li{
margin-right: 20px;
}
.sns a{
color: #FFF;
font-size: 40px;
}

cssプラグインを使ってハンバーガーメニューを作る

f:id:yachin29:20170417125330p:plain

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。



jonsuh.com



アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。


<p class="hamburger " id="btn">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</p>

Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。



coliss.com


Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

bm.s5-style.com


81-web.com


www.ikesai.com



muuuuu.org



動画を使ったWEBサイト

www.tenku-f.jp


co.hellolife.jp


couleecreative.com



良いと思ったサイトをまとめる

bntncayo05.starfree.jp

w007sw.wp.xdomain.jp

xd091462.wp.xdomain.jp




既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。



www.bloomingville.com


stylebread.com



JavaScriptとは

f:id:yachin29:20200713193026p:plain

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。

それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com


JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったく関係がありません。なので混同しないようにしましょう。

スクリプト言語

JavaScriptスクリプト言語です。ではスクリプト言語とはどういうものか?
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。

プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。


なぜJavaScript?

主なJavaScriptフレームワークやライブラリー

AngularJS

f:id:yachin29:20200713193426p:plain

React

f:id:yachin29:20200713193551p:plain

Vue.js

f:id:yachin29:20200713193624p:plain

jQuery


また、サーバーサイドでJavascriptを動かす事が出来る「node.js」やSNSとの通信で使用する「JSON」などjavascriptはとにかく汎用性が高く、便利な言語です。

JavaScriptで出来る事

演算処理

プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します

ドキュメント操作

Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。

マウス等のイベント処理

クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。

実際にJavaScriptを入力してみる

ブラウザに文字を表示させてみましょう。ブラウザに文字を表示させたい場合はbodyタグの中にscriptタグを使ってJavaScriptの記述をしましょう。
JavaScriptで文字列を表示するには、「window.document.write(' ')」を使います。
ただし、「window.document.write(' ')」は「document.write(' ')」に省略する事が可能です。



JavaScriptの場合、コーテーションはシングルでもダブルでも使用可能ですが、シングルコーテーションが推奨されているので、授業では必ずシングルコーテーションを使用しましょう。




プログラムの勉強はweb学習にも向いていて、様々なサービスがありますが、その中でも「progate」は初学者にも向いているので、ぜひ進めておきましょう。

prog-8.com

CSS transitionを使ったホバーアクション

f:id:yachin29:20200730144655j:plain

7月30日の作業データ
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像にホバーアクション</title>
<style>
html,body,p{
margin: 0;
padding: 0;
}
img{
vertical-align: bottom;
}

.wrapper{
width: 1000px;
margin: 100px auto 0;
display: flex;
justify-content: space-between;
}
.box{
width: 300px;
box-sizing: border-box;
overflow: hidden;
}
.box>img{
transition: 0.5s;
}
.box:hover>img{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="wrapper">
<p class="box"><img src="img/01.jpg" alt=""></p>
<p class="box"><img src="img/02.jpg" alt=""></p>
<p class="box"><img src="img/03.jpg" alt=""></p>
</div>
</body>
</html>

レスポンシブデザイン基礎

f:id:yachin29:20150520224634p:plain


developers.google.com


レスポンシブWebデザイン(RWD)の制作

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。


●フルードイメージ

 フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター(Richard Rutter)氏によって提唱されました。

●メディアクエリー

 メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

●ブレイクポイント

 ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント(Break Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。


ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap4ではブレイクポイントが5つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px~544pxがスマホ
543px以下がスマホ(小さいサイズ)用
に分かれました。これによってより柔軟にモバイル最適化が行えるようになりました。




今回のブレイクポイントは

ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。

CSSメディアクエリーの書き方

今回は1つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。

@media screen and (max-width:959px){

}

省略形

@media (max-width:959px){

}

マークアップの練習

以下のコンテンツをマークアップしてみましょう。

HTMLについて
HTML(HyperText Markup Language)とは、ウェブ上の文書を記述するためのマークアップ言語である。

HTML5
HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に勧告された新しいHTML仕様。

HTML5の新要素
header、nav、footerなどが新しい要素して加わりました。

header要素
header要素には文書全体に対するイントロダクションやナビゲーションなどを配置します。

nav要素
nav要素には、ナビゲーションを表します。そのサイト、またはページ内の移動で必要となる主要なリンクメニューのセクションで使用します。

XHTML
HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。

XHTMLで使われていた要素
div要素やp要素などが使われていました。

h1要素
h1要素とはサイト内で1番ランクの高い見出しを表します。

p要素
p要素とは文章中の1つの段落を表すことができます。