2つのコンテンツを横に並べてそのうち1つの位置をちょっとずらしたい。
ついでに背景の色も変えたい！なんてことありませんか？

mito

#30daysトライアル 2ndの実践演習を元に解説します！

完成イメージとワイヤーフレーム

完成イメージとワイヤーフレームはこちらです。

momo

いきなりコーディングを始めるんじゃなくて手書きでもいいのでワイヤーフレームを書くのはおすすめだよ！

mito

そうすることで、CSSの書く分量を減らしてくれるBootstrapを計画的に使えたり、sassの変数宣言の設計など保守性の高いコーディングができます！

ですね！

それで、順序としては
複雑になってくる→Bootstrap使おう
じゃなくて
こことここはBootstrap使って簡略化しよう→必要な箇所に必要な分だけ使う

って感じです！

だから最初に手書きでもいいのでワイヤーフレームを書くのが大事なんですよね

— ショーヘー@東フリCMO (@showheyohtaki) October 17, 2019

https://mito-lab.com/coding-30days-11-12/

https://mito-lab.com/coding-30days-13-14/

https://mito-lab.com/coding-30days-15-16/

https://mito-lab.com/coding-30days-2nd-7-8/

HTMLのコーディング

ワイヤーフレームに合わせてコーディングしていきます。

    <section id="access">
        <div class="accessItems">
            <div class="address offset">
                <h3 class="font-weight-bold pt-4 contentsTitle">Access</h3>
                <p class="py-5">〒106-6XXX<br>東京都港区六本木 XX町目Y番地<br>セントラルタワー</p>
                <div>
                    <a href="#" class="btnWhite">Google Maps</a>
                </div>
            </div>
            <div class="map">
                <iframe width="100%" height="100%" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15064.912379910664!2d139.87216275814978!3d35.63005293109904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d75d4baaaab%3A0x495f687a2ad1916f!2z5p2x5Lqs44OH44Kj44K644OL44O844K344O844O744Ob44OG44Or44Of44Op44Kz44K544K_!5e0!3m2!1sja!2sjp!4v1568727612321!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
        </div>
    </section> 

SCSSのコーディング

装飾を加えていきます。

#access{
    position: relative;
    height: 810px;
　　 color: #F3F3F3;

    .accessItems{
        display: flex;
        .address{
           padding-left: 93px;
        　　background-color: $black;
        　　color: #fff;
           width: 980px;
           height: 550px;
        }
        .map{
            box-shadow: 0 0 10px #d6d6d6;;
            position: absolute;
            top:120px;
            right: 55px;
            width: 720px;
            height: 515px;
        }
    }
}

まとめ

momo

親、子の関係性、何を基準にしているのか？を意識すると理解が早いよ！

mito

最初にワイヤーフレームを書いておくと早いです。

(スマホはレイアウトが異なっていたので、上のコードはcssでdisplay=noneのして新しく書きました。)

今回は、この見出しをどうやって作るかのご紹介です。

そもそも、これはコーディングのスキルアップのために挑戦している#30DAYSトライアルの課題の一つです。

mito

見た目簡単そうなのですが、難しかったので記録として残します。

HTMLの記述

        <div>
            <h1 class="pattern17">見出しパターン17</h1>
        </div>

SCSSの記述

