WEBサイト制作の勉強

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

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

固定カラムレイアウトをフルードグリッドにする

レスポンシブデザイン

授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。

フルードグリッド

　フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。



index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>演習：フルードグリッド</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<div id="container">
<div class="column">
<header>
<h1 class="size-2x2"><img src="img/logo01.png" alt=""></h1>
<nav>
<ul>
<li class="size-1x1"><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li>
<li class="size-1x1"><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li>
<li class="size-1x1"><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li>
<li class="size-1x1"><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li>
</ul>
</nav>
</header>
<ul>
<li class="size-2x2"><img src="img/ph01_l.jpg" alt=""></li>
<li class="size-1x2"><img src="img/ph02_mt.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph03_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph04_s.jpg" alt=""></li>
<li class="size-2x1"><img src="img/ph05_my.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph06_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph07_s.jpg" alt=""></li>
</ul>
</div>

<div class="column">
<ul>
<li class="size-2x1"><img src="img/ph08_my.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph09_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph10_s.jpg" alt=""></li>
<li class="size-2x2"><img src="img/ph11_l.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph12_s.jpg" alt=""></li>
<li class="right size-1x2"><img src="img/ph13_mt.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph14_s.jpg" alt=""></li>
<li class="size-2x2"><img src="img/ph15_l.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph16_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph17_s.jpg" alt=""></li>
<li class="size-2x1"><img src="img/ph18_my.jpg" alt=""></li>
</ul>
</div>

<div class="column three">
<ul>
<li class="size-2x2"><img src="img/ph19_l.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph20_s.jpg" alt=""></li>
<li class="right size-1x2"><img src="img/ph21_mt.jpg" alt=""></li>
<li class="size-1x1 odd"><img src="img/ph22_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph23_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph24_s.jpg" alt=""></li>
<li class="size-2x1"><img src="img/ph25_my.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph26_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph27_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph28_s.jpg" alt=""></li>
<li class="size-1x1"><img src="img/ph29_s.jpg" alt=""></li>
<li class="size-2x2"><img src="img/ph30_l.jpg" alt=""></li>
</ul>
<footer id="sp"><p><small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small></p></footer>
</div>

<p><a id="bottom" href="#top">TOPに戻る</a></p>
</div><!-- /#container -->
<footer id="pc"><p><small>Copyright &copy; 2016 ○○○ All Rights Reserved.</small></p></footer>
</body>
</html>

style.css

/*====reset======*/
html, body, h1, ul, li, p, header, nav, footer {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
	text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}


/* layout
=========================*/

#container {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}
.column {
  width:320px;
  float: left;
}
h1 {
  margin: 10px;
}
ul {
  width:320px;
  overflow:hidden;
}
li{
  margin: 10px;
  float: left;
  overflow:hidden;
}
.right {
  float: right;
}
footer#pc {
  width: 100%;
  height: 50px;
  background: #281605;
}
footer#pc p {
  text-align: center;
  color: #FFF;
  font-size: 18px;
  line-height: 50px;
}
footer#sp {
  display: none;
}
/*TOPに戻るボタン*/
a#bottom {
  position: fixed;
  bottom: 65px;
  right: 7%;
  z-index: 9999;
  width: 60px;
  height: 60px;
  display: block;
  background:url(../img/to-top.png);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.3;
}
a#bottom:hover {
  opacity: 0.8;
}

/*===レスポンシブ対応===*/
@media screen and (max-width:959px){

#container {
  width: 98%; /*960px÷980px ＝0.98× 100 = 98%*/
  margin: 1%; /*100%-98%(widthの幅)=2%*/
}
.column {
  width: 33.33%; /*３つある.columnを3等分にした％幅*/
}
h1 {
  width:93.75%; /*header幅100%に対し両方のマージン分の6.25%を引いた値*/
  margin: 3.125%;/*10px ÷ 320px(親要素のheaderの幅) × 100*/
}
ul {
  width:100%;
}
li{
  margin: 3.125%;
}
.size-2x2 {
  width:93.75%;/*300px÷320px*/
}
.size-2x1 {
  width:93.75%;
}
.size-1x2 {
  width: 43.75%; /*縦長の画像の幅140pxを親要素のulの幅(320px)で割った値*/
}
.size-1x1 {
  width: 43.75%;
}
.odd {
  width:43.5%;
}
img {
  max-width: 100%;
}
}
@media screen and (max-width:640px){
#container {
  width: 320px;
  margin: 10px auto;
}
.column {
  width: 100%;
  float: none;
}
}

平成29年1月18日より 「Webサイト制作科」が開講します。

