webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

swiper slider

お役立ち記事は保存したい。

qiita.com

 

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。

【使い方(Usage)】

  1. GitHubから最新バージョンのSwiperをダウンロードする。 Swiper
  2. 下記をHTMLに記載
.html
<head>
  ....
  <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
  <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド1の内容を好きなように設置する -->
      </div>

      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- ここにスライド2の内容を好きなように設置する -->
      </div>

      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド3の内容を好きなように設置する -->
      </div>
      <!--Etc..-->
  </div>
</div>
</body>

 3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定(ファイルの最後のほうにある)

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

4.Initialize(初期化) ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる

.js
<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })

もしくはJavaScriptのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}

もしくはJavaScriptのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

という感じで
=======*/

/*
jQueryまたはZeptoの場合。
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

/* 上か下かのどちらかを記述する。jQueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}
</script>

5.完了 

【オプション一覧】

パラメータ タイプ デフォルト値 記入例 解説
speed 数値 300 600 スライドアニメーション間隔の秒数(ミリ秒)
autoplay 数値 5000 - オートプレイの時の間隔秒数(ミリ秒)。この値がないときはオートプレイしない。
mode 文字列 'horizontal' 'vertical' horizontallyで水平(横)スライド、verticallyで垂直(縦)スライド。
loop 真偽 false true trueでループ。デフォルトはループしない。
loopAdditionalSlides 数値 0 2 ループの後に、いくつのクローンを用意するかの数値。New in 2.0.
slidesPerView 数値
or
'auto'
1 4 スライドコンテナに何枚表示させたいか。(carousel mode)autoもサポートしていて、コンテナの幅によってフィットする。ループと共用できない。New in 2.0.
slidesPerGroup 数値 1 2 いくつのスライドでグループ化するか。デフォルトは1。carousel modeとの組み合わせで便利。
calculateHeight 真偽 false true true にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レスポンシブレイアウトや高さが不確定な場合には便利。New in 2.0.
updateOnImagesReady boolean true false すべての画像がロードされたあとで初期化(構築?)されるようにする。 New in 2.0.
releaseFormElements boolean true false フォーム要素を許可するかしないか。New in 2.0.
watchActiveIndex boolean false true If enabled the Swipe recalculates activeIndex dynamically during touch interactions New in 2.0.
visibilityFullFit boolean false true trueのとき、表示されているスライドで、表示領域を隙間なく埋める。New in 2.0.
autoResize boolean true false ブラウザのウィンドウサイズによって自動リサイズをするかしないか。New in 2.0.
resizeReInit boolean false true ウィンドウサイズが変更されるたびに再構築するかしないか。New in 2.0.
DOMAnimation boolean true false custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7~9などのため。New in 2.0.
resistance boolean
or
'100%'
true false falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。New in 2.0.
noSwiping boolean false true trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。New in 2.0.
preventLinks boolean true false スライド中にクリックがされないようにするかしないか。
initialSlide number 2 0 先頭スライドを番号で指定する。
useCSS3Transforms boolean true false falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になるので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。
フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
freeMode boolean false true 各スライドの位置を固定しないでフリーにするかしないか。
freeModeFluid boolean false true スライドからカーソル、タッチを離してもしばらくイージングするかしないか。
scrollContainer boolean false true true をセットすると、スクロールエリアみたいな感じで使える。
momentumRatio number 1 2 タッチを離した後の跳ね返り値。 New in 2.0
momentumBounce boolean true false falseで跳ね返り禁止。New in 2.0
momentumBounceRatio number 1 2 跳ね返り効果の値。New in 2.0
スライドのオフセット(ずらしたりするやつ)関連(Slides offset)
centeredSlides boolean false true アクティブなスライドが必ず真ん中にくるようにする。New in 2.0.
offsetPxBefore number 0 100 一番最初のスライドをオフセット(引っ込めるとか)したいときに、左の境界線からの数値(ピクセル単位)を入れる。 New in 2.0.
offsetPxAfter number 0 100 右側のスライドをオフセット(引っ込めるとか)したいときに、右の境界線からの数値(ピクセル単位)を入れる。New in 2.0.
offsetSlidesBefore number 0 2 左端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
offsetSlidesAfter number 0 2 右端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
タッチ、マウスの操作関連(Touch/mouse interactions)
touchRatio number 1 0.8 Touch ratio
simulateTouch boolean true false trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックとかドラッグでスライドを動かせる。
onlyExternal boolean false true trueにすると、API機能からしか操作できなくなる。タブ形式とかで使いやすい。
followFinger boolean true false falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。
grabCursor boolean false true trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。ちょっとした気遣いですね。
shortSwipes boolean true false 短いスワイプをさせたくないときにfalseを設定。
moveStartThreshold number false 100 Threshold(しきい値)をピクセル単位での調整ができる。スワイプを動き出させるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touch distance"がこの値より低いと、動かない、そうだ。
ナビゲーション関連(Navigation)
keyboardControl boolean false true キーボードのカーソルキー(矢印)で操作できるようにするか、しないか。
mousewheelControl boolean false true マウスホイールでスライドを操作せきるようにするか、しないか。
ページネーション(Pagination)
pagination string or HTML Element - '.my-pagination' ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。New in 2.0
paginationClickable boolean false true ページネーションボタンをクリックでスライド操作できるようにさせるか、しないか。New in 2.0.
paginationAsRange boolean true   trueのとき、ページネーションボタンが表示スライドと連動するように、Classがあてがわれる。2枚以上を同時表示させるスライドで効果的。New in 2.0.
createPagination boolean true false trueのとき、ページネーションを作成。たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラスがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。
名づけ関連(Namespace)
wrapperClass string 'swiper-wrapper' 'my-wrapper' スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは'swiper-wrapper'。
slideClass string 'swiper-slide' 'my-slide' 各スライドのクラスを指定できる。複数のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。
slideActiveClass string 'swiper-slide-active' 'my-active-slide' アクティブ中スライドのクラスを指定できる。デフォルトは'swiper-slide-active'。New in 2.0.
slideVisibleClass string 'swiper-slide-visible' 'my-visible-slide' 表示中のスライドのクラスを指定できる。デフォルトは'swiper-slide-visible'。New in 2.0.
slideElement string 'div' 'li' スライドのタグはデフォルトでdivを使用しているが、変更も可能。例ではliに変えている。
noSwipingClass string 'swiper-no-swiping' 'stop-swiping' CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true. New in 2.0.
paginationElement string 'span' 'div' ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。例ではdivに変えている。
paginationElementClass string 'swiper-pagination-switch' 'my-switch' ページネーションスウィッチのクラス変更が可能。New in 2.0.
paginationActiveClass string 'swiper-active-switch' 'my-active-switch' ページネーションのアクティブボタンのクラス変更が可能。
paginationVisibleClass string 'swiper-visible-switch' 'my-visible-switch' ページネーションの表示中ボタンのクラス変更が可能。New in 2.0.
コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに
queueStartCallbacks boolean false true "true"で、"slideChangeStart"を加える。"slideChangeStart"は、multiple swipes/transitionsをしているときに発生するコールバック。New in 2.0.
queueEndCallbacks boolean false true "true"で、"slideChangeEnd"を加える。"slideChangeStart"は、multiple swipes/transitionsの直後に発生するコールバック。New in 2.0.
onFirstInit function - function(swiper){ do something } 最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 New in 2.1
onInit function - function(swiper){ do something } すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。New in 2.1
onTouchStart function - function(swiper){ do something } タッチしたら発生するコールバック。functionを書き込むことで実行。
onTouchMove function - function(swiper){ do something } タッチが動いたら発生するコールバック。functionを書き込むことで実行。
onTouchEnd function - function(swiper){ do something } タッチを離したら発生するコールバック。functionを書き込むことで実行。
onSlideReset function - function(swiper){ do something } タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeStart function - function(swiper){ do something } 前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeEnd function - function(swiper){ do something } 前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideClick function - function(swiper){ do something } スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。
onSlideTouch function - function(swiper){ do something } スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。onTouchStartとほとんど同じだが、.clickedSlide.clikedSlideIndexの値を返す。
function(swiper){ alert(swiper.clikedSlideIndex); }とでもしたら動くはず。
onImagesReady function - function(swiper){ do something } 係るすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。"updateOnImagesReady"もtrueとするべき。New in 2.0.
onMomentumBounce function - function(swiper){ do something } 跳ね返りしたら発生するコールバック。functionを書き込むことで実行。New in 2.0.
onResistanceBefore function - function(swiper,p){ do something } 跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.
onResistanceAfter function - function(swiper,p){ do something } 跳ね返りした後に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.

jsの復習 objectリテラル

コピペばかりで、jsを忘れてしまう。

たまには復習してみる。

 

// JavaScript Document

var flight = {
airline: "ocianic2",
number: 815,
departure: {
IATA: "SYD",
time: "2017-07-29",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2017-07-30",
city: "Los Angeles"
}
}
;

document.writeln('<h1>flight.number</h1>');
document.writeln('<h1>+flight.number+</h1>');
document.writeln('<h1>'+flight.number+'</h1>');

 

 

f:id:ohta-felica:20170729111528p:plain

 jslint

f:id:ohta-felica:20170729111628p:plain

 

f:id:ohta-felica:20170729113007p:plain

git GUI

windows コマンドプロンプトから、「git gui」と入力。

そうするとgit GUIが出てきます。

f:id:ohta-felica:20170720223148p:plain

 

 

リモートリポジトリから、クローンを作成します。

f:id:ohta-felica:20170720223552p:plain

 

 

「target directory」は事前に作成するのでなく、この操作によって(clone)によって新たに作成される。

f:id:ohta-felica:20170720223740p:plain

 

 

「clone」の操作が終わると下のような画面になります。

f:id:ohta-felica:20170720223909p:plain

 

 

f:id:ohta-felica:20170720224033p:plain

 

 

「browse masters files」マスターブランチのファイルをブラウズします。

f:id:ohta-felica:20170720224201p:plain

 

ローカルに作ったリポジトリの中のすべてのファイルが表示されます。

適当なファイルの、ファイル名の部分をクリックしてみます。

f:id:ohta-felica:20170720224416p:plain

 visualize masters history

f:id:ohta-felica:20170720224711p:plain

 

f:id:ohta-felica:20170720224814p:plain

 SHA1 とは何ぞや?

f:id:ohta-felica:20170720225144p:plain

 

 

画面レイアウトのまま印刷ができない

、、というご指摘が。

あまり考えたことなかったですね。

キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。よかった!

下の記事を参考に、PC用のスタイルシートを「screen」から「print, screen」に変更しました。こうして、とりあえずは大きな崩れが解消しました。

 

<link rel="stylesheet" href="./common/css/style_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/style_sp.css" media="screen and (max-width:767px)">
<link rel="stylesheet" href="./common/css/common.css">
<link rel="stylesheet" href="./common/css/top_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/top_sp.css" media="screen and (max-width:767px)">

 

 きちんとA4にプリントできるようにするにはもうひと手間が必要です。

/* print setting */
@media print {
body {
-webkit-print-color-adjust: exact;
top:0 !IMPORTANT;
left:0 !IMPORTANT;
width:200mm !IMPORTANT;
height:290mm !IMPORTANT;
}
}

 


レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる!

なんてこと間々ありますよね。
印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。
で、最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。
レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。

今回は下記の記述が原因でした。

1
@media only screenand (min-width768px) { }

レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。

1
@media printscreenand (min-width768px) { }

これで印刷時にもスタイルが適用されます。
もちろん印刷用CSSを用意する場合は「only screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。
また、min-width,max-width の指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。

ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。
原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。
余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。
そんな時はこの一文を。

1
-webkit-print-color-adjust: exact;

ただし、このスタイルはChrome用にしかなく、FirefoxSafariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。
また、IE8もいうこと聞いてくれません。

上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。そうIE君です。。。
ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。
そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。
なので印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。

以上で対応は完了です。

今回のケースはあくまで一例です。もちろん他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。
ただ他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。

 

Humberger Menu 自己流備忘録

某案件のため、(PC SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。

ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。

 

1.

まず外側の正方形を作る。今回は<p> id="btn"

<a>が付いていないので、cursor: pointer;を忘れずに。

3本線の位置指定のためにposition: relative;も忘れずに。

 

header #btn{
width: 36px;
height: 36px;
border: 2px solid #91be1e;
border-radius: 4px;
position: relative;
cursor: pointer;
}

 

2.

[1]で作ったp要素の内側に <span> id="hum"を作る。

