読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

無料サーバーの取得とデータのアップロード

Webサイト制作

制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。
サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。
webサイト制作においてサーバーは必須のものです。今のうちからサーバーへのアップロードに慣れておきましょう。


無料レンタルサーバーは世の中に沢山ありますが、授業では「webcrow」「xdomain」の2つを使用します。
(※ウェブクロウは、無料で機能を拡張できるオプションサービスが「PHPMySQLオプション」と「容量増加オプション」の2つ用意されていますが、必ず「PHPMySQLオプション」を選びましょう。


webcrow

f:id:yachin29:20170331022710p:plain
www.webcrow.jp



FTPソフトのインストール

制作したデータをサーバーにアップロードするには「FTPソフト」が必要になります。
windowsであれば「FFFTP」は非常に使いやすいFTPクライアントソフトウェアで、初心者にとってはまず最初に使ってみるべきFTPソフトです。

FFFTPは、1997年に曽田純(Sota)が作成、発表した、代表的なFTPクライアントソフトウェア。開発は2011年8月31日をもって終了。その後有志による開発が行われている。


有志によって現在でも開発が行われているサイト
ja.osdn.net

FFFTPの設定

FTPソフトとデータをアップロードするサーバーを紐付けする必要があります。
紐付けに必要な情報はレンタルサーバーFTPアカウントに記載されています。
必要な情報は、

  • FTPホスト名
  • FTPユーザー名
  • FTPパスワード

の3つです。

macユーザーの場合

FFFTPwindowsでしか使用出来ないため、macユーザーは他のFTPソフトを使いましょう。

Cyberduck | Libre FTP, SFTP, WebDAV, S3, Backblaze B2 & OpenStack Swift browser for Mac and Windows

techacademy.jp

複数ページの作り方

HTML+CSS

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。
複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。

以下のようにページ毎にフォルダーを作り、中のファイルは必ずindex.htmlという名前にしましょう。

f:id:yachin29:20160816004934j:plain


Google検索エンジン最適化スターターガイド

だいぶ古い情報ですが、webを作る際の大事なポイントがしっかりと書かれているので、必ず目を通しましょう。
http://static.googleusercontent.com/media/www.Google.com/ja//intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf


今回は4ページ構成のサイトを作ってみましょう。

使うテキスト 例

日本の四季
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。




「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲(サ)の神が憑依する座(クラ)だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ(木花之開耶姫)」の「さくや」をとって「桜」になった、とも言われている。




南国の海
エメラルドグリーンに輝く沖縄の海は世界にほこれる美しい海であり数百種のサンゴがすみ、色あざやかな熱帯魚がむれをなして泳いでいます。周囲の海底はサンゴなので石灰分が非常に含まれており、植物性プランクトンが発生しにくく、植物性プランクトンの発生も無ければ、死骸もないので、海水が濁らないそうです。



紅葉
普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。



雪の北信濃
黒姫山は斑尾山妙高山戸隠山、飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説(黒姫伝説)があり、山名の由来になったと言われている。冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。


Copyright © Felica All Rights Reserved.






見本サイト
http://yachin29.webcrow.jp/season/


トップページのhtml

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>日本の四季・トップページ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1>日本の四季</h1>
</header>
<nav>
<ul>
<li><a href="spring/index.html">春のページ</a></li>
<li><a href="summer/index.html">夏のページ</a></li>
<li><a href="fall/index.html">秋のページ</a></li>
<li><a href="winter/index.html">冬のページ</a></li>
</ul>
</nav>
<div id="content">
<h2>四季折々の気候</h2>
<p>日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br>
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る。
そして秋になり、また冬を迎える。<br>
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。<br>
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。</p>
</div>
<footer>
<p><small>Copyright &copy; Felica All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>

スタイルシート

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

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

/*トップページのレイアウト*/
#container {
  width:960px;
  margin:0 auto;
}
header {
  width:960px;
  height:300px;
  background:url(../img/header.png) no-repeat;
}
h1 {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
ul {
  width:960px;
  overflow:hidden;
  box-sizing:border-box;
}
li {
  width:240px;
  height:50px;
  float:left;
  border-right:1px solid #999;
  box-sizing:border-box;/*paddingとborderが内側に入る*/
}
li:last-child {
  border-right:none;
}
li a {
  display:block;
  text-align:center;
  line-height:50px;
}

#content {
  text-align:center;
}
h2 {
  margin:80px 0 50px;
  font-size:36px;
}
#content p {
  width:600px;
  margin:0 auto 100px;
  line-height:1.8;
}
footer {
  width:960px;
  height:60px;
  background:#660001;
}
footer p {
  text-align:center;
  line-height:60px;
  color:#FFFFFF;
  font-size:18px;
}

