- 2023.05.31
- webメモ,
css animation（keyframes）でお気に入りボタン作ってみた
お気に入りボタンをクリックした時動きをだしたい場合におすすめなkeyframes お気に入りやクリップ機能で、ボタンをクリックした時に動きを出したい時ってありますよね。 gif画像などを作成するのも一 […]
サイト制作
1/2ページ
- 2022.02.23
- webメモ,
オープニング画面が出た後にページを表示する実装方法（画面内に現れたらフェードするinview付き）
いい感じのサイトを作りたい時に便利なanime.jsとinview.js 画面がローディングされた後、はじめにロゴなどのオープニング画面が表示された後にページを表示する方法をまとめました。 LPやイメ […]
- 2021.08.21
- webメモ,
scrollTop()を使ってスクロール値を保持したままfixedボタン先のポップアップを開閉させる
scrollTop()を使ってスクロール値を保持したままfixedボタン先のポップアップを開閉させる タイトルが長くなってしまいましたが、タイトル通り画面をスクロールした時の位置を保持したまま固定ボタ […]
- 2021.04.20
- webメモ,
要素の数が変化しても指定した横幅に画像を統一する方法
要素の数が変化しても指定した横幅に画像を統一する方法 今回は、スマホなど端末のブラウザサイズが固定ではないときに便利な要素の数が変化しても指定した横幅に画像を統一する方法をご紹介したいと思います。 あ […]
- 2021.03.10
- webメモ,
リストの一定以上から非表示にしてもっと見るリンクで表示させる
リストの一定以上から非表示にしてもっと見るで表示させる 商品や店舗概要など、リスト項目が多い場合、一定以上を非表示にしてもっと見るで表示させたい時ってありますよね。 コンパクトに主要な要素を表示させた […]
- 2020.12.10
- webメモ,
iPhoneで見ても動画再生前にサムネイルを表示させたい時のvideoタグの設定方法
簡単に動画をサイトに表示させることができるvideoタグ 画像だけでなく動画をサイトに表示させたい時ってありますよね。 そんな時便利なのがvideoタグです！ 簡単に動画をサイトに表示させることができ […]
- 2020.10.17
- webメモ,
汎用性の高いスクロールしてもついてくるヘッダーとハンバーガーメニューのテンプレート
スマホサイトで便利なハンバーガーメニュー 今回は以下の要件を満たしたハンバーガーメニューのついたサイトベースを作成しました。 スクロールしてもヘッダーがついてくる スクロール途中でもサイドメニューが開 […]
- 2020.09.13
- webメモ,
複数の変数を代入してさまざまな範囲の高さを取得する方法
可変する複数の高さを取得して合わせた高さを使いたい 可変するバナー画像の高さを取得するというのを以前まとめましたが、今回は可変する複数の高さを取得して、それぞれの高さを合わせる方法をまとめました。 以 […]
- 2020.09.12
- webメモ,
特定の要素までスクロールしたら表示される固定ボタン
特定の要素を過ぎたら表示されるボタン 特定の要素までスクロールしたら、ページ下部に固定されたボタンが表示される実装方法をまとめました。 スマホでもパソコンでも使えるように、画面トップからの距離ではなく […]
- 2020.06.10
- webメモ,
特定の位置までスクロールしたら消える要素の実装方法
ページ内スクロール時リンク先で要素を消す方法 ページ上部や下部に固定したバナー、ボタンなどがページ内リンク先まできたら消えるようにする実装方法を忘れないようにメモしました。 今回はページ下部の固定ボタ […]
- 2020.05.21
- webメモ,
jqueryで画像サイズを取得して別の要素に直接styleで記述する方法
jqueryで画像サイズを取得する方法 可変する画像を使用する際に便利 jqueryで画像サイズを取得して、別要素（今回はdevタグ）に直接styleで記述する方法をまとめました。 バナーだったり、可 […]
- 2020.04.04
- webメモ,
LION Mediaで更新日を表示させる方法（IcoMoonでウェブフォントを追加）
LION Mediaで使用しているアイコンを追加する方法 投稿記事の更新日をブログに表示したいなぁと思っていたのですが、ついつい後回しにしていました。 記事もだんだん増えてきて、以前書いた記事を更新し […]
- 2020.03.29
- webメモ,
マウスオーバーとオーバーレイのポップアップウィンドウ
マウスオーバーとオーバーレイのポップアップウィンドウって、サイトを作成していると良く使いますよね。 今回はCSSだけで実装できるマウスオーバーのポップアップウィンドウと、jqueryを使用したオーバー […]
- 2020.03.25
- webメモ,
ページ内リンクのスムーズスクロール（ページトップ）
LPなどでよく使用するページ内リンクのスムーズスクロールの実装方法をまとめました。 メニューをそれぞれのアンカーリンクへスムーズスクロールさせ、ページ下部にあるページトップへテキストリンクは画面上部へ […]
- 2020.03.25
- webメモ,
ページ上部で固定されるメニュー
今回は、固定したいエリアがページ上部に初めからある場合ではなく途中にあり、スクロース後ページ上部に到達した段階で固定される実装方法をまとめました。 上にメインビジュアルのあるメニューや、サブメニューを […]
- 2020.01.21
- webメモ,
長辺を100%で画像を縦横中央に配置するCSS
さまざまな比率の画像を同じサイズにレイアウトする際に、長辺側を100%として縦横中央に配置するCSSを作成しました。 一覧ページのサムネイル画像をレイアウトする時などに役立ちますね！ その他に、短辺側 […]
- 2020.01.18
- webメモ,
定義リストを表のようにするcss（高さを揃えてテキストは縦中央揃え）
定義リスト（dl,dt,dd）を表のような見た目にする マークアップをしていると、定義リスト（dl,dt,dd）を表にしたいときってありますよね。 今回は定義リストを表のような見た目にし、見出し側dt […]
- 2020.01.11
- webメモ,
レスポンシブ対応時便利な背景画像サイズを変更する実装方法
LPでよく使う可変する背景画像の実装方法 端末サイズに合わせて背景画像を同じ比率で拡大縮小させていく実装方法をまとめました。 レスポンシブ対応のLPなどのメインビジュアル作成時に便利だと思います。 実 […]
- 2019.12.14
- webメモ,
Swiper.jsを使ったサムネイル画像付きのスライダーの実装方法
スライダーが簡単に実装できるSwiper.js 簡単にスライダーが実装できることで有名なSwiperですが、サムネイル画像付きで自分の思い描いていた動きを実装するのに少し苦労したので、忘れないようにこ […]
- 2019.12.11
- webメモ,
グラデーションをスマートに記述するmixin
グラデーションをCSSで実装する時って、各ブラウザに対応しようと思うとコードが長くなっちゃいますよね😖 いつも使うこのmixinは一行書くだけで横から縦からのグラデーションが簡単にかけちゃいます！ ボ […]
- 2019.11.16
- webメモ,
可変するヘッダ固定バナー（jsで高さを取得する方法）
スクロールしても、常に画面上に固定で表示されているヘッダメニューの実装はよくありますが、固定バナー（画像）の実装方法があまり紹介されていなかった（気がした、、、）のでここで自分メモ用に残しておきたいと […]
- 2019.09.12
- webメモ,
cssだけで作るリボン（枠から上に少し出たレイアウト）
枠から上に少し出たレイアウトのリボンって、プレゼント枠だったり注目してほしい時など結構使うことがあります。 毎回一からコードを書くのが面倒なので自分用のメモとしてまとめました。 このリボンはリボンの端 […]
- 2019.06.29
- webメモ,
実践でよく使う擬似クラスなどのセレクタまとめ（自分用メモ）
動的な実装を行う際は、HTMLの改修やパーツの使い回しが良く発生しますので、できる限りHTMLは統一させておきたいものです。 そんな時に擬似クラスはめちゃくちゃ使えますね！！ Web業界にすでに15年 […]
- 2019.05.31
- webメモ,
切り替えたタブの背景色が違うタブの切り替え（テンプレート）
タブの切り替えもデザインやマークアップをしていてよく遭遇しますよね。 今回は自分のメモ用として応用しやすいタブの切り替えテンプレートを記事にまとめておきたいと思います。 デモページはこちら DEMO […]
- 2019.04.12
HTTPからHTTPSに変更する手順（WordPressを使用するならさくらレンタルサーバー！）
先日重い腰を上げてこのブログもHTTPS化しました。 もっと早くにしようと思っていたのですが、仕事と子育ての合間に更新しているので、せっかく時間がとれれば記事を書く方を優先してしまっていました。。。。 […]
- 2019.02.02
- webメモ,
absoluteやz-indexも怖くない！背面にある要素を選択したい時に使えるpointer-events: none;
select要素デザイン時に事件は起こった！ select要素（プルダウン）のデザインを実装している時に、矢印アイコンを画像ではなくCSSのみで実装する場合の方が最近は多くなってきました。 今回私もi […]
- 2019.01.26
- webメモ,
トリガーより上に開くアコーディオンとcssのみで実装できる開閉時アイコンが切り替わるアコーディオン
トリガーより下に開閉する方法はネットで少し調べてみると出てきたのですが、トリガーより上に開く方法がなかなかでてこなかったのでこちらでもまとめておきたいと思います。 ついでによく使うわりに毎回ググってし […]
- 2018.12.22
- wordpress,
LION MEDIAを使ってやさしいサイトにする方法
かっこいいメディア系ブログテーマ「LION MEDIA」 このブログは前回もお話したことがありますが、今現在LION MEDIAを使用しています。 無料テーマとしてはすごく評判のいいテーマですね。 デ […]
- 2018.12.02
- webメモ,
Sass（SCSS）の&（アンパサンド）の使い方（自分用メモ）
ここしばらくデザイン系の仕事が多く、マークアップをメインに作業していませんでしたが、今回改めてSassを使用する機会がふえてきましたので、自分用のメモとしても&（アンパサンド）の使い方を中心に […]
- 2018.11.10
- webメモ,
Sublime TextでCsscombを導入する際に出たエラー
久しぶりの更新になりました。。。 子供の咳風邪がうつり咳がとまらなくなっておりました。。咳風邪おそろしいです！！ みなさんも喉、大切に。。。。。 市販の薬でなんとか治らないかと頑張っていましたが、どう […]