これは三本のうちの真ん中の横棒。

一番上は:before

一番下は:afterで作る。

今回は height を指定せず、border で線幅を決定してみました。

こうしておくと上下の線の位置指定が若干楽かもしれない。(真ん中に対して線対称にするには:beforeのtopと:afterのbottomの値が等しくなるから)

線幅は上下のみ(線の厚みだけ)で、左右はいらないのでborder-width: 2px  0; と指定。

このようにして線幅4pxの横線を作ました。


header p#btn>span#hum{
display: block;
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>span#hum:before{
display: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:-18px;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>#hum:after{
isplay: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: -18px;
left: 0;
margin: auto;
transition: 0.2s;
}

 

3.

jquery

$('#btn').on('click',function(){
$('#hum').toggleClass('click');

と「.click」クラスを付与するので、以下のように記述。

このとき上の「赤」と「下」の青が一致していないとうまく動きません。

セレクトの書き方を共通にしておくこと。(ロスタイム15分、、、)


header p#btn>#hum.click {
border-color: white;
}
header p#btn>#hum.click:before {
top:0;
transform: rotate(45deg);
}
header p#btn>#hum.click:after {
bottom: 0px;
transform: rotate(135deg);
}

 

4.

globalNavは最初、見えないようにしておくので display: none;

