css gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】
最近CSSのgridを使う機会がありました。最低限の仕組みを知っておく必要があると思い、基本的な並べ方を実装する方法をまとめました。
gridの基本的な使い方
gridは要素の表示形式を設定するdisplayプロパティの値にな...
css
css 
css プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】
JavaScriptの練習で簡単なモーダルウィンドウを作成しました。表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。プラグインを使うほどではない時の実装に使えそうなのでメモ。
完成したモーダルウィンドウを...
css プラグインを使わずにLightbox（ライトボックス）風ギャラリーを作りました【JavaScript】
Javascriptの練習でライトボックス風のギャラリーを作成しました。スマホでスワイプできると思いますが、Androidでは確認しておりません。。プラグインを使うほどではない！CDNを読み込みたくない！jQueryを使いたくない！場...
css CSSでボーダー（枠線）に画像を設定する方法【CSS/border-image】
CSSのborder-imageでボーダーに画像を設定する方法を調べました。設定項目が多くて混乱しましたが、必要なポイントだけ抑えたら希望通りの表現ができました。これでおしゃれな枠線も思いのままです！
作成した枠線のサンプルを確認す...
css ページのローディング中にPACEプラグインでプログレスバーを表示する【Javascript/CSS】
表示に時間がかかるような重いページを開く時、プログレスバーなどで読み込み状況を表示させるとページ離脱防止になります。今回、お手軽にプラグインで実装したのでメモ。
PACEプラグインでプログレスバーを表示
設置は簡単で、以下コー...
css 要素を背景イメージの大きさに合わせる【CSS/SCSS】
要素に設定した背景イメージを表示させるには、その要素に幅と高さの設定が必要です。幅と高さをイメージにフィットさせたい場合、幅は設定できても、高さを設定できない場合が多いと思います。理由は、レスポンシブデザインだと要素そのものが可変になるの...
css ブラウザのスクロールに応じてアニメーションを実行する方法【Javascript/Intersection Observer】
ブラウザをスクロールすると、文字や画像がふわっと表示されるサイトがあります。こういったスクロールの量によって発火するイベントはjQueryのプラグインを使っていました。今回、jQueryを使用しない実装方法を調べたのでメモ。
Int...
css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。
カスタマイズの内容（デモ）
設置...
css floatでキャプション付き画像にテキストを回り込ませる【CSS】
floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。
floatでテキストを回り込ませるデモ（デモ）
ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。
PC...
css ルビ（ふりがな）の位置を調整する方法【CSS】
ウェブページの漢字にルビ（ふりがな）をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。
ルビをふるコード
こちらがルビをふるタグです。<rt>タグの部分...