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