/*個別ページのレイアウト*/
.siki #content {
  overflow: hidden;
}
.siki #photo {
  width:500px;
  float:left;
  padding-top:40px;
}
.siki #txt {
  width:460px;
  float:right;
}
.siki h2 {
  font-size:28px;
  font-weight:normal;
  margin-bottom:20px;
}
.siki h3 {
  font-size:24px;
  font-weight:normal;
  margin-bottom:20px;
}
.siki #txt p {
  width:300px;
  margin: 0 auto; 
  text-align:left;
}

slideToggleに合わせてテキストを変更させる

レスポンシブデザイン jQuery

今回は以前作った既存サイト(キリン)の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。

slideToggleの動きに合わせたスイッチの作成

以前はtoggleイベントを利用する事で簡単にスイッチが作成できたのですが、v1.9で廃止されてしまったため、今回はフラグを使って、slideToggleの動きに合わせたスイッチを作ります。

フラグが「close」であれば、テキストを「閉じる」、フラグが「open」であれば、テキストを「もっと見る」に差し替える、というスイッチを作ります。
slideToggleの場合であれば、「display:block」と「display:none」の状態を取得してテキストを切り替える事が可能です

$(function(){
$('p.more').on('click', function() {
 $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0);
   if($(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){
            $(this).text('閉じる');
        }else{
            $(this).text('もっと見る');
            };
 });

});

さらに余裕があれば、「load」「 resize」メソッドを使って、可変に対応させて見ましょう。

$(window).on('load resize',function(){
  if($(window).innerWidth() <= 640){
  $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','none');
$('.more').on('click', function() {
 $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0);
 if($('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){
            $(this).text('閉じる');
        }else{
            $(this).text('もっと見る');
            };
   });
   }else {
   $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','block');
   };
});

作例

http://yachin29.webcrow.jp/kirin_dl/dl.html

作業効率が劇的に上がる! ショートカットキー早見表

Illustrator Photoshop

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。
ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣に置いておくのも非常に良いと思います。

Photoshopショートカットキー早見表 2015年版

f:id:yachin29:20160929124446j:plain

helpx.adobe.com


Illustratorのショートカットキー早見表 2015年版

f:id:yachin29:20160929125206j:plain

helpx.adobe.com

Photoshopによる画像制作

Photoshop

素材をダウンロード

http://yachin29.com/photoshop2.zip

header画像の作成

photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。
f:id:yachin29:20090609115035j:plain


f:id:yachin29:20151008200723p:plain
















バナー制作の参考サイト

ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ


Supership株式会社

GitHubとSourceTreeの導入

Git

Gitとは?

Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機能追加で更新するのは、どれとどれか?」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub(ギットハブ)とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ますが、プライベート(非公開)リポジトリを利用したい場合は、有料プランに登録する必要があります。

SourceTree

Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。



Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の1つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。


コミットとプッシュ

コミット(commit) :ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。

プッシュ(push) :ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

基本的な作業の手順としては

  1. 「ローカルリポジトリ」のデータを変更させて
  2. コミットしてから
  3. 「リモートリポジトリ」にプッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ(branch)という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。







GitHubとSourceTreeの導入方法

f:id:yachin29:20170314234848p:plain

GitHubでの作業

GitHub上での作業は非常に簡単で単純ですが、基本的にインターフェイスが英語なので、ある程度慣れが必要になります。
まずはGitHubのアカウントを作りましょう。
続いて、プランを選択します。有料のプランもありますが、無料で使えるFreeプランがあります。Freeプランはソースがオープンになってしまいますが、今回はFreeプランで登録するので、「Free」を選んでから「Finish sign up」ボタンをクリックします。

リポジトリの作成

アカウントを作った後に、そのプロジェクトのマスターがリポジトリを作成します。
GitHubにログインした状態で、「New Repository」ボタンを押します。

f:id:yachin29:20170317105000p:plain


次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。
また、リポジトリの種類を「Public」か「Private」を選択します。この「Private」リポジトリは、有料会員のみ作成することが可能なので、ここでは「Public」を選びましょう。
最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。.gitignoreやlicenseについては後で追加や変更ができますので、Noneを選択します。

f:id:yachin29:20170317105303p:plain

必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。
次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。また、このリモートリポジトリのアドレスはプロジェクトチームの他のメンバーがGitHubとSourceTreeを紐付ける時に必要になるので、他のメンバーにも教える必要があります。


