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