CSS 【コーディング】overflowでスクロールするようにした要素のスクロールできることを知らせるテキストを挿入する(スクロールすると消える) レスポンシブ時にoverflowでスクロースできるようにしたテーブルやブロックを作成することがあるかと思います。 ただ、そのままだとスクロールできることが分かりにくい場合があります。 そこ...続きを読む CSSJavascriptWEBサイトプログラミング・コーディング
CSS 【コーディング】スクロールでセクションごとに固定エリアの内容を変える スクロールをすると固定エリアが表示して、スクロール量(セクションに入ったら)によってテキストの内容を変えるHTMLとCSS、jsです。 See the Pen scrollblock by 3r...続きを読む CSSJavascriptWEBサイト
Javascript 【javascript】複数あるclassに対して処理を行う javascriptで要素を取得する時、idで指定すると1つの要素を指定して処理が行われますので簡単なのですが、classは複数存在する可能性があるものですのでループ処理を行う必要があります。 ...続きを読む JavascriptWEBサイトプログラミング・コーディング
Javascript 【JS】slick.js|サムネイル付きで縦に配置する スライダー機能を簡単に導入できるslick.jsを使う場合、通常は下にサムネイル挿入されているものがほとんどです。 ですが、サムネイル付きのスライダーは2つのスライダーを使用しているので自由に位置の...続きを読む Javascriptワードプレス
Javascript 【javascript】クリックでその要素のスタイルを変え、対応する別の要素のスタイルも変える onclickでその要素のスタイルを変えて、加えて対応する要素をスタイルを変更するコードです。 フィールドをクリックするとその要素の背景を白くして、対応するパンくずを太字にします。 対応す...続きを読む JavascriptWEBサイトプログラミング・コーディング
Javascript スライダーをslick.jsを使用して実装する方法 スライダーを導入する時に全て自作でとなると相当大変な上に変な動きになったりしてしまい、上手くいかないことが多いかと思います。 そんな時はツールを使うと簡単に実装することが出来ます。 ここで...続きを読む JavascriptWEBサイトプログラミング・コーディング初心者
Javascript 【jquery】現在あるメニューをモーダルメニューにする ハンバーガーメニューを作成する時に現行サイトの修正だとサイトによって記述を変えることがあるので、汎用的なハンバーガーモーダルメニューを作成してみました。 1つのメニュー領域だけでなく複数のメニュ...続きを読む JavascriptWEBサイトプログラミング・コーディング
Javascript 【javascript】画面に表示したらアニメーションで表示する 画面に表示したらアニメーションで表示するjsです。 jqueryなしで、IEにも対応しています。 デモ HTML <div class="fade_box" data-ani...続きを読む JavascriptWEBサイトプログラミング・コーディング
Javascript 【jQuery】子要素の順番を指定して取得する 複数ある子要素を色々な方法で取得してみます。 主に eq()⇒数字を指定して何番目かを取得 index()⇒何番目かを取得 を使っていきます。 HTMLソース <div id...続きを読む JavascriptWEBサイトプログラミング・コーディング
CSS 【CSS】CSSだけで要素にアニメーションをつける(画面に入った時に動くJSのおまけ) いつもアニメーションのやり方を調べてしまうのでメモです。 hoverでアニメーション liタグをhoverすると動くCSSです。 /*▼ここは解説です。 ■ベンダープレフィックス -moz-...続きを読む CSSJavascript
CSS CSSとJSでページを開いたときにアニメーションのロゴを数秒出す ページを開いたときに数秒のオープニングを入れるスクリプトを紹介します。 今回はロゴを簡単にアニメーションさせるものおですが、応用すれば色々な演出が可能です。 ファイル構成は inde...続きを読む CSSJavascriptWEBサイトプログラミング・コーディングワードプレス