-
- 登録ID
- 2118361
-
- タイトル
潮干狩り情報局
-
- カテゴリ
- 磯遊び・ビーチコーミング (1位/5人中)
-
- 紹介文
- 潮干狩りが大好きで、全国の潮干狩りスポットの情報や、潮干狩りの知識をまとめるサイトです。
-
3
記事一覧
再読込
-
- CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました BlackFlag
- CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。 画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。 そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を…
BlackFlag - CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました
-
- 直感的なマウス操作で任意のサイズのダミー画像を生成できる「Image Elf」 BlackFlag
- Webサイトを構築する際に、ページ上に掲載する写真や画像素材の仮としてダミー画像を使ってHTMLコーディングをする場面はよくあります。 ダミー画像もレイアウトによってそれぞれ個別のサイズが必要になったり、複数のものを作成するのが面倒なこともあったりしますが、そんなダミー画像を直感…
BlackFlag - 直感的なマウス操作で任意のサイズのダミー画像を生成できる「Image Elf」
-
- グラフやチャートや表やマップなどのデータ視覚化のデザインパターンまとめ「Data Viz Project」 BlackFlag
- グラフやチャート図、または表組みやマップなど、データ情報を視覚的にわかりやすく可視化するデータビジュアライゼーションは、見る人に情報を伝えやすくするために大切です。 そんなデータ情報を可視化するためのデザインパターンをまとめた「Data Viz Project」がとても魅力的だっ…
BlackFlag - グラフやチャートや表やマップなどのデータ視覚化のデザインパターンまとめ「Data Viz Project」
-
- CSSのみで画面の幅と高さのウィンドウサイズを取得する方法 BlackFlag
- 画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。 CSSカスタムプロパティ「@property」と「:root」を使ってウィンドウサイズの幅と高さ…
BlackFlag - CSSのみで画面の幅と高さのウィンドウサイズを取得する方法
-
- CSSのtext-wrapとword-breakとoverflow-wrapでの改行位置の制御 BlackFlag
- Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。 レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが…
BlackFlag - CSSのtext-wrapとword-breakとoverflow-wrapでの改行位置の制御
-
- 入力文字数によってテキストエリアを高さを可変できるCSSプロパティ「field-sizing: content;」 BlackFlag
- Webページ上にあるテキストエリアに文字を入力する場合、デフォルトだと決められた高さ以上のテキストが入ると、スクロールバーが表示され、その後テキスト全体を確認するにはスクロール制御になります。 テキストエリアの高さが短かったりすると、このスクロール制御が使いづらくなったりしますが…
BlackFlag - 入力文字数によってテキストエリアを高さを可変できるCSSプロパティ「field-sizing: content;」
-
- AIを使った様々なツールやサービスを紹介するまとめサイト「AIナビ」 BlackFlag
- ChatGPT、Gemini、Apple Intelligenceなどなど、AIツールの進化がめまぐるしいですが、世界中のAIツール・サービスを収集し、機能や使い方と合わせて紹介してくれているAIツールのまとめサイト「AIナビ」がとても便利だったのでご紹介。 AIナビ – AIツ…
BlackFlag - AIを使った様々なツールやサービスを紹介するまとめサイト「AIナビ」
-
- CSSのグリッドレイアウトを直感的な操作で作成できるジェネレーター「CSS Grid Generator」 BlackFlag
- レイアウト設計にとても便利になるCSS Grid（CSSグリッドレイアウト）。 モダンブラウザが対応して今後活用する機会が増えると思いますが、簡単な操作で希望するレイアウトのgridプロパティを作成してくれるCSSグリッドジェネレーター「CSS Grid Generator」がと…
BlackFlag - CSSのグリッドレイアウトを直感的な操作で作成できるジェネレーター「CSS Grid Generator」
-
- :has()を使ってCSSだけで同意チェックボタンを実装する方法 BlackFlag
- CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報…
BlackFlag - :has()を使ってCSSだけで同意チェックボタンを実装する方法
-
- 様々なサービスロゴをSVG形式でダウンロードできる「Svgl」 BlackFlag
- SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos –…
BlackFlag - 様々なサービスロゴをSVG形式でダウンロードできる「Svgl」
-
- CSSのコピペで吹き出し（ツールチップ）を簡単に実装できる「CSS Generators: Tooltips & Speech Bubbles」 BlackFlag
- これまでもボタンやローディングといったパーツをHTMLやCSSのコピペで簡単に実装できるギャラリーサイトは紹介してきましたが、吹き出しやツールチップに特化したまとめ「CSS Generators: Tooltips & Speech Bubbles」が覚えておくと活用できそうだっ…
BlackFlag - CSSのコピペで吹き出し（ツールチップ）を簡単に実装できる「CSS Generators: Tooltips & Speech Bubbles」
-
- HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法 BlackFlag
- GoogleマップやYouTubeの埋め込みなど、外部サービスをiframeで読み込んでいる場合、脆弱性診断でそれらが引っ掛かることがあります。 各サービスからコピーできる埋め込みソースでは脆弱性の対策ができてないことが多く、セキュリティ対策としてsandbox属性を追記する必要…
BlackFlag - HTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法
-
- 様々なボタンデザインをHTMLとCSSのコピペで簡単に実装できる「Buttons.cool」 BlackFlag
- ボタンの実装サンプルを提供しているサイトはいろいろありますが、CodePenで公開されているクオリティの高いボタンを収集しているボタンコレクションサイト「Buttons.cool」が活用できそうだったのでメモ書きとして紹介します。 Buttons.cool – The coole…
BlackFlag - 様々なボタンデザインをHTMLとCSSのコピペで簡単に実装できる「Buttons.cool」
-
- CSSのコピペでローディングアニメーションを簡単に実装できる「CSS Loaders」 BlackFlag
- Webサイトにローダーを組み込む際に、ローディングアニメーションのサンプルを提供しているサイトはいろいろありますが、500種類以上のローディングアニメーションをCSSをコピペするだけで簡単に実装することができる「CSS Loaders」が便利過ぎたのでメモ書きとして紹介します。 …
BlackFlag - CSSのコピペでローディングアニメーションを簡単に実装できる「CSS Loaders」
-
- HTMLのdialogタグでダイアログ（モーダル）を実装する方法 BlackFlag
- Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示に…
BlackFlag - HTMLのdialogタグでダイアログ（モーダル）を実装する方法
-
- iframeの子ページが更新するたびに処理を実行させる方法（クロスドメイン対応） BlackFlag
- あまり使う機会が多くはないiframeですが、YouTubeやGoogleフォームなど外部サービスをページに埋め込む際にいまだに使われることがあります。 外部サービスふくめてiframeを組み込む際に、親ページから子ページの操作または逆のパターンを操作が必要になる場面はよくあるの…
BlackFlag - iframeの子ページが更新するたびに処理を実行させる方法（クロスドメイン対応）
-
- CSSで三角形などの図形をclip-pathで作る方法 BlackFlag
- CSSで三角形を作る際、これまでは主に「border」プロパティを使って作成していましたが、モダンブラウザで活用できるようになった「clip-path」プロパティを使うと三角形や多角形などの図形がわりと簡単に作成することができます。 今後はCSSで三角形などの図形を作成する際に「…
BlackFlag - CSSで三角形などの図形をclip-pathで作る方法
-
- デザインスキル不要でロゴ作成が可能な「Canvaロゴメーカー」 BlackFlag
- 先日、「手軽にオリジナルデザインのロゴが作成できるWixロゴメーカー」と題してWix.comのロゴメーカーツールを紹介しましたが、同じようにデザインなどが得意でない人でも簡単にロゴを作成することができるCanvaのロゴメーカーも便利だったのでご紹介してみます。 ロゴメーカーCan…
BlackFlag - デザインスキル不要でロゴ作成が可能な「Canvaロゴメーカー」
-
- 手軽で簡単にオリジナルデザインのロゴが作成できるWix「ロゴメーカー」 BlackFlag
- Webサイト制作においてノーコードツールとして進化を続けている「Wix.com」。 Webサイトの作成ツールとは別で提供している、Webサイトを作る上でも重要になるロゴを簡単に作成することができるロゴメーカーツールがあります。 デザインのスキルが無くても手順に沿って進めるだけで手…
BlackFlag - 手軽で簡単にオリジナルデザインのロゴが作成できるWix「ロゴメーカー」
-
- CSSのmix-blend-modeで背景色と文字色を反転させる方法 BlackFlag
- 画像の前面に配置するテキストを読みやすくしたり、背景色によって文字色を変えたりと、重なり合う要素の見え方をさまざまな表現方法で調整できるCSSの「mix-blend-mode」プロパティ。 Photoshopで言う、2枚のレイヤーを重ねた際にどのように合成させるかを設定するブレン…
BlackFlag - CSSのmix-blend-modeで背景色と文字色を反転させる方法
-
- HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性 BlackFlag
- ブラウザからiPhone（iOS）やAndroidなどスマートフォンやタブレットのカメラを起動するにはJavaScriptであれこれ実装していましたが、HTMLだけで簡単にカメラを起動させることができるcapture属性という便利なものがあったのでメモ用として紹介してみます。 c…
BlackFlag - HTMLだけでiPhoneなどスマホのカメラを起動できるcapture属性
-
- Chromeで縮小表示した画像のぼやけをCSSで解消する方法 BlackFlag
- レスポンシブ対応で大きなサイズで書き出した画像をCSSなどで縮小させてWebページ上に表示させた際に、Google Chromeで表示がぼやけることがあります。 ぼやけてしまった場合は画像に対して「-webkit-backface-visibility: hidden;」を指定す…
BlackFlag - Chromeで縮小表示した画像のぼやけをCSSで解消する方法
-
- CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法 BlackFlag
- ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整が…
BlackFlag - CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法
-
- サイトパフォーマンスやエディタ機能が進化した最新の「Wix.com」 BlackFlag
- 当ブログでも何度か紹介させてもらっている簡単にホームページやブログ、ECショップを開設できる「Wix.com」ですが、以前記事にしたときよりエディタ機能やデザイン機能の進化やサイトパフォーマンスやセキュリティ面でも向上していたので、最新の「Wix.com」のホームページ作成機能に…
BlackFlag - サイトパフォーマンスやエディタ機能が進化した最新の「Wix.com」
-
- Three.js（WebGL）3Dアニメーションの背景を作成できる「Vanta.js」 BlackFlag
- Webサイト上でも3Dを使った表現が最近とても増えてきている中、Webページの背景として設置する3Dアニメーションを簡単に作成できる「Vanta.js」が便利だったので、自分用のメモ書きとして紹介してみます。 Vanta.js – Animated 3D Backgrounds …
BlackFlag - Three.js（WebGL）3Dアニメーションの背景を作成できる「Vanta.js」
-
- CSSのアニメーションを停止（無効）する方法 BlackFlag
- 先日「CSSでhoverアニメーションの実行をPCのみに制御する」のタイトルでhoverアニメーションをスマホのみで実行させる方法を紹介しましたが、PCレイアウトではアニメーションを実行させて、CSSメディアクエリーでSPレイアウトになった際にアニメーションを無効にする、という制…
BlackFlag - CSSのアニメーションを停止（無効）する方法
-
- CSSでhoverアニメーションの実行をPCのみに制御する BlackFlag
- iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、Jav…
BlackFlag - CSSでhoverアニメーションの実行をPCのみに制御する
-
- 無料で商用利用可能なフリーアイコン素材サイト10選＋αまとめ BlackFlag
- 先日、「無料で商用利用可能な写真＆動画フリー素材サイト10選まとめ」として無料で使える写真や動画をフリー素材サイトを紹介しましたが、今回はアイコンについて、会員登録せずにダウンロードができるフリーアイコン素材サイトでよく利用させてもらっているものを自分用メモとしてまとめてみました…
BlackFlag - 無料で商用利用可能なフリーアイコン素材サイト10選＋αまとめ
-
- JavaScriptのif文を省略したショートハンドの書き方いろいろ BlackFlag
- CSSのプロパティがまとめられるようにJavaScriptにも処理方法を省略して書くことができるショートハンドといわれる短縮記法があります。 ショートハンドを使うことで複数行にわたる処理を一行で記述することができたりメリットがいろいろありますが、ここではそんなJavaScript…
BlackFlag - JavaScriptのif文を省略したショートハンドの書き方いろいろ
-
- 無料で商用利用可能な写真＆動画フリー素材サイト10選まとめ BlackFlag
- 最近では無料で使える写真や動画でも、とてもクオリティの高いものをフリー素材として提供しているサイトがたくさんあります。 そんな中でも会員登録が不要でダウンロードができるフリー素材サイトでよく利用させてもらっているものを自分用メモとしてまとめてみました。 写真や動画が無料でダウンロ…
BlackFlag - 無料で商用利用可能な写真＆動画フリー素材サイト10選まとめ