.pattern17{
    position: relative;
    display: inline-block;
    &:after{
        z-index: -1;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        
        background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
        background: repeating-linear-gradient(-45deg, #cce7ff,#cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
    }
}

以下1つ1つ解説していきます。

Sassについてはこちらの記事を参考にしてください。

https://mito-lab.com/coding-30days-2nd-7-8/

CSSのポイント解説

positionで要素の位置を決める

文字要素は親、ストライプは子という関係性でpositionの設定をします。

なくそう！positionわけわからん！の壁！

html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N

— ちづみ (@098ra0209) January 22, 2019

擬似要素(after)を使い、ストライプの位置調整

文字要素とストライプ要素は親子という関係性ですが、親の後ろに子を並べたいので、
擬似要素:afterを使います。

momo

:afterを使うと要素の直後に要素もどき(擬似要素)が挿入されます。

z-indexの役割

mito

z-indexをつけずに書くと、ストライプが文字の上に重なってしまいます。

momo

z-indexを使うことで重なっている要素の順番を入れ替えることができるよ。

擬似要素(after)の装飾

以下のような設定に指定しています。

  background: repeating-linear-gradient(
            -45deg,　           /* 角度の指定*/
             #cce7ff,         /* 色1の開始*/
             #cce7ff 10px,  　/* 色1の終了*/
             #e9f4ff 10px, 　　/* 色2の開始*/
             #e9f4ff 17px)　　/* 色2の終了*/
             ;
        }

momo

角度の指定を変えることで、色々なストライプが作れるよ！

おまけ

背景をチェック柄にすることもできます。

HTML

        <div>
            <h1 class="check">チェック柄見出し<br>改行あり</h1>
        </div>

CSS

.check{
    display: inline-block;
    margin: 30px auto;
    background-color: #ffc;
    background-image: 
      /* 横ストライプ */
      repeating-linear-gradient(
        0deg,
        transparent,transparent 20px, /*透明*/
        rgba(36, 255, 109,0.5) 20px, rgba(36, 255, 109, 0.5) 40px, /*1色目*/
            transparent 40px, transparent 60px, /*透明*/
            rgba(36, 255, 200,0.5) 60px, rgba(36, 255, 200,0.5) 80px /*2色目*/
      ),
      /* 縦ストライプ */
      repeating-linear-gradient(
        90deg,
        transparent,transparent 20px,
        rgba(240, 255, 36, 0.945) 20px, rgba(240, 255, 36, 0.945) 40px,
            transparent 40px, transparent 60px,
            rgba(36, 255, 109,0.5) 60px, rgba(36, 255, 109,0.5) 80px
      )
    }

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

momo

2ndのDAY5,6はprogateを使ってSassを学んでいくよ！

Sass(サス)とは

Sass(Syntactically Awesome StyleSheet)は、CSSをより便利に効率的に書くことができる言語です。

mito

SASS記法とSCSS記法の2種類の書き方があります。私はSCSS記法を学びました。

momo

ファイルの拡張子もcssではなく、scssになるよ！

1. CSSより記述量を減らせること
2. コードを再利用できること

入れ子構造の使い方

1つのセレクタのなかに別のセレクタを入れ子にして指定できます。

<div class="message">
  <h1>About us</h1>
  <p>私たちは・・・・</p>
</div>

CSSで記載する場合

.message{
 width:100%
}
.massage h1{
 font-size:50px;
}
.massage p{
 font-saize:20px;
}

Scssで書く場合

.message{
 width:100%
　h1{
   font-size:50px;
  }
  p{
  font-saize:20px;
  }
}

momo

同じセレクタをなんども書かなくてすむね！

&記号の使い方

入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換えることができます。

momo

「&」はhoverだけでなく、activeなどにも使うことができるよ！

HTMLの記載↓

<div class="col-12 social">
   <a href="#" class="socoalIcon"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: #d5d5d5;
  }
}

momo

liなどの中の特定の要素の指定にも使えるよ！

HTMLの記載↓

<ul>
    <li>planA</li>
    <li class="color-change">PlanB</li>
    <li>PlanC</li>
</ul>

Scssの記載↓

li{
  padding-left: 10px;
  &.color-change{
    color:red;
  }
}

変数の定義

momo

右の値を左の変数に入れる(代入)という意味だよ。

$hover-color:#d5d5d5;

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: $hover-color;
  }
}

mito

他でも使い回しができるので便利ですね。

まずはこの3つを使えるようになるだけでもかなり便利です。
以下はさらに効率的にコーディングするための書き方です。

mixinについて

mixinとは

mixinは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能です。

mixinの定義

momo

呼び出すときは@include mixin名;で呼び出すよ！

@mixin circle{
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  text-align: center;
  background-color: black;
}

.main {
  margin: 20px 10px;
  
  .small {
    @include circle;
    
    width: 10px;
    height: 10px;
  }
  
  .large {
     @include circle;
    
    width: 50px;
    height: 50px;
  }
}

引数を使ったmixinの定義

mixinの引数を指定しておくことで、includeから値を渡すことができます。

HTMLの記載↓

<div class="social">
  <a href="#"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

@mixin social($color){
  color:$color;
  padding: 3rem;
}
@mixin hoverColor{
  color:#d5d5d5;
}

