Next.jsにおけるSVGファイルの表示方法を考える
はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackground-imageにパスを設定して読み込ませる。 HTML内でSVGをインラインコードで埋め込む。 ※ 細かく話すとSVG以外の拡張子の画像でもインライン化できたり、CSSでもSVGをインラインで読み込ますことが可能ですが、今回は割愛させてください🙏 1と2の方法だと、他の画像ファイル同様、簡単に読み込ませることができますが、SVG内のスタイルをHTMLもしくはCSSで変更できません・・・ 3の方法だと、HTMLやCSS、JavaScriptによるスタ
文章校正を行うためのtextlint入門 - ICS MEDIA
ICS MEDIAでは読みやすい文章作りの取り組みとして、自社で公開しているVS Code拡張機能の「テキスト校正くん」を使用して文章校正を行っています。スタッフの校正ルールを統一して、一定の品質と読みやすさを確保することを心がけています。 「テキスト校正くん」は、文章校正エンジンにtextlintというNode.jsのパッケージを使用しています。textlintは設定した校正ルールにもとづいて文章校正を行えるので、プロジェクトに適切なルールを設定して文章校正ができます。以下の記事で、textlintの活用事例が紹介されています。企業がtextlintを導入し、文章品質を高めるワークフローとして活用されていることがうかがえます。 『textlintを使っている企業の事例・ルールをまとめてみた - Zenn』 『よりよい文書を書くための校正ツール「textlint」のSmartHR用ルールプ
昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う
「Conformityを利用する事で簡易に継続的なセキュリティコンプライアンス対応状況の確認ができる！」を登壇しました。 | DevelopersIO
「Conformityを利用する事で簡易に継続的なセキュリティコンプライアンス対応状況の確認ができる！」を登壇しました。 こんにちは、コンサル部＠大阪オフィスのTodaです。 先日「AWS コンサルティングパートナーがお伝えする最先端のクラウドセキュリティ対策–S3のファイルは安全ですか？AWSの設定は安全ですか？」で Cloud One Conformityの内容について登壇をいたしました。 登壇内容についてご紹介したいと思います。 登壇資料 設定管理の重要性 AWSやAzureなどクラウドサービスではインフラストラクチャの展開、設定が簡単におこなえるため設定時には注意を払う必要がございます。 ただ、人による操作は100％ミスをなくすことは難しいと考えておりますのでシステムによる設定の監視と可視化をおこなう、クラウドセキュリティポスチャマネージメント(CSPM)のソリューションがサードパ
【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
こんにちは。AWS事業本部のKyoです。 簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の１つに上がってきます。 Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ？」そんなイメージをお持ちの方も多いのではないでしょうか。 今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。 また、本ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。 具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。 Amplify is 何？ まず、言葉を整理しましょう。
SVG画像のHTMLでの使い方 | バシャログ。
こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。 特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。 VS Code: You don't need that extension by Rob O'Leary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タグの自動名前変更と終了タグ補完 2. 設定の同期 3. モジュールの自動インポート 4. HTMLとCSSのスニペット管理 5. ダミーテキスト 6. 末尾のスペースを自動的に削除 終わりに はじめに 私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の
オリジンを S3 とした CloudFront に対して、存在しないオブジェクトへアクセスした際の HTTP ステータスコードが 403 Forbidden になったときの対処方法 | DevelopersIO
困っていた内容 オリジンを S3 として CloudFront を使用している。 存在しないオブジェクトにアクセスすると HTTP ステータスコード 403 Forbidden が返ってきてしまう。 これを、HTTP ステータスコード 404 Not Found を返すようにしたい。 どう対応すればいいの？ オリジンとして設定している S3 のバケットポリシーに、s3:ListBucket アクションを許可する設定を追加します。 また、Resource 句にバケットのルートを追加します。 設定前 { "Version": "2008-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": "1", "Effect": "Allow", "Principal": { "AWS": "arn:aws:
imgタグで画像が読み取れなかったときになにも表示しないようにしたい - Qiita
読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。 やり方はこんな感じ。 <img src="https://example.com/noimage.png" alt onerror="this.onerror = null; this.src='';" /> ポイントは以下の2点 altを空文字で設定 onerrorでsrcを空にして、onerrorをnullにする 1. 「altを空文字で設定」について 画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。 なので、alt属性に空文字を指定しておくことで、 「画像が表示されなかった場合に、代わりに空文字を表示する」ようにしている。 2. 「onerrorでsrcを空にして」について onerror属性を設定しておくと
短時間で動画共有サイト構築 : Rappazubon
2014年01月08日13:19 カテゴリインターネットパソコン 短時間で動画共有サイト構築 ある小さな企業でこんなご相談 ファイルサーバーやNASに動画が大量にあり容量を圧迫している。 フォーマットがばらばらで環境によっては再生できないPCもある。 Youtubeなど外部にアップロードするにもセキュリティ面やトラフィックの問題がある。 なら自社にYoutubeみたいなシステムを作ればいいです。 OSSで代表的なのがPHPMotionとClipBucketというソフトらしい。 どっちも似たようなものらしいのですがClipBucketの方が進化が早い?らしいのでこちらを導入してみることにしました。 導入手順を軽くググってみたところ PHP FFMPEG FLVtool2 MP4Bo PHPShield Apache MySQL のインストールと設定が必要でかなりめんどくさそう・・・ ここは簡
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
