記事一覧

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

Scoopを使いNode.jsを入れることができたので、そのNode.jsを使いPugとSassを使えるようにセットアップします。 (注釈:Pug、SassはそれぞれHTML、CSSをより書きやすくし…

しみゃー
4年前
4

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

Node.jsを使ってSassなどを使いたい。自動ビルドとかやってほしい。しかし色々なサイトからダウンロードボタンをクリックし保存してからインストールを繰り返したり、あと…

しみゃー
4年前
1

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

前回のCSS版に続き今度はjQueryやJavaScriptでスムーススクロールを作っていきたいと思います。 必要なことを少しずつやっていって理解を深めたいので、今回はページ内リン…

しみゃー
4年前
1

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

ページ内の指定した場所に突然移動するのではなく、滑らかに移動するスムーススクロール。だいたい何処のサイトでも実装してますよね。けど最初からそうなってるわけじゃな…

しみゃー
4年前
6

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

はじめまして、シマみゃと申します。 ウェブ制作について。主にHTML/CSSやJavaScript、WordPressについて勉強をしています。 これらかこのnoteを使い、今まで勉強してきた…

しみゃー
4年前
22

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

Scoopを使いNode.jsを入れることができたので、そのNode.jsを使いPugとSassを使えるようにセットアップします。

(注釈:Pug、SassはそれぞれHTML、CSSをより書きやすくしたり機能を拡張したテンプレートエンジンやメタ言語と呼ばれるものです。)

Scoopのインストールの仕方は以下の過去記事からどうぞ

yarnのインストール
最初にNode.js用のパッケージマネー

もっとみる

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

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

公式サイト

もっとみる

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

前回のCSS版に続き今度はjQueryやJavaScriptでスムーススクロールを作っていきたいと思います。
必要なことを少しずつやっていって理解を深めたいので、今回はページ内リンク先の位置の取得についてのコードを書きます。

■ 今回のコードCodePenで開く

重要なところを抜粋

$('a[href^="#"]').on('click', function () { const href

もっとみる

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

ページ内の指定した場所に突然移動するのではなく、滑らかに移動するスムーススクロール。だいたい何処のサイトでも実装してますよね。けど最初からそうなってるわけじゃない、何かを書いてその為の処理をさせないといけない。

ということでjQueryを使ってこのスムーススクロールの処理を書こうとしたのですが、今はJavaScriptを使わずCSSだけでできるという話を見たことがあるなと思い出し、まずは先にCS

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

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

はじめまして、シマみゃと申します。
ウェブ制作について。主にHTML/CSSやJavaScript、WordPressについて勉強をしています。
これらかこのnoteを使い、今まで勉強してきたことやこれから勉強しようと思うことをまとめていこうと思いnoteにアカウントを取ってみました。

■ この場所、このnoteをどのように使うのか?検索や調べること自体が趣味みたいなところがあったのですが、イン

もっとみる