.social{
  .fa-facebook{
    @include social(#3d5998);
      &:hover{
        @include hoverColor;
      } 
  }
}

関数の使い方

色を操作する関数はよく使われます。
HTMLの記載↓

    <div class="colorChange">
        <ul>
          <li class="orange1"></li>
          <li class="orange2"></li>
          <li class="black1"></li>
          <li class="black2"></li>
        </ul>
    </div>

Scssの記載↓

$orange:#fd7e00;
$black:#000;

.colorChange{
  margin-top: 10px;

  li{
    list-style: none;
    float: left;
    height: 50px;
    width:20%;
    margin-bottom: 10px;
  }
  .orange1{
    background-color:$orange;
  }
  .orange2{
    background-color:darken($orange,20%);
  }
  .black1{
    background-color:lighten($black,20%);
  }
  .black2{
    background-color:lighten($black,50%);
  }
}

結果

まとめ

これまで取り上げてきた書き方を実践することで効率的にコードが書けます。
環境設定については、VS codeの拡張機能「Easy Sass」で作りました。

VS codeについての記事はこちらです。

https://mito-lab.com/how-to-vscode/

今回は、ソースコードエディタのVSCode(Visual Studio Code)の便利なショートカットキーをまとめました。

mito

自分がよく使うな〜と思うものを中心にまとめているので随時更新していく予定です。

まずは、VSCodeとはどんなエディタなのか？というところから書くので、どのエディタを使うか悩んでいる方もぜひ参考にしてください。

VSCodeとは

2015年にマイクロソフトからリリースされたエディタです。
Windowsのほかに、Mac OS、Linux上でも動作します。

VSCodeの特徴

シンタックスハイライト

ソースコードの構造を視覚的に区別できるようにする表示機能のことです。
テキストの一部（構文）をわかりやすい色で表示します。

マルチカーソル機能

エディタ上で複数選択し、同時編集ができる機能です。以下を参考にさせていただきました。

マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜

mito

⌘Dで選択か⌘⇧Lで選択して一気に修正できます。

標準でEmmetがついてる

EmmetとはHTML/CSSの超強力な入力補完プラグインです。

mito

このEmmetがすごく便利でコードを書くスピードを上げてくれるということで使いはじめました。

覚えておくと便利なEmmetのショートカットキー紹介

基本的な使い方はこちらがすごく参考になります。

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

以下には少しスペルが紛らわしく覚える必要があるなと思ったものを書いています。

CSS編

その他チートシートはこちらEmmetのチートシート

VScodeのショートカットキー

【Mac版】 VisualStudioCode キーボードショートカット

こちらから特によく使うものをご紹介します！

コードを書く時に先に書いてあるコードをコピーすることがよくあるのですごくよく使います。

例えばHTMLでdivの中身を先に書いて後からdivで囲む時に便利です。

2列表示の場合の切り替えに便利です。

選択している行が長い場合も上記のショートカットで上下にコードを追加できます。

カーソルで選択しているコードと同じコードをすぐに検索できます。

momo

使いこなせるとコードを書くのが楽しくなるね！

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。
30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

トライしていく中で調べて理解したことや大事だと思ったポイントを中心にまとめます。

DAY15.『BootstrapでビジネスLP制作』

DAY15、DAY16ではこちらのYoutube動画を使ってLPサイトを制作していきます。

• Build A Complete HTML & CSS Website with Bootstrap 4

https://twitter.com/showheyohtaki/status/1087273663152431104?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1087273663152431104&ref_url=https%3A%2F%2Fwww.engineer-step.com%2Fentry%2Fsite-seisaku-15

ボタン制御〜アクティブとホバー時の色指定〜

以下、上側でデフォルトの色指定を変更し、下側でアクティブの時、ホバー時の色を同時に指定しています。

.navbar-dark .navbar-nav .nav-link{
  color: white;
  padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active, 
.navbar-dark .navbar-nav .nav-link:hover{
  color: #1ebba3;
}

Navbarの色指定などは以下に載っています。

border-widthでボタンの太さを指定

左側が何も指定しなかった場合、右側がborder-width: medium;を指定した場合です。

.btn-lg{
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.3rem;
  font-size: 1.1rem;
}

Font Awesome5のアイコンの拡大・縮小と場所指定

ここで使われているアイコンは、Font Awesome5のものです。
Font Awesome5を使うには独自の仕様があります。

<div class="row text-center">
		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i>
				<h3>CUSTOM ANIMATION</h3>
				<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
			</div>
		</div>

		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i>
				<h3>CONTENT SLIDER</h3>
				<p>Owl.Carousel.js makes navigating content sliders seamless with it's content carousel navigation.</p>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="feature">
				<i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i>
				<h3>CONTACT FORM</h3>
				<p>The Bootstrap HTML form will send directly to your email address using PHPMailer.php.</p>
			</div>
		</div>
	</div><!-- End row -->

今回はshrinkを使い元の大きさから縮小。upを使い配置を上へ移動させています。

containerを使わず共通divで囲む

containerクラスを使わず、メインビジュアル以下全てoffsetというclassで囲んでいます。

そして、offsetには以下のような指定をしています。

.offset:before{
  display: block;
  content: "";
  height: 4rem;
  margin-top: -4rem;
}

こうすることで、コンテンツの区切りごとに高さ4remの空白ができます。

momo

rem指定なので、レスポンシブ対応不要で便利だね。

列を水平方向に中央ぞろえ

<div id="contact" class="offset">
<footer>
	<div class="row justify-content-center">
		<div class="col-md-5 text-center">
			<img src="img/nuno.png" alt="">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis optio earum fugit harum consequuntur, nulla voluptatem totam numquam quod alias?</p>
			<strong>Contact Info</strong>
			<p>(888) 888-888<br> ito@gmail.com</p>
			<a href="" target="_blank"><i class="fab fa-facebook-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-instagram"></i></a>
		</div>

		<hr class="socket">
		&copy; Nuno Theme;
	</div>
</footer>
</div>

その他、便利だと思ったTips

英文を全て大文字に変えたい時の指定

cssに以下のように書くと英文（ローマ字）を全て大文字に変更してくれます。

text-transform: uppercase; 

はみ出た要素の左右の表示方法を指定する

body要素のcssに以下のように記述すると、内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない、という意味になります。

overflow-x: hidden;

コーディング効率化のために</div>にコメントをつける

divの終わり</div>に例えば以下のようにコメントをつけていました。

<div class="Features">
<div class="Jumbotorn">
<div class="narrow">

</div><!--  End narrow  -->
</div><!--   End Jumbotorn  -->
</div><!-- End Features Section -->

mito

中身のコードが長くなると閉じタグを見失いがちになるのでこの記述があるとエラーチェックのスピードが上がるなと思いました。

positionの理解

いつも、relativeだっけ？absoluteだっけ？とこんがらがっていたのでとても参考になりました。

なくそう！positionわけわからん！の壁！

html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N

— ちづみ (@098ra0209) January 22, 2019

まとめ

コーディングが終わった後に、手書きで要素をパーツ分けするとさらに構造の理解が深まりました。オススメの方法です！

#30DAYSトライアル
DAY15,DAY16

コードを書いている最中は「なんか複雑＞＜！！」って思っていたけど、
最後に手書きで構造を書き出してみたらかなり理解が深まった気がします！ pic.twitter.com/hbuFLSUhCl

— mito@ひよっこwebデザイナー (@mito_works) August 30, 2019



今回は、サイトにお問い合わせフォームを設置する簡単な方法をまとめます。
お店やサービスサイトを作る際にお問い合わせフォームが必要なもの、多いと思います。

初めてお問い合わせフォームを設置したことを振り返るとそれほど難しくない、むしろ簡単だったのですが、初学者ならではの躓きポイントがありました。

mito

私が実際につまずいたところを中心にまとめます。

使用したお問い合わせフォーム

今回は、Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム（エントリーフォーム）のCGIを使いました。

momo

レスポンシブ対応もされているよ！

設定1 : ダウンロード

コード一式、このページのダウンロードボタンよりダウンロードします。

設定2 : 設置したい場所にフィルダを作成し、ファイルをアップロードする

設置マニュアルに沿って設定していきます。

まずは、設置したい場所にフォルダを作成。
mailformというフォルダの配下に以下3つのフォルダとフォルダの中身を配置しました。

• iplogs
• mailformpro
• mfp.statics

設定3 : パーミッション（ファイル属性を設置する）

パーミッションとは？
ファイルごとに定義された、読み出し・書込みなどのアクセスに対する許可情報。
通常は、ファイルシステム内のファイルごとに、特定のユーザーやグループに対してアクセス権を設定しています。これによって、ユーザーごとのファイルシステムの見え方に影響を与え、ファイルシステムに対する変更を制限することができるものです。

mito

セキュリティの面から重要な設定なんですね。

momo

レンタルサーバーごとに異なるけれど、レンタルサーバーのコントロールパネルから設定するよ！

インフォパネルのご契約一覧を表示

ファイル管理を押し、ファイル一覧を表示します。

パーミッションの設定

マニュアルP27の以下を参照しながらパーミッションを設定します。

例えばmailformproのフォルダにパーミッション755をつける場合は以下です。

mailformproのファイル名右のチェックボックスにチェックを入れる

ファイル操作のパーミッション変更ボタンを押す

パーミッションを755へ変更し、パーミッション変更ボタンを押す

サーバによってはパーミッションの反映に半日以上かかることもあるので気長に待ちましょう！

設定4 : example.htmlにアクセス

正常に動作していますという旨のメッセージが出ればOKです。

設定5 : config.cgiの編集

必要な内容に合わせて編集します。

設定の注意点

基本的に説明書に忠実に進めると間違い無いのですが、途中エラーも出ないけれど動かなくて困ったのは以下の2つが原因でした。

mito

特にthanks.htmlは反応が遅く変更の反映に半日かかりました。

皆さんもぜひ設定してみてください！

今回は、PCとスマホでHTMLの内容を切り替える方法について書きます。

momo

簡単にいうと、HTMLはサイトの枠組み、CSSは装飾を制御しているよ。今回は枠組みそのものを変えたいということだね。

mito

そうです！PCでは改行させたいけれど、スマホではさせたくないなどです。

はじめに

レスポンシブ対応で、レイアウトを変えざるを得ない時、以下の2つの方法で解決しました。

PCで改行、スマホでは改行させない方法

HTMLでの記載

<p>こんにちは。<br class="br-sp">みなさま・・・
</p>

CSSでの記載

@media screen and (max-width: 640px) {
.br-sp { 
 display:none;
 }
}

mito

brタグにクラスを付与して制御すればいいだけだから簡単！

momo

ただbrタグはそこで必ず改行されてしまうので、左右、中央寄せ表示などレイアウトに変更が入る可能性がある場合はあまり多用しない方がいいよ。

mito

確かに、右寄せにして<br>を入れていたんだけど、中央寄せに変更になりレイアウトが崩れて修正に一手間かかりました。(できるのであれば)text-alignで指定してあげる方がシンプルです。

PCとスマホで表示内容を変える方法

テーブルデータにおいて、PCでは時間を縦表示にし、スマホでは横表示にするということをしました。

PC版

SP版

HTMLの記載

<table class="program_table">
 <tr>
  <th class="aisatsu_pc_area">12:30<br>|<br>12:35</th>
  <th class="aisatsu_phone_area">12:30~12:35</th>
  <td class="aisatsu2 pad5">開会のご挨拶</td>
 </tr>
</table>

mito

PC表示用、SP表示用の両方を記載し、CSSの制御で出し分けます。

CSSの記載

PCでの表示

th.aisatsu_pc_area{
	background-color: #fdebd3;
}
th.aisatsu_phone_area{
	display:none;
	background-color: #fdebd3;
	text-align: center;
	vertical-align: middle;
}

スマホでの表示

@media screen and (max-width:640px){
th.aisatsu_phone_area{
	display:block;
}
th.aisatsu_pc_area{
	display: none;
}
}

ーEndー

今回は、jQueryとCSSだけでハンバーガーメニューを作りたいと思います。

HTMLでの記載

<header>
 <div id=“navToggle”>
  <div>
   <span></span> <span></span> <span></span>
  </div>
 </div>

 <nav id=“menu”>
  <ul>
   <li><a href=“#”>HOME</a></li>
   <li><a href=“#taitle-gaiyou”>開催概要</a></li>
   <li><a href=“#taitle-program”>プログラム</a></li>
   <li><a href=“#taitle-contact”>お問合わせ</a></li>
  </ul>
 </nav>
</header>

CSSでの記載

ハンバーガーメニュー表示の制御です。

#navToggle {
 display:none;
 position:absolute; /*bodyに対しての絶対位置指定*/
 right:13px;
 top:13px;
 width:30px;
 height:25px;
 cursor:pointer;
 padding: 12px 0;
}
#navToggle div {
 position:relative;
}
#navToggle span {
 display:block;
 position:absolute; /*#navToggle div に対して*/
 width:100%;
 border-bottom:solid 3px #fff;
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
 top:0;
}
#navToggle span:nth-child(2) {
 top:11px;
}
#navToggle span:nth-child(3) {
top:22px;
}
header nav {
 position: absolute;
 right:0;
 top: -800px;
 background-color: #fff;
 width:50%;
 padding:0 10px;
 -webkit-transition:.5s ease-in-out;
 -moz-transition:.5s ease-in-out;
 transition:.5s ease-in-out;
 text-align:left;
}