東京池袋のフェリカテクニカルアカデミーでは、只今平成29年1月18日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。（※受給資格がありますので、ご確認下さい。）
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL：03-3981-7201



フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。

ご予約フォームはこちらから

www.felica.info





訓練期間：2017年1月18日 ～ 2017年7月15日
訓練時間：15時55分 ～ 20時50分
募集期間：11月21日 ～ 12月8日


求職者支援訓練とは？

求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練（求職者支援訓練）を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。

求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。

 


求人依頼のある学校

WEBクラスでは、就職支援も熱心に行っています。本校の授業内容や生徒さんのレベルを把握した上で、幾つかの企業様から求人依頼も来ておりますので、授業の修了が近づいた段階で、求人依頼のあった企業に紹介させていただくことも可能です。未経験であっても「エンジニア」「デザイナー」の両分野への就職が可能です。

 

どんな授業を行うの？

デザイン

このクラスではwebサイトを「ユーザーが使う製品」と考え、その製品に伴うデザインは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方を元に、経験者であっても未経験者であってもAppleやGoogleなど各メーカーのデザイン・ガイドラインを参考にして、制作を進めていきます。

f:id:yachin29:20161121130447j:plain




スマホサイト制作

最近では、Google検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになっています。Googleだけでなく、多くのサイトでPCよりもスマートフォン利用者の方が多い現在、今まで以上にスマホサイトが重要になってきます。
この授業ではGoogleが推奨する「レスポンシブデザイン」や「動的な配信」でのサイト制作を学ぶ事が出来ます。
また、モバイルファーストインデックス （MFI）といった、最近の考え方やアルゴリズムも学び、よりスマートフォンに適したUI・UX設計を行っていきます。

http://thana531223.webcrow.jp/vogue/


f:id:yachin29:20161026201426p:plain



f:id:yachin29:20161027204011p:plain

各OSベンダーのデザインガイドライン

Webデザイン

f:id:yachin29:20161116140853j:plain


各OSベンダーのデザインガイドラインを知る

webサイトを「ユーザーが使う製品」として考えるならば、その製品に伴うデザインやカラースキームは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方を元に各OSベンダーは独自のデザイン・ガイドラインを設けています。デザインを勉強する上で、こういったデザイン・ガイドラインに目を通し、制作の際に参考にしてみましょう。

Appleは『iOSヒューマンインターフェイスガイドライン』、Googleは『マテリアル デザイン』、Microsoftは『Microsoft Design』といったように、各社ともに独自のデザインガイドラインを設けてプラットフォーム上のアプリなどに対してデザインガイドラインに沿った設計を推奨しています。


f:id:yachin29:20161121130447j:plain

Apple『iOSヒューマンインターフェイスガイドライン』

iOSヒューマンインターフェイスガイドライン: UI設計の基本事項
ユーザインターフェイスのデザインのヒント - Apple Developer
Design - Apple Developer（英語）

Google『マテリアル デザイン』

https://material.google.com/jp/（日本語版PDF）
https://material.google.com/（英語サイト）

Microsoft『Microsoft Design』

Inclusive design toolkit download – Microsoft Design（英語サイト）




参考サイト
design.dena.com

webライティングの練習

Webサイト制作

ー宿題ー

以下の内容を読み、メールで提出

インターネットについてなるべく 200 文字に近い文字数で記述して下さい。（200 文字を越えてはいけません）

＊キーワードは必ず文章内で使用して下さい。
＊書き出し例文を参考にして文章を書いてください。書き出し例文をそのまま使用することは禁止です。

【書き出し例文】現在のインターネット社会では様々な情報のやり取りがリアルタイムに行われ、もはや多くの人たちにとって生活に欠かせないものとなっています。

キーワード1：ニュース
キーワード2：動画


解答例
今や日常生活に欠かせなくなったスマートフォン。通勤時の電車内でもメール、SNS、さらには動画やネットニュースなど、片時も離さず画面を見つめている人を多く見かける。
　以前は圏外の表示を気にしながらのメール送信程度だった電車内での通信環境も、ここ数年で大きく変わった。かつては電波の入らなかった地下鉄も利用エリアが広がり、現在東京メトロでは全線で使用が可能だ。
　電車内でのWi-Fiサービスも少しずつ広がってきたが、まだまだ限定版である。東京オリンピックが開催される2020年までには東京メトロや私鉄なども導入する予定である。近い将来、山手線車内で働くノマドワーカーの姿が見られるかもしれない。

コーディング課題

HTML+CSS

下の見本を参考にコーディングしてみましょう。
細かいマージン・パディングの値は適宜。

