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