以下のようなハンバーガーメニューを作りました。

momo

header navのところで、top -800pxとしているので、このままでは実際には見えない状態だよ。

jQueryでの記載

mito

jQueryではハンバーガーメニューの三本線をクリック時に×に変形させたいので、指定した要素にアクションと連動させて名前を付けたり消したりする処理を書いています。

.toggleClassメソッド

指定した要素に指定したクラス名を付けたり消したりできる。
clickファンクションで使うと、クリックするたびにクラス名を付けたり消したりできる。

   $('#navToggle').click(function(){
           $('header').toggleClass('openNav');
   });

momo

今回はクリックに連動させて、headerに .openNav を付加・削除しているよ！

再びCSSの記載（メディアクエリの設定）

画面横幅が768px以下の場合の設置を記載します。

1. ハンバーガーメニューのメニュー内容の表示制御
2. クリック時に横棒を45度傾け×にする処理
3. ハンバーガーメニューが表示されるようにする
4. ハンバーガーメニューのメニュー内容が表示されるようにする

header ul {
	margin:0;
}
header ul li {
    display:block;
 	margin-left:3px;
    border-bottom:dotted 1px #2c9caf;
    line-height:3;
}
header ul li a {
	display:block;
	color:inherit;
	padding-left: 3px;
}
header ul li::after {
	content:'';
}
header ul li:last-child {
	border-bottom:none;
}
/*レスポンシブのメニューのお申し込みのみ背景色をかえる*/
header nav .nav-buy{
	background-color: #cc2e4c;
	margin-top: 4px;
	color: #fff;
}
#navToggle {
	display: block;
}
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*header menu*/
.openNav nav {
    -moz-transform: translateY(876px);
    -webkit-transform: translateY(876px);
    transform: translateY(876px);
}

