業務効率化【色変更・プレビュー機能付き】SVGタグをBase64変換してCSSのbackground-imageプロパティ用に変換するツール【Photoshop,Illustrator】
SVGタグを入力: 変換 CSS background-image: SVGプレビュー: 色を選択: ※fill値が無いなど色変更できない場合もあります※色を選択するとbackground-imageプロパティのコードも変わります #con...
CSS
業務効率化
業界NEWSGoogle Chrome 118に追加されたCSSルール「@scope」の基礎知識と使い方
CSSの新機能として実装された「@scope」ルールについてまとめました。デザイナー、コーダー、フロントエンドエンジニアの方は要チェックです。※Google Chrome 118安定版リリース時の記事です @scopeとは？ @scopeは...
JavaScript【初心者向け】JavaScriptでモーダルウィンドウの作成方法と注意事項、サンプルコード
JavaScriptで書ける基本中の基本のギミックにモーダルウィンドウという効果があります。画像をクリックすると全画面で黒背景に大きな画像が表示され、視認性をよくするためのあれです。 HTMLコーダーにはモーダル、と聞くとアレルギー反応を起...
react-native【CSS 疑似要素】before, afterのcontentプロパティ内で文章を改行する方法
やむを得ずHTML内の文章をCSSで入れ込むことが稀にあります。その方法こそ「content: "～"」です。これはおなじみなので特に説明の必要もないかと思います。 しかし、このcontent内の文章に改行や空白を入れたいときは少しトリッキ...
JavaScriptPinterest風のグリッドレイアウトをCSSのみで実装？乗り越えられない壁、代替策はないのか？Pinterstレイアウトを考察
Webに携わっている方は必ず一度は「Pintarestっぽく出来ませんか？」的なことを言われると思います。僕個人としてはPintarestのようなグリッドレイアウトはあまり好みではありません、なんせ「めんどくさい！」から。 Pintares...
JavaScriptNスタ（ニュース番組）風のYoutubeテロップをHTML+CSSで作ってみた
毎日Nスタ（TBS）を見ていて、リスペクトを込めてNスタ風Youtubeにしてみました。HTMLとCSSとYTPlayer.jsで作成しています。 テロップ部分は画像無しでCSSで調整しています。だいぶNスタ風になったので良かった。 You...