20201025のHTMLに関する記事は4件です。

【初心者向け】スクロールの途中からヘッダーを出す方法

どうも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.css
header {
  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();               /* ヘッダーをふわっと非表示 */
  }
});

出る時はフェードインで出てくる


step1.png


step2.png


step3.png


解説

動画が重くて動画が出せなかったのですが、ふわっとヘッダーが出ます。
pos.topでmain要素の高さを取得していますが、任意の高さをpx指定することもできます。

htmlがスクロールの関係上長くなっていますが、javascript自体はコンパクトにかけるので難易度は優しい方かなと思います。

他にもいろいろヘッダーの出し方あるので、今後の記事でも書いていけたらとおもっています。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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>

bootstrap公式リファレンスより引用

説明

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をけすことができる。

css
button.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.

作成には以下のサイトを用いました。

interactice CSS

解説

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として機能することを指定します。

css
grid-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と同じ働きをします。

css
grid-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%

になっています。

css
grid-template-rows: 0.2fr 1.4fr 0.1fr 2.4fr 2.9fr 0.1fr 1fr 0.1fr;

これは縦幅を指定します。
原理は横幅と同じため割愛します。

使えるツール

buttonジェネレータ

http://cssbuttongen.com/

選択肢を選んでいくことで簡単にボタンを実装できます。

アニメーション

https://www.csswand.dev/

ローディングとhover時のアニメーションが複数収録されています。

Drawer

http://git.blivesta.com/drawer/

横からメニューを出す実装が簡単にできます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

テンプレートリテラル記法の中でHTMLをハイライトさせる

やりたいこと

VSCodeでJSファイルの中でテンプレートリテラル記法を使ってHTMLを書く時、テンプレートリテラル内のHTMLをシンタックスでいい感じで色付けしたい
ProductDisplay_js_—_intro-to-vue-3.gif

結論

  1. 拡張機能(es6-string-html)を入れる
  2. テンプレートリテラル記法の直前に/*html*/の記述を付け加える

補足

/*html*/の記述を付け加えないと、味気ない感じになってしまうProductDisplay_js_—_intro-to-vue-3.gif

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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.

また、様々なメールアドレスに正規表現を適用するテストページをこちらに作成しました。

image.png

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 なメールアドレスと判定されます。

上の正規表現の遷移図は以下のようになっています。

image.png
(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]$/

遷移図は以下のようになります。

image.png
(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 by pattern, 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 の以下のページに、ちょうどよい感じのテストデータがあります。

これを使って実装したのが冒頭のデモです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む