ハンバーガーメニューをつくりました
こんにちは。
デイトラ中級に入り、JavaScript と JQueryの基礎を学習しました。
ここからプログラミングっぽくなりました。
今回はjQureyをつかってハンバーガーメニューを実装していったので、試行錯誤つくったものを解説していきます。
作成サンプルはこちら ↓
ハンバーガーメニューのサンプル
実装した内容は以下になります。
- ハンバーガーメニューボタンをHTML CSSで作成。
- クリックするとメニューが開くと同時にハンバーガーメニューが×マークに変形。同時に画面全体を暗くする。
- ×マークをクリックすることでメニューがとじる。同時に画面の明るさを戻す
- メニュー展開時の画面が暗いところを押してもメニューを閉じて×マークがハンバーガーに戻す。
- メニューをおしたら指定箇所にリンクしてメニューを閉じる、画面の明るさを戻す。
以下、実装コードです。
[ HTML ]
ハンバーガーメニューボタン
<div class="hamburger-menu">
<span class="hamburger-menu__line"></span>
</div>
ハンバーガーボタンクリックで開くメニュー
<ul class="header-drawer">
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
ハンバーガーメニュー展開時に全体を暗くする用のコード
<div id="gray-display"></div>
[ CSS ]
//ハンバーガーメニューアイコン----------------------
.hamburger-menu{
align-items: center;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 10;
position: absolute;
right: 30px;
top: 30px;
}
.hamburger-menu__line{
display: block;
width: 100%;
height: 4px;
background-color:red;
position: relative;
transition: all 0.5s;
}
.hamburger-menu__line::before,
.hamburger-menu__line::after{
content: '';
display: block;
width: 100%;
height: 4px;
background-color: red;
position: absolute;
transition: all 0.5s;
}
.hamburger-menu__line::before{
transform: translateY(-12px);
}
.hamburger-menu__line::after{
transform: translateY(12px);
}
.hamburger-menu.open .hamburger-menu__line{
background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
transform: rotate(-45deg);
}
//ハンバーガーメニュークリックで開くドロワーメニュー-------
.header-drawer {
position: fixed;
top: -20px;
right: 0;
background-color: black;
width: 200px;
height: 400px;
padding-top: 100px;
z-index: 9;
display: none;
}
.header-drawer li {
font-size: 28px;
margin-bottom: 20px;
padding-left: 30px;
list-style: none;
text-align: center;
}
//メニュー展開時画面暗くする------------
#gray-display {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.8;
z-index: 8;
//------------------------------------------
[ jQuery ]
$(function() {
//ハンバーガーメニュークリックでイベント作動
//ハンバーガーメニューにopenクラスがついていれば外す
// →×からハンバーガーにもどる
//ドロワーメニュー閉じる 画面暗い解除
$('.hamburger-menu').click( function() {
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.header-drawer').slideToggle();
$('#gray-display').hide();
//ハンバーガーメニューにopenクラスがついていなければ追加
// →ハンバーガーから×に変形
//ドロワーメニュー開く 画面暗くする展開
}else{
$('.header-drawer').slideToggle();
$('#gray-display').show();
$(this).addClass('open');
}
});
//グレイ部分のクリックで全て閉じる
$('#gray-display').click(function() {
$(this).next().fadeOut(200,function() {
$('#gray-display').hide();
$('.header-drawer').slideUp();
$('.hamburger-menu').removeClass('open');
});
});
//ドロワーメニュークリックで全て閉じる
//×をハンバーガーに戻す
$('.header-drawer li').click(function() {
$('#gray-display').hide();
$('.header-drawer').hide();
$('.hamburger-menu').removeClass('open');
});
});
以上がハンバーガーメニュー実装になります。
まだ基礎しか勉強していないなかでの実装ですので、もっと効率的なものがあれば是非教えてください。
それでは
ポートフォリオサイトつくりました
デイトラ初級DAY17～19にて自分のポートフォリオサイトをつくりました。
[今回の学習内容]
サイトは一から作成してもよかったのですが、HTMLテンプレートは使ったことがなかったので使ってみました。
Kerri – Responsive Bootstrap 4 One Page Portfolio Template というテンプレートを使用。2600円くらいでした。
テンプレートを扱うのも勉強になりますね。今まで知らなかった実装が感じれます。
すでにできているものをつかってカスタマイズしていきますが、なれないうちはこれも大変。なにがどうなっているのかわからないものを触っていくんですから。
簡単なプロフィールと今まで作ってきた模写サイトを掲載していきました。
ちなみに僕が作ってきたのはHikoProさんのサイトを主に参考にしてます。
模写サイトはGitHubを使ってアップロードしました。
GitHubはデイトラでは教えていなかったですが、僕がYouTubeでよく見ているしまぷーのＩＴ大学さんの動画を見ながら実行しました。
動画を見ながらやったらけっこう簡単にできました。
エックスサーバーでは1年契約でサーバーを契約（年間13200円くらい）
エックスサーバーでドメイン永久無料のキャンペーン中でしたので、そのままドメインを取得。
ちなみに、サーバーはインターネット上の土地、ドメインはインターネット上の住所のことです。
この2つを契約しないとサイトをWEB上で公開できないそうです。
そして最後にFTPクライアントソフト、Cyberduckをダウンロードして、
エックスサーバー登録時にメールで送られてきていたFTPパスワードなどを入力してサイトのファイルをアップロード。
これでサイトがWEB上にアップロードできました。
でも反映に時間がかかるのか、初めてアップロードした時はURLを入力してもWEBでは全く見れませんでした。次の日に確認したら普通にみれました。
1日弱かかるときもあるんですね。
なれない作業で結構時間がかかりましたが、なんとか公開できました。
その他今回したこととして
- 画像の圧縮
画像データが大きくなってくるとサイトのアップロードが遅くなり結果としてユーザーから使いにくいサイトになってしまうので圧縮してから上げたほうが良いらしいです。
- ロゴの作成
オリジナルサイトらしく簡単にロゴが作成できるサイトです。
僕もこれでfaviconやIconを作りました。
- Twitterカード、メタタグの設定
tiwitterやLINEなどのSNSでリンク先の内容が表示されるために必要なものです。
ユーザーにクリックされやすくするために重要です。
headタグ内に書いていきます。
<meta name="twitter:card" content="カード種類" /> <!--①-->
※カード種類は４種類
①Summary Card ②Summary Card with Large Imag
③App Card（アプリ配布用） ④Player Card（動画サイト用）
通常は①か②でOK
<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->
以上が今回学習したことです。
まだまだ未熟なのでさらに上達していきたいです。
それでは
デイトラ 初級DAY1～16
デイトラを始めて1日目です。
もともと独学でHTML、CSSの基礎は学習していたので一気にDAY1～16まで進めていきました。
VSCODEの環境構築、HTMLとCSSで簡単なサイト作成、BootStrapでのサイト作成でした。
こうしてやってみるとプロゲート、ドットインストールで学習していて良かったと思います。
デイトラはHTMLとCSSの基礎は割とサラッといくような感じでした。
だからプロゲートなので基礎を勉強しておかないといきなり置いていかれるような気がしました。
プログラミングを全く学習したことがない方は、プロゲートからが本当に正解だと思います。
そして初級DAY１５からは、エディターからは一旦離れて、AdobeXDでのデザインカンプ作りを行いました。
デザインカンプとはデザイナーさんがつくるランディングページの設計図みたいなものです。それをもとにコーダーがコードを書いていくと。
だからその知識がないとＷＥＢ制作はできないので、そこを勉強していこうということです。
ここで、デイトラではじめて、初めてのつまづきが・・・
私はWindowsを使っているのですが、
横スクロールができない・・・・
縦にしかスクロールできずに横に動かないんです。
だから横の画面外を見るときは縮小してみていました。非常にやりにくにい・・・
深夜を回っていたのでメンターに質問しても質問はかえってこない。
途方にくれていました。でもあることをしたら横に動きました。
それは・・・スペースキーを押す事。
スペースキーを押しながらマウス左クリックを押したら画面をつかんでくれるのでそのまま動かせば全体が横に動きました。
なんと単純なことでした。
これでひっかかるのはきっと私だけではないと思うので、いや思いたいので是非初学のかたは参考にしてください。
今回はそんなとこで。
それでは
オンラインプログラミングスクール デイトラ始めます
昨日からオンラインプログラミングスクール「デイトラ」のWeb制作コースを始めました。
なぜデイトラを選んだかというと、
- 体形的に勉強ができるから
- 自分のペースで勉強ができるから
- 完全オンライン
- 10万円以下でメンター付だから
- 転職だけというよりも、副業などで実際に稼ぐことを想定しているみたいだから
実は３か月ほど前から、プログラミングの独学を始めました。
ドットインストール、プロゲートのHTML、CSS、JavaScriptのコース全てをやり（有料コース含め）、そのあとは模写サイトを５個ほどつくってきました。
模写サイトおすすめで紹介されているものや、YOUTUBEで紹介されているもので勉強してきました。
しかし、どうも断片的にしか勉強ができていない気がしていました。
完全独学だと学習ストーリーを明確にするのが難しいんです。
紹介されている模写サイトを作っても、その後なにをしようと。
そして他の模写サイトみつけてまた作って。
確かに作るたびに勉強にはなるのですが、先が見えないなと・・・
やはり体系的に学べるスクールで勉強したほうが効率的ではないかと思ってきました。
プログラミングスクールも色々検討しましたが、結構受講費が高いですよね。
3か月みっちりで転職保証付きだと60万～80万
オンライン専門でも20万くらいと・・・
もちろんそれだけの価値があるのかもしれませんが、私はそれだけのお金をだしても、現職を続けながら継続的に勉強を続けるのが難しいかなと思い躊躇していました。
というのも、私は現職で呉服屋の店長をしていますが、これがかなり激務です。
店は10時オープン、21時クローズ、年中無休なのですが、店長は基本的に通し勤務です。オープンからクローズまで出勤です。
基本的には朝8時に出勤し、店をでるのが21時くらいです。休憩1時間なので12時間勤務ですね。
展示会などの売り出しがあるときは7時半出勤～22時退社です。
お休みは毎月６日（２月は５日）で固定です。もちろん状況により休日出勤も月に１~2回くらいのペースでありえます。
この環境ではリアル教室に通うのも無理、オンライン専門であってもそれだけのお金を払って勉強したくても時間が無くてできないというストレスがかかることが不安で躊躇していたんです。
そんなときにデイトラのことを知り、調べてみると月10万円以下で勉強ができ、スラックですが質問もしほうだい、３か月で１つのコースの完了を目指しているが１年間はサポートしてくれる、完全オンラインで自分のペースでできるということに魅力を感じ、
これなら自分の生活リズムにあったペースで続けていけると思いデイトラに申し込みました。
これで学習ストーリーが明確になったということで、デイトラで勉強したことの学習記録をメインにブログを続けていこうと思います。
それでは
30代未経験プログラミング学習を始めます
はじめまして！
レンと申します。
35才、呉服屋店長をしています。
全くの畑違いですが、プログラミングを勉強中です。
30代、未経験のド素人である私がプログラミングを勉強して稼いでいけるのかを学習の記録をつけながら検証していこうと思います。
長い道のりになるかもしれませんが、頑張っていこうと思います。
決して若くないこの年齢で、なにを今更無駄なことをと思う方もいるかもしれませんが、あきらめずに学習を進めていこうと思います。