f:id:yachin29:20160903105730j:plain



使用する画像
http://yachin29.webcrow.jp/pasta-yajima/pasta-img.zip



使用するテキスト（※alt内のテキストは適宜）

パスタとワインの店 atella

concept
pasta
drink
side
access

現在実施中のキャンペーンやお得な情報
Today's Pasta 今日の日替わりパスタ
ペンネアラビアータ（ピリ辛トマトソースのペンネ）

2016.7.24
今年も冷製パスタをお出しし始めました
2016.7.18
トマトソースの作成ビデオを公開しました

©2016 atella all right reserved.

レスポンシブデザイン実践１

レスポンシブデザイン

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。
まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。


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

HTML5の要素を使うので、IE8などに対応させる場合は必要な記述を加えましょう。（※2016年１月のIEのサポートポリシー変更に伴いIE8に対応させる必要性をしっかりと考えましょう）
Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft

IE8に対応させる場合
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  menu, main, nav, section { display: block; }
</style>


ascii.jp


画像のダウンロード
http://ascii.jp/elem/000/000/699/699812/index-3.html


作例

PCレイアウト
f:id:yachin29:20160401010640j:plain


タブレットレイアウト
f:id:yachin29:20160401010715j:plain


スマホレイアウト
f:id:yachin29:20160401010740j:plain

テキスト

枝豆隊ロゴ
豆はカラダにイイ

ホーム
枝豆一覧
枝豆隊
アクセス

枝豆の栄養素はスゴい

枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。
代表的な豆料理
枝豆
イラスト　枝豆

枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。
ずんだ
イラスト　ずんだ

ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。
枝豆隊隊長
肖像 枝豆隊長

枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。

2004-2012©枝豆隊




index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>枝豆隊長</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1>
<p>豆はカラダにイイ</p>
<nav class="menu">
 <ul>
   <li><a href="#">ホーム</a></li>
   <li><a href="#">枝豆一覧</a></li>
   <li><a href="#">枝豆隊</a></li>
   <li><a href="#">アクセス</a></li>
 </ul>
</nav>
</header><!-- /header -->

<div id="wrapper">
<div id="main">
<div id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</div>
<div id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="img/01.jpg" alt="イラスト 枝豆">
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h4>ずんだ</h4>
<img src="img/02.jpg" alt="イラスト ずんだ">
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div>
</div><!--/#main-->

<div id="sub">
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像 枝豆隊長">
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--/#sub-->
</div><!--/#contents-->
</div>
<footer>
<p><small>2004-2016&copy;枝豆隊</small></p>
</footer><!-- /footer -->
</body>
</html>

























スタイルシート

@charset "utf-8";

/* Reset */
html, body, div, h1, h2, h3, h4, p, ul, li  {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
a {
  text-decoration : none;
}
ul {
  list-style : none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* Fluid-img */
img {
  max-width : 100%;
}


/* Body */
body {
  line-height : 1.5;
}
h1 {
  font-size : 48px;
  margin-bottom: 16px;
}
h2 {
  font-size : 36px;
  margin-bottom: 16px;
}
h3 {
  font-size : 24px;
  margin-bottom: 16px;
}
h4 {
  font-size : 18px;
  margin-bottom: 16px;
}

/*Headerレイアウト*/
header {
  text-align: center;
  padding-top: 16px;
}
/* Nav */
nav {
  margin-bottom : 24px;
  background: #b7715d; 
}
nav ul {
  overflow: hidden;
  width :960px;
  margin : 0 auto;
}
nav ul li {
  width : 25%;
  height: 50px;
  float : left;
  border-right: 1px solid #FFF;
  box-sizing: border-box;
}
nav ul li:first-child {
  border-left: 1px solid #FFF;
}
nav ul li a {
display : block;
color : #D8C2A4;
line-height: 50px;
}
nav ul li a:hover {
color : #FFFFFF;
background-color : #7D4934;
}
#wrapper {
  overflow : hidden;
  width : 960px;
  margin: 0 auto;
}
#main { 
  float : left;
  width : 600px;
  padding: 10px;
}
#sub {
  width : 300px;
  float: right;
} 
#main p, #sub p { 
  margin-bottom : 24px;
}
#main img { 
  margin-bottom : 24px; 
  box-shadow : 0 0 10px #000;
}
#sub img {
  margin-bottom: 24px;
}
/* Footer */
footer {
  padding : 24px 0;
  color : white;
  text-align : center;
  background : #629E3C;
}

/*タブレット用*/ 
@media screen and (max-width : 959px){

}
/*スマホ用*/
@media screen and (max-width : 767px) {

}