- 投稿日:2020-10-25T23:36:48+09:00
【初心者向け】スクロールの途中からヘッダーを出す方法
どうも7noteです。スクロールしたら出てくるヘッダー作ります。
最初は大きく写真を見せて、スクロールした後にヘッダーを表示させたい時の動きです。
※jQueryを使っています。jQeryってなんだ?って方はこちら
ソース
index.html<!-- html、長いですがほとんど意味のあまりないソースです。 --> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <header> <p>ここがヘッダーです。</p> </header> <div class="mv"> <img src="sample.jpg" alt="メインビジュアル"> </div> <main> <div class="step1"> <h2>ステップ1</h2> <p>こんにちは。こんにちは。こんにちは。こんにちは。</p> </div> <div class="step2"> <h2>ステップ2</h2> <p>コンバンワコンバンワコンバンワコンバンワ</p> </div> <!-- ここから先はスクロールさせるための尺稼ぎ --> <div class="stepx"> <h2>ステップx</h2> <p>〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜</p> </div> <div class="stepx"> <h2>ステップx</h2> <p>〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜</p> </div> <div class="stepx"> <h2>ステップx</h2> <p>〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜</p> </div> <div class="stepx"> <h2>ステップx</h2> <p>〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜<br> 〜〜〜〜〜</p> </div> </main>style.cssheader { width: 100%; /* 要素を幅いっぱいにする */ background: #555; /* 背景色を濃いグレーに指定。半透明の「rgba(0,0,0,0.5)」でもいいかも */ display: none; /* ページ読み込み時は非表示にする */ position: fixed; /* ヘッダーを絶対位置にする。スクロールしても固定 */ top: 0; /* 上から0pxに指定 */ left: 0; /* 左から0pxに指定 */ padding: 10px 20px; /* ちょっと余白をとっとくと綺麗 */ box-sizing: border-box; /* paddingを含んで幅100%ちょうどにするため */ } header p { color: #fff; /* 文字色を白にする */ } .mv { width: 100vw; /* ウィンドウサイズ横幅いっぱいに表示 */ height: 100vh; /* ウィンドウサイズ縦幅いっぱいに表示 */ } .mv img { width: 100%; /* 幅いっぱい */ height: 100%; /* 高さいっぱい */ object-fit: cover; /* background-size: cover;みたいに全面に収まるように画像を表示(IEでは効かないよ。) */ }script.js$(window).scroll(function () { /* スクロールされた時 */ var pos = $('main').offset(); /* mvを過ぎたmainタグの高さを取得して変数[pos]に格納 */ if ($(this).scrollTop() > pos.top) { /* 変数[pos]より、スクロールされていたら */ $('header').fadeIn(); /* ヘッダーをふわっと表示 */ } else { /* それ以外の場合 */ $('header').fadeOut(); /* ヘッダーをふわっと非表示 */ } });出る時はフェードインで出てくる
解説
動画が重くて動画が出せなかったのですが、ふわっとヘッダーが出ます。
pos.top
でmain要素の高さを取得していますが、任意の高さをpx指定することもできます。htmlがスクロールの関係上長くなっていますが、javascript自体はコンパクトにかけるので難易度は優しい方かなと思います。
他にもいろいろヘッダーの出し方あるので、今後の記事でも書いていけたらとおもっています。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-10-25T17:42:52+09:00
web制作を効率化するためのメモ
はじめに
フロントエンドエンジニアとしてインターンに参加することになったので、フロントエンドのコーディングを効率化するためのツールやプラグインについてまとめます。
使用する言語・ツール
・codepen
・html
・sass (scss)
・bootstrap目次
・header
・button
・grid
- grid
- bootstrap
・使えるプラグインheader
bootstrapをしようすることで簡単にheaderを作成可能です。
bootstrapのnavの基本構成は以下のようになります。
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>説明
nav
navbar
ナビゲーションを生成しますnavbar-expand-lg: large以上でメニューを展開する
※大きさ
auto sm md lg xl all 576px 768px 992px 1200px navbar-light(black)
文字の色を変更可能(light:黒 dark:白)bg-
backgroud(headerの背景色)を指定できます。
bg-dark: 暗め
bg-light: 明るめ
bg-primary: 青*bgとnavbar-lightに関しては自身で色を選択することができるのでclassで指定しなくてもokです。
fixed-top
fixed-topにしてうやることで上に固定される
同様にfixed-bottomにしてやることでfotterにすることが可能navbar-brand
ヘッダーのロゴやタイトルに使われる
button
navbar-toggler
トグルとして機能するfocusされたときにoutlineをnoneにすることでoutlineをけすことができる。
cssbutton.navbar-toggler:focus{ outline:none; }**data-toggle=collapse**
親要素(ここでいうとnav)のブレークポイント(lg)においてdata-targetの要素を格納するdata-target
data-targetに格納したい要素のidを指定することで親要素のブレークポイントで格納できるnavbar-toggler-icon
navbarのトグルをハンバーガーメニューにする
ここに背景を上書きすることによって自分の使いたいハンバーガーメニューにすることが可能
(注意:navbar-toggler-iconのところに他のclassを入れてそこにurlを入れても、もとのハンバーガーメニューが上書きされないので注意)css.navbar-toggler-icon { background-image: url("自分の画像のurl"); }collapse navbar-collapse
navbar-togglerによって親要素のブレークポイントまで来たときに自動でトグルに格納される
メニュー
ul.navbar-nav
li.nav-item
a.nav-link
でメニューを構成するul.navbar-nav
mr-autoを指定することでmargin-right:auto;,ml-autoでmargih-left:auto;になるli.nav-link
とくになしa.nav-link
ここにtext-centerの要素を追加することでトグルで表示されるときの要素が中央寄せになるdisabledで押せないリンクとして機能する
footeridea
以下のように記述することで簡単なコピーライトを作成可能
<nav class="nav justify-content-center footer fixed-bottom"> <span class="nav-text" href="#">©marumaru</span> </nav>以上のまとめ
See the Pen header by marumaru1019 (@marumaru1019) on CodePen.
grid
display:grid;を使うことによって以下のような大枠を簡単に決めることができる。
See the Pen gridsample by marumaru1019 (@marumaru1019) on CodePen.
作成には以下のサイトを用いました。
解説
css.grid-container { display: grid; grid-template-columns: 3.0% 20% 3% auto 3% 20% 3%; grid-template-rows: 0.2fr 1.4fr 0.1fr 2.4fr 2.9fr 0.1fr 1fr 0.1fr; grid-template-areas: ". . . . . . ." ". header header header header header ." ". . . . . . ." ". left . center . right-top ." ". left . center . right-bottom ." ". . . . . . ." ". footer footer footer footer footer ." ". . . . . . ."; } .center { grid-area: center; } .right-top { grid-area: right-top; } .right-bottom { grid-area: right-bottom; } .header { grid-area: header; } .footer { grid-area: footer; } .left { grid-area: left; }css.grid-container { display: grid; }まず大枠の要素のgrid-containerにdisplay:gridとすることで子要素がgridとして機能することを指定します。
cssgrid-template-areas: ". . . . . . ." ". header header header header header ." ". . . . . . ." ". left . center . right-top ." ". left . center . right-bottom ." ". . . . . . ." ". footer footer footer footer footer ." ". . . . . . .";次にgrid-template-areasでどのようにgridを構成するか指定することができます。
.は空の要素でここに長さを指定してやることでmarginと同じ働きをします。cssgrid-template-columns: 3.0% 20% 3% auto 3% 20% 3%;これは横幅を指定しています。
例えば、
". left . center . right-top ."
に対しては、左から
要素 長さ . 3% left 20% . 3% center auto(他の要素に合わせて自動的に長さを調整) . 3% right-top 20% . 3% になっています。
cssgrid-template-rows: 0.2fr 1.4fr 0.1fr 2.4fr 2.9fr 0.1fr 1fr 0.1fr;これは縦幅を指定します。
原理は横幅と同じため割愛します。使えるツール
buttonジェネレータ
選択肢を選んでいくことで簡単にボタンを実装できます。
アニメーション
ローディングとhover時のアニメーションが複数収録されています。
Drawer
http://git.blivesta.com/drawer/
横からメニューを出す実装が簡単にできます。
- 投稿日:2020-10-25T06:45:38+09:00
テンプレートリテラル記法の中でHTMLをハイライトさせる
やりたいこと
VSCodeでJSファイルの中でテンプレートリテラル記法を使ってHTMLを書く時、テンプレートリテラル内のHTMLをシンタックスでいい感じで色付けしたい
結論
- 拡張機能(es6-string-html)を入れる
- テンプレートリテラル記法の直前に
/*html*/
の記述を付け加える補足
- 投稿日:2020-10-25T01:15:39+09:00
HTML 仕様のメールアドレス正規表現が実用になるように、最小限の修正を加える
TL;DR
以下の正規表現は、HTML 仕様のメールアドレス正規表現の末尾に、 TLD 必須のルールを加えたものです。
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]$/
<input type="email">
のpattern
属性に指定する場合は、以下のように短く書けます。<input type="email" pattern=".+\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]">デモ
以下で実際に入力を試せるようにしました。
See the Pen HTML email validation by koseki (@kkoseki) on CodePen.
また、様々なメールアドレスに正規表現を適用するテストページをこちらに作成しました。
HTML 仕様のメールアドレス正規表現について
HTML 仕様には、
<input type="email">
のバリデーションルールと同等の正規表現が含まれています。以下がその正規表現です。
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ブラウザが標準で提供する機能なので、ぜひこのルールを活用したいところです。
課題
しかしながら。。
この
type="email"
は、TLD の有無に関わらずバリデーションを通します。a@a
は、valid なメールアドレスと判定されます。上の正規表現の遷移図は以下のようになっています。
(via Regexper)このような緩いルールになっている理由は、
pattern
属性を使って更に条件を狭めることができるからです。まず、デフォルトのルールでメールアドレスとして最も広い条件を適用し、次にpattern
で必要に応じた制限を加えます。If you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the pattern attribute to specify a regular expression the value must match for it to be valid.
(via MDN)デフォルトのルールと
pattern
の正規表現は、AND 条件です。両方が検証されます。However, the browser runs both the standard e-mail address filter and our custom pattern against the specified text.
(via MDN)デフォルトルールは「メールアドレス一般のチェック」、
pattern
属性は「サイト固有のチェック」です。2つのルールは AND で検証されるので、pattern
属性で、例えば@
が含まれるかどうかを必ずしもチェックする必要はありません。
pattern
属性を指定しないtype="email"
は、現実には使い物になりません。TLD 無しのメールアドレスの入力を求める場合が、イントラネットなどであるとしても、TLD の有無を問わないようなフォームは、なかなか考えづらいように思います。JPNIC の「ドットなしドメイン名 (Dotless Domain Names) について」の記事も参考になります。正規表現に TLD の制限を加える
そこで、HTML 仕様を極力変えずに TLD の制限を加えてみます。
(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*がドメインの2番め以降のラベルで、0回以上の繰り返しなので、この後に、以下を付け加えます。
\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]1文字の TLD を禁止する仕様は存在しないようですが、今の TLD に1文字のものはないので、
(?: )?
を外して「TLD 2 文字以上」の制限を加えています。上限 63 文字は、他のラベルと同様です。修正を加えた正規表現は以下の通り。
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]$/遷移図は以下のようになります。
(via Regexper)TLD 部分だけを pattern に指定できるか
通常の正規表現であれば、部分一致で、末尾の TLD の正規表現だけを指定できそうなものです。
pattern="\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]$"しかし、これはうまくいきません。HTML の
pattern
属性は、^(?: )$
でラップされるからです。5 . Let
anchoredPattern
be the string"^(?:"
, followed bypattern
, followed by")$"
.
(via HTML Living Standard)なので、
pattern
にはメールアドレス全体にマッチする正規表現を指定する必要があります。
.+
を先頭につけて、pattern=".+\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]"と書けます。デフォルトのルールと
pattern
は両方が検証されるので、前半部分は.+
と省略してしまっても問題ありません。ローカルパートに記号を許すか
デフォルトの正規表現では、以下の記号をローカルパート (
@
より前) に許可しています。.!#$%&'*+/=?^_`{|}~-この内、絶対に必要なのは以下でしょう。
.+_-残りの記号は、場合によっては削ってもよいかもしれません。
!#$%&'*/=?^`{|}~特にユーザ登録で、他のサービスと連携する可能性がある場合、最初から絞っておかないと後で困る可能性がありそうです。こちらで許可した記号が、連携先では許可されていないかもしれません。
メジャーなサービスのバリデーションはどうなっているか
いくつかのサイトで、ユーザ登録画面の挙動を見てみました。(実際には登録せず、クライアントサイドのバリデーションの挙動だけを見ています)
- Facebook は、1 文字の TLD は許可。ローカルパートの記号も許可しているようでした
- Twitter は、1文字の TLD は禁止。記号は基本の文字に加えて
&
を許可していました- Apple ID は、1文字の TLD は禁止。基本の記号だけを許可しているようでした
テスト
Microsoft の以下のページに、ちょうどよい感じのテストデータがあります。
これを使って実装したのが冒頭のデモです。