毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
【解決】svgの色が変わらない！CSSorSCSSで変更したいのに！ | 武骨日記
毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順
こんにちは！ 現在作成している自主制作サイトで イラレで自作したロゴのSVGファイルを外部ファイル形式で読み込み、 色やサイズを変える手順についてまとめたいと思います。 実現にあたりGoogle検索で色々な方の記事を参考にさせて頂きました。 参考記事を書いて下さった皆様、勝手にですがお礼を申し上げます。 ありがとうございました<(_ _)> また、この方法では実装後の表示確認をローカル環境でしようとすると （ローカル環境での確認：サーバーを通さず、自分のPCでブラウザで確認する事とさせてください） ブラウザのセキュリティポリシーに引っかかり SVGの画像が表示されずに困惑する方がいらっしゃるかも？？と思ったので、 簡単にですがGoogleChromeでのローカルでの確認手順も書いておこうと思います。 自作サイトでのSVG使用箇所 自作サイトBakeryColne(ベーカリーコルネ)ではお店
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
HTMLのdialog要素でDialogComponentを作る（React）
2022年3月から主要ブラウザ(Chrome, Edge, Firefox, Safari)で dialog要素が利用できるようになったそうなのでそれを使ってDialogすなわりModalのコンポーネントを作ったらどんな感じになるかを試してみました.説明少なめですが記事にします. また,今回はできるだけ最小限のコードで作成することを意識しています. dialog要素ってなに？ eventで表示/非表示を切り替えることができる backdropという疑似要素があり,すでにOverlayが作成されている（これ結構嬉しい） メリットはこの2点かなと思います. わかりやすく作ってみる Reactで最小限に作るとこんな感じですね. const Sample = () => { const dialogRef = useRef<HTMLDialogElement>(null); const openD
これからはXのリンクカードを小さいやつにするのが良さそう
Xでの大きいタイプのリンクカード（summary_large_image）からタイトルが消えたことで、さっそく悪用する人が出てきたようです。 写真を4枚並べた投稿を装いスパムサイトに誘導するポスト、X（旧Twitter）で増殖中 - やじうまWatch summaryならこれまで通りタイトルが表示される 一方で小さいタイプのリンクカード（summary）の表示のされ方は変更されていません。サムネイルは小さな正方形ですが、Webページのタイトルはこれまで通り表示されます。 今後は基本summaryがよさそう 情報のほとんどが画像となってしまったsummary_large_imageは、新規サイトにおいてはよっぽどの理由がない限り選ばない方が良いと思います。画像の中にタイトルを入れたとしても、リンクごとに画像のレイアウトやデザインがバラバラで見る人の負担は大きくなります。悪用が増えれば、ますま
HTMLのdialogタグでダイアログ（モーダル）を実装する方法｜BLACKFLAG
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが） IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
HTMLにsearch要素が追加されたぞ！
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the default HTML output of a Gutenberg block in WordPress?