2017-07-16

ハンバーガーメニュ

ハンバーガーメニューの実装 (by yachin29)

<nav>
<div id="btn">
<span id="hum"></span>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Philosophy</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>

スタイルシート

@media screen and (max-width:767px){
#btn {
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius: 4px;
position: relative;
margin-left: 20px;
}
#hum {
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:before {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:-20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
  transition: 0.2s;
}

#hum.click {
  background: transparent;
}
#hum.click:before {
  top:0;
  transform: rotate(45deg);
}
#hum.click:after {
  bottom: 0;
  transform: rotate(135deg);
}

nav ul {
  width:100%;
  position: fixed;
  top: 60px;
  padding-left: 10px;
  background:#f0ede7;
  display: none;
}
nav li {
  float:none;
  width:100%;
  line-height: 30px;
}
nav li a {
  text-align:left;
}
nav li a:hover {
  border-bottom: none;
  padding-bottom:0;
}

header.fixed h1 {
display: none;
}
}

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				$(window).scroll(function() {
					if ($(window).scrollTop() > 10) {
						$('header').addClass('fixed').slideDown(900);
					} else {
						$('header').removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
	$('#hum').not(':animated').toggleClass('click');
	$('nav ul').not(':animated').slideToggle(200);
	});
});

修正後のjQuery

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				var $header = $('header');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 160) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});
$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 } 
});
});

2017-07-16

display:none, visibility:hidden の違い

display visibility hidden none

他のサイトからの転載。よくわかりました！

visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。

検証準備

html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>difference between visibility hidden and display none</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="one" class="box"></div>
    <div id="two" class="box">
        <h3>Visibility:hidden</h3>
        エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感じ。
    </div>
    <div id="three" class="box">
        <h3>display:none</h3>
        エレメントが表示エリアから消える。DOMとして存在はするけど描画されない。
    </div>
        <div id="four" class="box"></div>
</body>
</html>
css

float:leftかけておく。

2番目のボックスにvisibility:hiddenをかけて、
3番目のボックスにdisplay:noneをかけようと思います。
@charset "UTF-8";

.box{
  width:150px;
  height:150px;
  margin:10px;
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
  float:left;
  padding:20px;
}

#one{

  background:#000;
}

#two{
  /*visibility:hidden;*/
  background:#9eccb3;
}

#three{
  background:#f47d44;
  /*display:none;*/
}

#four{
  background:#000;
  clear:right;
}
ブラウザ

検証結果

visibility:hidden

＜二番目の緑のボックス＞
二番目のボックスがあった場所だけぽっかりそのまま空白に。

display:none

＜三番目のオレンジのボックス＞
要素自体がなくなったので、次の4番目のボックスがつまる。

visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。

もしdisplay:noneで要素の横幅等を測りたかったら、
absoluteにっして-9999pxしてとばして測る。

2017-07-16

sp pc 画像変換

画像変換 sp pc switch

レスポンシブデザインでPC用の画像と、SP用の画像を変えるときに使うスクリプト。今回の案件では、bxsliderの画像（比率）をPCとSPで変えるため、PCとSPでボタンの画像を変更するために使いました。

画像のフォルダに、PCとSP用の画像を用意しておきます。

PC用は「******_pc.jpg」のように「_pc」を画像のファイル名につける。

同様にSP用の画像には「_sp」を末尾に着ける。

html　を記述するときは、pc用の画像を参照するように書いておく。

<img>タグには「switch」クラスを付与。

PCとSPの共通のCSS（common.cssなど、、、）に以下の記述を追加する。

.switch{

visibility: hidden;

}

以下のスクリプトを全ファイル共通のjsファイル、default.jsなど、、、に記述する。

"replace width= 767"の部分はメディアクエリーの切り替えサイズに合わせて書き換えてください。

// SPimage switch
$(function(){
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 767;

$setElem.each(function(){
var $this = $(this);
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= replaceWidth) {

$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
} else if(windowWidth < replaceWidth) {
$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
}
}
$(window).resize(function(){imgSize();});
imgSize();
});
});

