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

webかたつむり

ウェブデザインを勉強中

画像ファイル名だけの一覧を抽出する / indesign データ結合

目的 

indesignを使って、コンタクトシートを作る。

サイズはA4(横)。

3:2の画像を4枚配置する。

各々の画像の下にはファイル名(テキスト)を記載する。

  1. 画像のファイル名(あるいはキャプションのようなテキスト)と画像のファイル名を列挙したCSVファイル(エクセルのシート)を用意する。ちなみに、、、CSVというは Comma Separated Valueの略で、Comma(カンマ)で Separated (区切った)Value(値)です。
  2. インデザインを使って流し込む。

手順1 まずテキスト(ファイル名)の列と画像のファイル名の列を並べたエクセルのシートを作る。

「dir」表示形式を変更するオプションがいくつか用意されています

windowsのコマンド「dir」に「/b」オプションをつけると、

ファイル名またはディレクトリ名のみを表示します。

C:\ のディレクト

2016/03/15 09:58 <DIR> extensions
2017/01/13 22:12 <DIR> localserver
2016/02/13 22:10 <DIR> Logs
2006/10/06 15:42 2,853 pdiports64.inf
2016/07/16 20:47 <DIR> PerfLogs
2017/09/02 00:52 <DIR> Program Files
2017/07/12 22:27 <DIR> Program Files (x86)
2017/09/02 00:50 0 Recovery.txt
2017/05/20 20:45 <DIR> Ruby23-x64
2017/09/02 00:47 <DIR> Temp
2017/01/29 08:25 <DIR> Users
2017/09/10 15:34 <DIR> Windows
2017/01/15 00:27 <DIR> xampp
2 個のファイル 2,853 バイト
11 個のディレクトリ 83,555,377,152 バイトの空き領域

 

C:\>dir /b
extensions
localserver
Logs
pdiports64.inf
PerfLogs
Program Files
Program Files (x86)
Recovery.txt
Ruby23-x64
Temp
Users
Windows
xampp

 


ファイルに出力するには「 > [ファイル名]」を付け足します。
これはdirコマンドのオプションじゃなくて
DOSコマンドの標準的な出力命令です。

dir /b [ファイルが入っているフォルダのパス] > [書き出すファイルのパス]

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

  

 

excelcsvファイルを作成する。

「A」列にはテキスト、今回は画像のファイル名を画像の下に記載したいのでファイルの名前にする。列の先頭は「file name」とする。「B」列には画像のファイル名を並べる。画像のファイル名であることを認識させるための記法があるのでそれに従い、「'@image」と入力する。

ちなみに「'」は文字列リテラル。「@image」と「文字列」で入力する。

 

f:id:ohta-felica:20170908094007j:plain

 

 

手順2 インデザインを立ち上げる。

basic認証を使ってみたい、、、

以下を参考にしてみます。

いまさらながら、Basic認証のつけかた - Qiita

まずは、IDとパスワードを作成する。

https://ssl11.secureserver.jp/~shtml/htaccess/make_htpasswd.html

以下のような画面が出てくる。

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

 

AuthUserfile /フルパス/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

 AuthUserfile /フルパス/.htpasswdサーバーのルートディレクトリからの.htpasswdへのパスを指定する。/usr/local/...とか/home/pass/...とかそういうの。

 

AuthGroupfile /dev/nullグループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味。つまりグループごとでのアクセス制限はしないという意味。

 

AuthName "Please enter your ID and password"ダイアログに表示される文章を指定。日本語だと文字化けするようだ。

 

AuthType BasicAuthTypeを指定。「Basic(ベーシック認証)」と「Digest(ダイジェスト認証)」の2種類があって、Digestのほうが安全らしい。require valid-userユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。特定ユーザーだけにアクセスさせたい場合は「require user xxx」とかする。

 

.htpasswdIDとパスワードを書きこむファイル。.htpasswdというファイル名で作るらないといけないらしい。.htaccess用のパスワード作成ツールがネットにたくさん出回っているのでそこでコードを生成。例えばID/username,PASS/hogehogeとしたいとすると、username:us3HhKtHHqM0Uというコードを書けばよい。パーミッションパーミッションは604!これでだめなら644?その他注意事項ファイルの最後では改行したほうがいいかもしらんね。

 

.htpasswdのファイルは、DocumentRootより上に設置すること。

  • それが無理な場合は.htaccessファイルに「AddHandler cgi-script htpasswd」の一行を加える。
  • もしくは.htaccess ファイルに.htaccessと.htpasswdにアクセスできなくさせる下記のようなコードを書く。
<Files ~ "^\.ht">
    Order allow,deny
    Deny from all
    Satisfy All
</Files>

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となる。再度チェックしてみること。

サーバーの設定によっては、.htaccessファイルの設定が無効になっていたり、設置場所が限定されていたり、ディレクティブの限定的な使用しか出来ない場合があって、その場合 500Internal Server Error が発生するとのこと。見たことないですが。そんなところは潔く諦めて他のサーバーを使うこと。

 Authorization Required (T_T)

ID・パスワードには、記号は使えないかもしれないと思っている。今のところ使えた経験無し。使わなかったらうまくいくこと多し。なので記号を使わないで数字と英字だけでやってみてください。それでもだめなら単に記述間違いではと思います。

  特定のIPからのみアクセスできるようにするには

下記を.htaccessに追加する。

Satisfy any

order deny,allow
allow from xx.xx.xx.xxx/xx.xx.xxx.xxx

deny from all

 

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