SourceTreeのインストール

次に以下のサイトからSourceTreeをインストールします。
ja.atlassian.com

SourceTreeでの作業

GitHub上に作った「リモートリポジトリ」をローカル上にコピー(クローン)します。
「リモートリポジトリ」のURLをコピーし、SourceTreeの「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先(ローカル上)のディレクトリを指定します。
ローカル上に「リモートリポジトリ」のクローンである「ローカルリポジトリ」を作る際には中身が空のディレクトリを用意してあげる必要があります。
そしてクローンすると、新しくローカルリポジトリが作成されます。


作業開始直後はまだ何も表示されませんが、その後更新作業などを進めていくと、このようにグラフが伸びていき、作業の進捗状況なども可視化でき、解りやすくなります。
作業を進めるとこんな感じになります。
f:id:yachin29:20170317110837p:plain


以上で、GitHubとSourceTreeの導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。




参考サイト
qiita.com
qiita.com

Positionを使ったレイアウト

HTML+CSS

見本
f:id:yachin29:20150206105158j:plain


素材のダウンロード先
http://yachin29.com/photoshop/position.zip

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Patisserie camellia</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1>Patisserie camellia</h1>
<ul>
<li id="info"><a href="#">Information</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
</header>
<div id="content">
<ul>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン情報"></li>
<li id="ph01"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph02"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph03"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph04"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph05"><img src="img/photo05.jpg" alt="キャンドル"></li>
<li id="ph06"><img src="img/photo06.jpg" alt="イチゴプリン"></li>
<li id="ph07"><img src="img/photo07.jpg" alt="イチゴスムージー"></li>
<li id="ph08"><img src="img/photo08.jpg" alt="ヨーグルト"></li>
<li id="ph09"><img src="img/photo09.jpg" alt="ライト"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>
</ul>
</div>
</div>  <!--/container-->
</body>
</html>


スタイルシート

/*   -リセット-  */
html, body, div, h1,p,ul, ol, li, p {
  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; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}

/*レイアウト*/
body {
  background: #5B3E1C;
}
#container {
  background:#FFFFFF url(img/shadow.gif) repeat-x left bottom;
  width: 800px;
  height:410px;
  margin: 100px auto 0;
}
header {
  width:320px;
  height:400px;
  float:left;
  position:relative;
}
#content {
  width:480px;
  height:400px;
  float:right;
  position:relative;
}
h1 {
  width:267px;
  height:129px;
  background:url(img/logo.gif) no-repeat;
  text-indent:100%;/*隠しテキストの処理*/
  white-space:nowrap;/*隠しテキストの処理*/
  overflow:hidden;/*隠しテキストの処理*/
  position:absolute;
  bottom:20px;
  left:20px;
}
header ul {
  width:94px;
  height:100px;
  position:absolute;
  top:40px;
  left:20px;
}
header li {
  width:94px;
  height:25px;
}
header li a {
  display:block;
  width:100%;
  height:25px;
  text-indent:100%;/*隠しテキストの処理*/
  white-space:nowrap;/*隠しテキストの処理*/
  overflow:hidden;/*隠しテキストの処理*/
}
li#info a {
  background:url(img/info.gif) no-repeat;
}
li#menu a{
	background: url(img/menu.gif) no-repeat;
}
li#access a {
	background: url(img/access.gif) no-repeat;
}
li#mail a {
	background: url(img/mail.gif) no-repeat;
}

li#info a:hover {
  background:url(img/info_h.gif) no-repeat;
}
li#menu a:hover {
	background: url(img/menu_h.gif) no-repeat;
}
li#access a:hover {
	background: url(img/access_h.gif) no-repeat;
}
li#mail a:hover {
	background: url(img/mail_h.gif) no-repeat;
}

/*ギャラリー部分*/
#content li {
  position:absolute;
}
li#camp {
  top:-23px;
  right:-15px;
}
li#ph01 {
top:0;
left:0;
}
li#ph02 {
  top:160px;
  left:80px;
}
li#ph03 {
  bottom:0;
  right:0;
}
li#ph04 {
  top:320px;
  left:0;
}
li#ph05 {
  top:320px;
  left:160px;
}
li#ph06 {
  top:240px;
  left:240px;
}
li#ph07 {
  top:160px;
  left:320px;
}
li#ph08 {
  top:80px;
  left:240px;
}
li#ph09 {
  top:0;
  left:160px;
}
li#ph10 {
  top:80px;
  right:0;
}