ハンバーガーメニューが表示され、クリックするとメニュー内容が表示されます。

こちらを参考にさせていただきました。

ーEndー

今回は、モーダルウィンドウの作り方と、モーダルウィンドウ表示時に親画面がページ上部に戻ってしまうときの対処法について書きます。

全体的な動き

以下の3ステップを実装していきます。

1. リンクもしくはボタンを押す
2. モーダルウィンドウが表示される
3. 閉じるもしくは×を押すと閉じる

HTMLでの記載

モーダルウィンドウを作る。

<div class="modal-wrapper" id="map-modal">
<!-- モーダル全体の枠　-->
　<div class="modal">
<!-- 右上に配置する×ボタン　-->
　　<div class="close-modal">
　　　<i class="fa fa-2x fa-times"></i>
   </div>
　　<div class="modal-main">
　　　<div class="picture">
　　　　<img src="images/map.jpg">
　　　</div>
　　　<div>
　　　　<p class="map-detail">詳しい地図の内容を記載する</p>
　　　</div>
　　</div>
<!-- 閉じるボタン　-->
　　<div class="closebutton">
　　　<button class="close">閉じる</button>
　　</div>
　</div>
</div>

モーダルウィンドウへの遷移元を作る。

<div>													 
 <p class="mapinfo" href="">												 
   <a class="mapinfo-show1">詳しい地図はこちら</a>												 
 </p>
