CSS 【CSS】sassの便利機能
変数
css自体でもカスタムプロパティを使用して変数に近い設定ができますが、scssはもっと直感的に変数を扱うことができます。
また、変数ファイルを作成してスタイルと分けて管理することもできま...続きを読む
CSS
CSS 
CSS 【コーディング】スクロールでセクションごとに固定エリアの内容を変える
スクロールをすると固定エリアが表示して、スクロール量（セクションに入ったら）によってテキストの内容を変えるHTMLとCSS、jsです。
See the Pen
scrollblock by 3r...続きを読む
CSS 【コーディング】overflowでスクロールするようにした要素のスクロールできることを知らせるテキストを挿入する（スクロールすると消える）
レスポンシブ時にoverflowでスクロースできるようにしたテーブルやブロックを作成することがあるかと思います。
ただ、そのままだとスクロールできることが分かりにくい場合があります。
そこ...続きを読む
CSS 【CSS,JS】jqueryなしでスムーズスクロール（アンカーでのスクロールをアニメーション）
jqueryなしでjavascriptのみでアンカークリックによるスムーズスクロールの実装方法です。
See the Pen
smooth_scroll by 3rdcom (@3rdcom)
...続きを読む
CSS 【CSS】CSSだけでアコーディンオン目次をアニメーション付きで作成する
SEO対策などを考えて、目次を導入するサイトが増えてきているようです。
一か所のアコーディオンのお為にわざわざjavascriptやjqueryを使うのも面倒な時にcssだけでアコーディオンを実...続きを読む
CSS 【CSS】簡単にaタグをボタンにする方法
aタグのボタン
↓
aタグのボタン
サイトでボタンを作る時には様々な方法があります。
専ら画像を使うことが多いですが、cssだけで簡単におしゃれなボタンを作ってみましょう。
HTMLは簡...続きを読む
CSS レスポンシブ作業で少しだけ画面幅からはみ出す原因
レスポンシブ作業を行っているとスマホ表示で１pxとか2pxだけはみ出ることがあります。
widthは100％にしているので収まるはずが収まらない！っということが良くあります。
そんな時に確...続きを読む
CSS 【CSS】CSSだけで要素にアニメーションをつける（画面に入った時に動くJSのおまけ）
いつもアニメーションのやり方を調べてしまうのでメモです。
hoverでアニメーション
liタグをhoverすると動くCSSです。
/*▼ここは解説です。
■ベンダープレフィックス
-moz-...続きを読む
CSS 【CSS】超簡単にリンク画像にアニメ―ションをつける方法
最近ではリンクのhover（マウスオーバー）で動きをつけるのが当たり前になってきました。
そこで既存のサイトで簡単に動きをつける方法をご紹介します。
今回はサイト全体で一気に設定を変えてし...続きを読む
CSS CSSとJSでページを開いたときにアニメーションのロゴを数秒出す
ページを開いたときに数秒のオープニングを入れるスクリプトを紹介します。
今回はロゴを簡単にアニメーションさせるものおですが、応用すれば色々な演出が可能です。
ファイル構成は
inde...続きを読む