css コンテンツを開閉できる『もっと見るボタン』をつくりました【javascript/jQuery】
ウェブページで、途中まで文章が表示されていて『もっと見る』ボタンをクリックすると、残りのコンテンツが表示される動きがあります。 今回、リストなどの長いコンテンツを開閉できるボタンをjavascriptで実装したのでメモ。 2024年1月1日...
css
css 
css コンテンツを開閉できる『もっと見るボタン』をつくりました【JavaScript/複数/jQueryなし】
ウェブページでリストなどの長いコンテンツを開閉できるボタンをJavaScriptで実装しました。 具体的には、コンテンツが途中まで表示されていて『もっと見る』ボタンをクリックすると、続きのコンテンツが表示される動きです。 以前jQueryで...
css CSSだけで文字をデザインする【見出し/文字の縁取り/text-shadow/text-stroke/background-clip】
最近は、テキストのデザインをCSSだけで再現することが多くなってきました。主に文字の縁取りを使ったデザインになりますが、「見出し」をCSSだけでいくつか作成しました。将来コピペできるようにメモしておきます！ 使用しているフォント 今回、Go...
css 要素を上下左右中央に配置してフッターを下に固定する【CSS】
要素を上下左右中央に配置して、コンテンツ量が少ない時もフッターを画面の下に固定したい！ってことはよくあります。方法は色々ありますが、最近よく使っている手法をメモ。 実装したいレイアウトを確認する 実装したいレイアウトはこちらです！ 要素は上...
css gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】
最近CSSのgridを使う機会がありました。最低限の仕組みを知っておく必要があると思い、基本的な並べ方を実装する方法をまとめました。 gridの基本的な使い方 gridは要素の表示形式を設定するdisplayプロパティの値になります。 di...
css プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】
JavaScriptの練習で簡単なモーダルウィンドウを作成しました。表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。プラグインを使うほどではない時の実装に使えそうなのでメモ。 完成したモーダルウィンドウを確認する...
css プラグインを使わずにLightbox（ライトボックス）風ギャラリーを作りました【JavaScript】
Javascriptの練習でライトボックス風のギャラリーを作成しました。スマホでスワイプできると思いますが、Androidでは確認しておりません。。プラグインを使うほどではない！CDNを読み込みたくない！jQueryを使いたくない！場合に使...
css CSSでボーダー（枠線）に画像を設定する方法【CSS/border-image】
CSSのborder-imageでボーダーに画像を設定する方法を調べました。設定項目が多くて混乱しましたが、必要なポイントだけ抑えたら希望通りの表現ができました。これでおしゃれな枠線も思いのままです！ 作成した枠線のサンプルを確認する どん...
css ページのローディング中にPACEプラグインでプログレスバーを表示する【Javascript/CSS】
表示に時間がかかるような重いページを開く時、プログレスバーなどで読み込み状況を表示させるとページ離脱防止になります。今回、お手軽にプラグインで実装したのでメモ。 PACEプラグインでプログレスバーを表示 設置は簡単で、以下コードをheadタ...
css 要素を背景イメージの大きさに合わせる【CSS/SCSS】
要素に設定した背景イメージを表示させるには、その要素に幅と高さの設定が必要です。幅と高さをイメージにフィットさせたい場合、幅は設定できても、高さを設定できない場合が多いと思います。理由は、レスポンシブデザインだと要素そのものが可変になるので...
css ブラウザのスクロールに応じてアニメーションを実行する方法【Javascript/Intersection Observer】
ブラウザをスクロールすると、文字や画像がふわっと表示されるサイトがあります。こういったスクロールの量によって発火するイベントはjQueryのプラグインを使っていました。今回、jQueryを使用しない実装方法を調べたのでメモ。 Interse...
css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。 カスタマイズの内容（デモ） 設置方法はいろいろなブログ...
css floatでキャプション付き画像にテキストを回り込ませる【CSS】
floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。 floatでテキストを回り込ませるデモ（デモ） ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。 PC版 SP版 実際の動...
css ルビ（ふりがな）の位置を調整する方法【CSS】
ウェブページの漢字にルビ（ふりがな）をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。 ルビをふるコード こちらがルビをふるタグです。<rt>タグの部分が表示されるルビです...
css ページ全体に色違いの背景パターンを表示する方法【CSS】
ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。 完成したページを確認する（デモ） こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザインが実現できそ...
css グリッドレイアウトをfloatで実装する【CSS/SASS(SCSS)】
あまり需要がなさそうですが、floatでグリッドレイアウトを実装したのでメモ。特に今回はSassで実装したので、その忘備録も兼ねてのメモです。 そもそもグリッドレイアウトとは？から良くわからなかったので調べました。 グリッドレイアウトとは、...
css Sass(SCSS)を使えるようにする（環境開発設定）【css/javascript】
最近使用頻度が多くなってきたSass(SCSS)の環境構築の方法をメモしておきます。 具体的には、node-sassパッケージをnpmでローカルにインストールします。 これだけだと意味不明ですが、調べながら手順をメモしていきます！ちなみに使...
css CSSでいつも使っているメディアクエリ(Media Queries)をまとめました【CSS/SASS(SCSS)】
ウェブページをいちから作成する場合、Sassでコーディングすることが多くなりました。ミックスインを使うと、Media Queriesの記述が大変ラクになります。この為にSassを使っているといっても過言ではない。。でも、いつも記述を忘れるの...
css CSSとJavascriptでカードスタイルのリストをつくる【javascript/CSS】
ブログの記事一覧でよくみかけるカードスタイルのリストを作成したく、今更ながらFlexboxでレイアウトを組んだのでメモ。