2017-07-16

GitHubとSourceTreeの導入

git soucetree github

GitHubとSourceTreeの導入 - WEBサイト制作の勉強からの転載

自分のレファレンス目的です、、、

GitHubとSourceTreeの導入

Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機能追加で更新するのは、どれとどれか？」といったことです。

例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

GitHubとは

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

SourceTree

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

Gitで使う用語

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

リポジトリ

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

コミットとプッシュ

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

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

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

「ローカルリポジトリ」のデータを変更させて

コミットしてから

「リモートリポジトリ」にプッシュする

といった感じです。

ブランチ

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

GitHubとSourceTreeの導入方法

GitHubでの作業

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

リポジトリの作成

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

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

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

SourceTreeのインストール

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

SourceTreeでの作業

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

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

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

2017-07-15

相対パス、絶対パス、ルートパス

path 絶対パス相対パスルートパス

相対パス（普段使い）

いまいる「ファイル」を起点にして、場所を指定する。

いま、コードを記述しているファイルが起点。

いま記述しているファイル（例えばindex.html）と同じ階層にあるファイルやフォルダ（例えばcommonフォルダ）は以下のように記述する。

./common

common

commonフォルダの中のcssフォルダの中のstyle.cssを指定するときは、、、

./common/css/style.css

common/css/style.css

のように記述する。

「./」は同じ階層という意味です

style.cssで同じ「common」フォルダの中にある「images」フォルダ内の「pic.jpg」をbackgroundとして指定するときは、、、

まず、「style.css」から一つ上の階層にでます。この階層は「css」フォルダと同じ、つまり「images」フォルダと同じ階層になります。

「../」が一つ上の階層という意味になります。

../images

この中にある、「pic.jpg」を指定します。

../images/pic.jpg

絶対パス（ほぼ使わない）

CDNとかそんなときしか使わない。

よそのサイトを参照するときに使います。

ルートパス（案件によって指定されれば）

一番最初の階層からのパス。

/index.html

/common/css/style.css

のように記述する。

/　がドキュメントルートを表している。

他の人がコーディングしているソースを見るときに、、、

「（なにもなし）」「./」「../」の時は相対パス

「/」が先頭にある時はルートパス

くらいはわかっていると便利。

2017-07-13

windows10 電源管理

windows 電源管理高速スタートアップ

「高速スタートアップを有効にする」チェックを外す。

先日無償アップグレードが終了した『Windows10』ですが、初期状態で有効になっている『高速スタートアップ』と呼ばれる機能が様々な不具合・異常動作の原因になっているようで、8/12現在ではこの機能を"無効"にするよう推奨されています。今回は、この『高速スタートアップ』を無効化する手順と、そもそもこの機能は何なのか？という事について簡単に紹介致します。

そもそも『高速スタートアップ』とは何なのか？

実はWindows8.1から存在しているこの『高速スタートアップ』、文字通りの意味で"スタートアップ（起動）"を"高速"にするもので、過去のOSにあった「休止状態（ハイバネーション）」に似たような仕組みになっています。（ただ、「休止状態」はWindows10にもまだあります）

Windows10では初期状態（デフォルト）で有効になっているため、基本的には以下の手法を自分で行わなければ無効化は出来ません。

有効化した場合の問題点

つい先日も、これに起因すると思われるトラブルに対処してきたのですが、現在最も多く報告されているのが、"終了時と起動時にPCの構成に変化があった際に様々な不具合が生じる"というものです。

具体例を挙げると、"USB外付けHDDを付けたままシャットダウンした後、この外付けHDDを外してからPCを起動し再度その外付けHDDを接続しても認識をしない"と言ったようなトラブルケースが考えられます。

上記以外にも、"起動は速くなるが終了が異常に遅くなる"、"起動時のWindowsUpdateによる更新作業が終わらない"、"起動時にNumlockがオンにならない"、"起動時にブルースクリーンエラー（BSOD）が発生する"等々、様々なものが報告されています。