</div>

CSSでの記載

モーダルウィンドウの装飾部分を記載する。

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
.modal {
  position: absolute;
  top: 20%;
  left: 24%;
  background-color: #e6ecf0;
  padding: 20px 20px 20px;
  border-radius: 10px;
  width: 650px;
  height: auto;
}
.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

.closebutton{
	text-align:center;
	margin-top:10px;
}

.close {
  display: inline-block;
  padding: 10px 140px;
  background-color: #0091a7;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

JavaScriptでの記載

モーダルウィンドウを開くときの制御を作る。

モーダルウィンドウを開いたときの親画面の位置を記憶しておく。

//グローバル変数
var sX_syncerModal = 0 ;
var sY_syncerModal = 0 ;

function scrollposition(){
	//スクロール位置を記録する
	var dElm = document.documentElement , dBody = document.body;
	sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft;	//現在位置のX座標
	sY_syncerModal = dElm.scrollTop || dBody.scrollTop;	//現在位置のY座標
}

momo

この記載をして、位置をずらさないように制御しないと、モーダルウィンドウを閉じる時に親画面のトップに戻ってしまうよ。

モーダルウィンドウを表示するためにクリックされた時の制御を作る

$(function() {
 	// モーダル表示を行うclickイベント
 	$('.mapinfo-show1').click(function(){ 
 		scrollposition();
		$('#map-modal').fadeIn();
	});
});

モーダルウィンドウを閉じる時の制御を作る

//「Close」ボタンクリックした際に閉じる処理
$('.close').on('click', function() {
 //スクロール位置を戻す
 window.scrollTo( sX_syncerModal , sY_syncerModal );
 $('#map-modal').fadeOut();
});

//×ボタンをクリックした際に閉じる処理
$('.close-modal').click(function(){ 
　window.scrollTo( sX_syncerModal , sY_syncerModal );
　$('#map-modal').fadeOut();
});

mito

これでモーダルウィンドウを閉じると親画面の元の位置に戻ります。

まとめ

mito

href=””を残していて、モーダルウィンドウへ遷移した際にページ上部に戻ってしまい、悩みました。

momo

hrefを消してしまうと、デフォルト設定のカーソルや下線などはなくなるのでCSSで設定する必要があるよ。

a.mapinfo-show1{
　color: #0091a7;	
　text-decoration: underline;	
　cursor: pointer;
}

ーEndー

今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか？書きます。

mito

position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。

momo

JavaScriptで実装するとリンク先への移動にアニメーションをつけることが可能になるよ！

HTMLでの記載

<!--ヘッダー部分 -->
<header>
 <div class="header">
  <a href="#taitle-program" >プログラム</a>
 </div>
</header>

<!--ページの途中のタイトル部分 -->
<div class="program">
 <h3 class="title-about" id="taitle-program">プログラム</h3>
</div>

<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。

1. リンクの飛び先にidを指定
2. <a>タグのhref属性に”#id名”

momo

<a>タグをクリックすると、そのidの要素が表示されている場所まで移動するという動きになるよ！

CSSでの記載

ヘッダーの高さは90pxで固定しています。

header {
  height: 90px;
  width: 100%;
  background-color: rgba(0, 145, 167, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

JavaScriptで調整する

//ナビゲーションからのページ内移動
//固定したヘッダ分だけ下げて表示
$('header a').click(function(){
　headerHight = 90;
　var id = $(this).attr('href');
　var position = $(id).offset().top;
　$('html, body').animate({'scrollTop': position-headerHight }, 500);
});

scrollTopメソッド

$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。

momo

scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ！

animateメソッド

CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。

momo

変更するプロパティ、値、アニメーションの速さの順で、animateの引数を書くよ！

offsetメソッド

要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
offset().topとすると、ページの上端からの距離が取得できる。

HTMLで記載しているh1のプログラムの位置が知りたい場合
$(‘h1’).offset();とすると　{top:50,left:100}という連想配列が返ってくる。$(‘h1’).offset.top();とすると、ページ上端からの距離のみなので50という値が返ってくる。

attrメソッド

href属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる。

var id = $(this).attr('href');
var position = $(id).offset().top;

1. idにクイックしたボタンの飛び先を取得
2. 飛び先の最上部からの距離を取得

今回はヘッダーの高さ分引き算をしています。