しみゃー

https://shimyaaa.com/

しみゃー

https://shimyaaa.com/

Node.jsを使ってPugとSassを導入してみる

Scoopを使いNode.jsを入れることができたので、そのNode.jsを使いPugとSassを使えるようにセットアップします。 （注釈：Pug、SassはそれぞれHTML、CSSをより書きやすくしたり機能を拡張したテンプレートエンジンやメタ言語と呼ばれるものです。） Scoopのインストールの仕方は以下の過去記事からどうぞ yarnのインストール 最初にNode.js用のパッケージマネージャーを使ってインストールしていくのですが、Node.jsにはじめから付属してい

しみゃー

    • Windows用パッケージ管理システムの「Scoop」を入れてみた

      Node.jsを使ってSassなどを使いたい。自動ビルドとかやってほしい。しかし色々なサイトからダウンロードボタンをクリックし保存してからインストールを繰り返したり、あとでいらないからアンインストールしようとしたり、そもそも入れてたっけと確認管理するのは面倒そう。macOSでいうHomebrewみたいなパッケージ管理システムがあれば楽にできるんだけどなーと思い調べてみたらありました。 公式サイト：Scoop 参考記事：Scoopを使ったWindows環境構築のススメ - S

      しみゃー

      • ページ内リンク先のポジションの取得 (jQuery ver.)

        前回のCSS版に続き今度はjQueryやJavaScriptでスムーススクロールを作っていきたいと思います。 必要なことを少しずつやっていって理解を深めたいので、今回はページ内リンク先の位置の取得についてのコードを書きます。 ■ 今回のコードCodePenで開く 重要なところを抜粋 $('a[href^="#"]').on('click', function () { const href = $(this).attr('href'); const targetPos

        しみゃー

        • ページ内リンクをスムーススクロール (CSS ver.)

          ページ内の指定した場所に突然移動するのではなく、滑らかに移動するスムーススクロール。だいたい何処のサイトでも実装してますよね。けど最初からそうなってるわけじゃない、何かを書いてその為の処理をさせないといけない。 ということでjQueryを使ってこのスムーススクロールの処理を書こうとしたのですが、今はJavaScriptを使わずCSSだけでできるという話を見たことがあるなと思い出し、まずは先にCSSだけで再現できるver.を書いてみようと思います。 しかし、このスムーススク

          しみゃー

        Node.jsを使ってPugとSassを導入してみる

        しみゃー

          はじめまして、はじめました。 (おまけ: noteの説明、登録方法)

          はじめまして、シマみゃと申します。 ウェブ制作について。主にHTML/CSSやJavaScript、WordPressについて勉強をしています。 これらかこのnoteを使い、今まで勉強してきたことやこれから勉強しようと思うことをまとめていこうと思いnoteにアカウントを取ってみました。 ■ この場所、このnoteをどのように使うのか？検索や調べること自体が趣味みたいなところがあったのですが、インプットはたくさんしていてもアウトプットがなかなか出来てなかったのでそんな場所が欲

          しみゃー

          はじめまして、はじめました。 (おまけ: noteの説明、登録方法)

          しみゃー