headerバーの高さ分だけ下に表示したいので、position: fixedで top :(header barの高さの)で指定する。

#globalNav{
display: none;
width: 100%;
overflow: hidden;
position: fixed;
top:72px;
left: 0;
right: 0;
background-color: #fff;
z-index: 100;
}

 

5.

最後にJSのソースを記録しておきます。

 display: noneで初めからナビゲーションは表示されていない。

だから$('#globalNav').hideはいらないと思う。

#btnをクリックするたびに 、、、

1. #humにclick クラスが付いたり外されたりのトグル、と

2. #globalNavがslideDownとslideUpのトグルが起きる。

これが前半。

globalNavのliを選択してクリックすると

1. #humのclick クラスが外される。

2.#globalNavがslideUpする。

これが後半。

<script>
$(function() {
$('#btn').on('click',function(){
$('#hum').toggleClass('click');
$('#globalNav').slideToggle(200);
return false;
});
$('#globalNav>li').click(function(){
$('#hum').removeClass('click');
$('#globalNav').slideUp(200);
});
});
</script>

 

6.

ちなみにHTMLは、、、

<!-- for SP only
------------------------------------------------------------>
<div class="sp right upperRight">

<!-- sp HumbergerMenu-->
<p id="btn" class="sp">
<span id="hum"></span>
</p>
<!-- btn -->
</div>
<!-- sp upperRight -->

<!-- SP globalMenu -->
<ul id="globalNav" class="sp">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<!-- end sp globalMenu -->

 

追記

header バーもposition: fixed;にして、(値はglobal Navと同じ値)すぐ下にあるbx-sliderとの間に白い隙間ができて時間をかけてしまった。

resetで img:vertical-align: bottom; としていたのが原因らしい。

img: vertical-align: baseline; にしたら解決した。

ハンバーガーメニュ

ハンバーガーメニューの実装 (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を削除するため
 } 
});
});

display:none, visibility:hidden の違い

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


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;
}


ブラウザ

2.png

検証結果

visibility:hidden

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

3.png

display:none

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

5.png

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

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

 

 

sp pc 画像変換

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

 

1.

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

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

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

 

2.

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

 

3.

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

<li><a href="#"><img src="./common/images/sliderpic1_pc.png"  class="switch"></a></li>

 

4.

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

.switch{

visibility: hidden;

}

 

5.

以下のスクリプトを全ファイル共通の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();
});
});

 

GitHubとSourceTreeの導入

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を触る人にとって、解り辛さの原因の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の導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。

 

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

相対パス (普段使い)

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

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

いま記述しているファイル(例えば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

のように記述する。

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

 

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

「(なにもなし)」 「./」「../」の時は相対パス

 

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

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