- 2023.06.20
- Adobe,
Photoshop(Beta)でAI の技術を利用した生成塗りつぶしを使用してみた
トリミングでもう悩まない！Beta版Photohopの塗りつぶし 最近はデザイナーの方以外でも、canvaなどを使って画像を作成する方が増えてきていますよね。 そんな時に困るのが使用する画像の比率が合 […]
Web関連
1/2ページ
- 2023.05.31
- webメモ,
css animation（keyframes）でお気に入りボタン作ってみた
お気に入りボタンをクリックした時動きをだしたい場合におすすめなkeyframes お気に入りやクリップ機能で、ボタンをクリックした時に動きを出したい時ってありますよね。 gif画像などを作成するのも一 […]
- 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タグです！ 簡単に動画をサイトに表示させることができ […]
iMovieの基本的な編集方法と動画の容量を軽くして書き出す方法
かんたんに動画が編集できるiMovie 仕事やプライベートでも動画を編集する機会が増えてきました。 Webデザイナーでも、サイト内で使用する為支給された動画を簡単に編集したり、容量を軽くすることが増え […]
- 2020.10.17
- webメモ,
汎用性の高いスクロールしてもついてくるヘッダーとハンバーガーメニューのテンプレート
スマホサイトで便利なハンバーガーメニュー 今回は以下の要件を満たしたハンバーガーメニューのついたサイトベースを作成しました。 スクロールしてもヘッダーがついてくる スクロール途中でもサイドメニューが開 […]
- 2020.09.13
- webメモ,
複数の変数を代入してさまざまな範囲の高さを取得する方法
可変する複数の高さを取得して合わせた高さを使いたい 可変するバナー画像の高さを取得するというのを以前まとめましたが、今回は可変する複数の高さを取得して、それぞれの高さを合わせる方法をまとめました。 以 […]
- 2020.09.12
- webメモ,
特定の要素までスクロールしたら表示される固定ボタン
特定の要素を過ぎたら表示されるボタン 特定の要素までスクロールしたら、ページ下部に固定されたボタンが表示される実装方法をまとめました。 スマホでもパソコンでも使えるように、画面トップからの距離ではなく […]
- 2020.08.28
- iPad,
iPad Air（ 第3世代）でタッチパッド付きキーボードを使ってみた感想
長男のZ会入会を検討したのがきっかけでiPad Airを購入 家庭学習教材として、未就学児の頃から長男はポピーを愛用していました。 学校と同じ教科書に沿った教材が使われているので、学校の予習復習にぴっ […]
- 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を使用したオーバー […]
BluetoothテザリングでiPhoneからMacbookでネットにアクセスしてみた
コロナウイルスで一気に浸透したテレワーク コロナウイルスがきっかけで、テレワークをしている方が一気に増えた気がします。 これから自宅はもちろん、社外で仕事をする方もどんどん増えていきそうですね。 今回 […]
- 2020.03.25
- webメモ,
ページ内リンクのスムーズスクロール（ページトップ）
LPなどでよく使用するページ内リンクのスムーズスクロールの実装方法をまとめました。 メニューをそれぞれのアンカーリンクへスムーズスクロールさせ、ページ下部にあるページトップへテキストリンクは画面上部へ […]
- 2020.03.25
- webメモ,
ページ上部で固定されるメニュー
今回は、固定したいエリアがページ上部に初めからある場合ではなく途中にあり、スクロース後ページ上部に到達した段階で固定される実装方法をまとめました。 上にメインビジュアルのあるメニューや、サブメニューを […]
子供のアカウントで利用できるツールを制限してくれるペアレンタルコントロール（Mac）
Macbookに子供用のアカウントを作成 コロナウイルスで学校が休校になり、子供がパソコンを使う時間が増えてきました。 初めは私のアカウントでパソコンを使わせていたんですが、デスクトップにタイピングし […]
ワーママの情報収集にはfeedlyがおすすめ
Feedlyってなに？ 育児や家事、仕事などタスクてんこもりの毎日の中で、皆さんはどのような方法で情報収集を行なっていますか？ 最近はSNSのタグ検索などで情報を収集している方も多いと思います。 私も […]
- 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.31
- 便利アイテム,
Google Nest Miniを我が家のお年寄りから子供まで使ってみた感想
無料でGoogle Nest Miniをゲット！！ グーグルが先日から2019年12月4日時点でYouTube Premium、YouTube Music Premium、Google Play Mu […]
- 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.30
- 便利サービス,
ワーママがおすすめするサブスクリプション（定額制）サービス
最近ネットやアプリではサブスクリプション（定額制）サービスが盛んですよね。 サブスクリプションとは提供するサービスや商品を利用する期間に対して対価を支払うサービスのことです。 サブスクリプションという […]