コーディングでよく実装する機能メモ | ウェブカツ！プログラミング学習記　

こんにちは。ウェブカツ！女性割引にてプログラミング学習中のみや***です。

せっかくウェブカツをしているのに、この頃はまったくウェブカツコンテンツに触れられておらず

日々学習しているのもプログラミングというよりコーディング・・・

Vueとかもっと触りたいよ〜

という悲しみもありつつ、

最初のHTML/CSSの学習段階で模写５サイトをサボったつけが回ってきたのだ・・・と反省しています。

ということで今回の進捗記事もコーディング関係がメインです。

「私のためのよく実装するコード」まとめ

その中で、古いサイトをそのままそっくり静的ページに置き換える、という作業がありまして

そのサイト達を見ていると、だいたいどのサイトにも実装されていてる機能がなんとなくわかったので

その機能のコード達をすぐ引っ張り出せるように、ここにピックアップしてみます。つまりカンペ集です。

毎回ググるのめんどくさいし、覚えられないし・・・なによりも調べている時間がもったいない！

ということでどこにでもありそうな機能ばかりですが、たたっと並べてゆきます。

スクロールで上から降りてくるヘッダーメニュー

See the Pen
上からにゅるっとメニューバー by hiro (@hiro555)
on CodePen.

スクロールすると、トップからにゅるんと降りてくるメニューです。jQuery使用。

普通にヘッダーにいる時とスクロールで降りてきたときとでCSSが変わる仕様です。

こちらの記事で簡単にまとめています。

jQuery | スクロールで上からにゅるっと出てくるメニューバー 

スクロールで下からぴょんと出てくるTOPへ戻るボタン

See the Pen
トップへもどるボタンが下からにょきっと by hiro (@hiro555)
on CodePen.

少し前にツイッターで「TOPへ戻るボタン不要論」をお見かけして、それからなんとなく自分で作るサイトには実装できずにいたのですが・・・

現場ではとりあえず実装する機会があるようなので、作ってみました。

なんかでもこれ、少し難しいです＾＾；

私が作ったボタンは若干挙動不審・・・なぜ・・・

こちらは以下の記事でもひっかかった点や解説を加えています。

jQuery | 下からにょきっと出てくる「トップへ戻る」ボタン 

モバイルビュー時のドロワーメニュー(上から)

モバイル時だとヘッダーメニューがボタンになって、押すとすーっと出てくるタイプに変わる。

よくあるやつですよね。

私がみたサイトで使われていたドロワーメニューをほぼまんま再現したのが以下のコードです。

See the Pen
jQueryでかんたん上からアコーディオンメニュー by hiro (@hiro555)
on CodePen.

jQueryのslideToggle()を使うだけでめちゃくちゃ簡単に実装できます！

.not(“:animated”)を加えることで、すでにアニメーションが始まっている場合は発動しないような仕様に。連続タップによるがたつきを防いでいます。

追従スマホメニュー開閉（左から）

こちらはもう少しおしゃれなタイプ。

See the Pen
JSで作る追従ドロワースマホメニュー by hiro (@hiro555)
on CodePen.

スクロールに合わせて追従してきて、クリックするとすーっと開くタイプです。

こちらもjQueryは使っていますが、toggleClassでクラスを付け外しすることで機能を実現しています。

position:fixedも便利！

ヘッダーナビのカレント表示

See the Pen
ヘッダーナビのカレント表示 by hiro (@hiro555)
on CodePen.

ヘッダーナビの現在表示しているページのみデザインが変わるやつ。です。

すいません上のcodePen上のコード自体は大丈夫なんですが、実際にページを作っているわけではないので見た目は反映されていません。

あくまでコードのみ、ということで・・・

JSのコード内ではurl自体を比較するかpathnameを比較するかの違いもあったと記憶しているので、適時状況に合わせて変えていただければ、と思います。

ちなみに今回のコードを関数化して使用する機会がありましたので、その際はこんな感じでいけるようです。

    $(function () {

      // 関数を定義。関数名はcurrentPage
      function curretPage() {
        var $href = $(this).attr('href');
        if (location.pathname.match($href)) {
          $(this).parent().addClass('current');
        } else {
          $(this).parent().removeClass('current');
        }
      }

      // 関数を使用
      $('#js li a').each(curretPage);
    });

表（FlexBox使用）

See the Pen
di dt dd とFlexのシンプルテーブル by hiro (@hiro555)
on CodePen.

値段表や機能の一覧なんかに使えます。

時間がなくて焦ってくるとまだ使い慣れてないdl,dt,ddがこんがらがる・・・

See the Pen
ul/li/Flexで作るシンプルテーブル　タイトル縦中央寄せ by hiro (@hiro555)
on CodePen.

↑は同じくテーブルですが、ulタグで作っています。

まとめ