学び ドラック＆ドロップでファイル名を日付に変える
サンプル windows環境で使用してください @echo off setlocal enabledelayedexpansion set num=0 for %%F in (%*) do ( set /a num=num+1 set fo...
学び 
WEB制作 便利なGoogleマテリアルアイコンの使い方
Googleマテリアルアイコンとは Googleマテリアルアイコンとは、Googleが提供しているアイコンフォントです。 使うための準備 Googleマテリアルアイコンを使うためには、head要素の中にlink要素を記述します <link ...
WEB制作 CSSアニメーションでアイコンを動かす
CSSを使ってアニメーション CSSアニメーションを使うことで、ちょっとした動きのあるページをつくることができます。 使い方 @keyframesでどのように動かすか記載します。アニメーション開始を0％、終了を100％としてそれぞれに変化さ...
WEB制作 ページ表示速度を高速化「loading属性」を使ってみる
loading属性とは loading属性をつかうことで遅延読み込み（Lazy loading）を行うことができます。 遅延読み込み（Lazy loading）とは、画像が画面上に表示されていないときに読み込みを行わないようにすることで、通...
WEB制作 簡単にスライドを作れるJSライブラリ「Swiper.js」を紹介
Swiper.jsとは 簡単にスライダーを実装することができるJavaScriptのライブラリです。いろんなパターンのスライダーにも対応できるのですごくいいと思います。 使い方 スライダーを実装したいページのHTMLに以下を追加することで、...
WEB制作 HTMLを書き始めるときの初期テンプレート
HTMLの初期テンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi...
WEB制作 SCSSの使い方
SCSSとはなにか？ SCSSとは、CSSをより効率的に書くことができる言語のことです。 SCSSを使うことでCSSが複雑化したり、肥大化することを抑えてくれ、メンテナンスしやすくなります。 SCSSを使うメリット CSSのコード量をへらす...
WEB制作 CSSだけで画像の白背景を透過させる方法
CSSだけで画像の白背景を透過させる方法 ロゴなど背景を透過させたいけど元の画像の背景が透過されていないときがあると思いますが、そんなときに便利なCSSがあります。 CSSだけで画像の白背景を透過できるmix-blend-modeプロパティ...
WEB制作 CSSを使った画像のトリミングをする方法
CSSを使った画像のトリミングする方法 画像の一覧を表示したいときなど、すべての画像が同じサイズだといいですが違う場合があったり、デバイスによってサイズを変更したいときってありますよね。そんなときに便利なCSSがあります。CSSを使って画像...