ムラゴン ホーム
マスク画像とは？Web制作で使う意味と仕組みをわかりやすく解説
Web制作をしていると、 「マスク画像」 という言葉を見かけることがあります。 最近、画像の一部分だけ色を変更するような機能を作る際にマスク画像を使う機会があり、仕組みを調べてみました。 最初は少し分かりにくかったのですが、考え方自体はそれほど難しくありません。 今回は、マスク画像とは何なのか、どん... 続きをみる
指定のムラゴンブログ
-
-
なんだかな・・・？？？と思うこと
宅配業者 ここへくる宅配業者は決まっている。 ＊ヤ⭕️ト運輸 ＊佐⭕️急便 ＊日本⭕️便 私は、日にち時間指定できる物は指定します。 それは、自分が確実に受け取れる日にちと時間だからです。 日にち時間を確実に守る業者は、ヤ⭕️ト運輸。 たまに時間より遅れることもありますが、日にち指定している時は必ず... 続きをみる
-
padding-inlineとpadding-blockとは？
CSSで余白を指定するとき、多くの人が最初に覚えるのは padding-top や padding-left、そして padding: 20px; などの書き方だと思います。 しかし最近では、 padding-inline padding-block という書き方を使う場面が増えてきています。 「普... 続きをみる
-
heightに絶対値（px）をつけるべきか？
Web制作をしていると、height: 300px; のように高さをピクセルで固定する場面があります。 しかし結論から言うと、基本的に高さを絶対値で固定するのはおすすめされません。 なぜなら、Webのレイアウトは 内容によって高さが変わる前提で作るのが基本だからです。 高さを固定すると起きる問題 1... 続きをみる
-
CSSの「gap」とは？初心者でも理解できる使い方
CSSでレイアウトを作っていると、要素同士の余白をどう作るかで悩むことがあります。 そのときによく使われるのが gap というプロパティです。 この記事では、CSSの gapとは何か、そして marginとの違い、実際の使い方まで整理して解説します。 gapとは gapは、要素と要素の間の余白をまと... 続きをみる
-
Figmaの「Demibold（デミボールド）」スタイルとは？
Figmaでフォントを選択していると、スタイルの中に「Demibold」という表記が出てくることがあります。 これはフォントの太さ（ウェイト）を表すスタイル名の一つです。 Demiboldの意味 Demiboldは、日本語では「やや太字」という意味です。 通常のフォントは、太さがいくつかの段階に分か... 続きをみる
-
今主流のレスポンシブフォントサイズの書き方
Webサイト制作では、画面サイズに応じて文字サイズを調整する「レスポンシブフォントサイズ」が重要です。スマートフォン・タブレット・PCなど、さまざまな画面幅でも読みやすさを保つためです。 以前はメディアクエリを使って画面幅ごとにフォントサイズを変更する方法が主流でした。しかし現在は、CSSの cla... 続きをみる
-
ホームページ制作で「スマホの時だけ絵文字になる」原因と対策
ホームページを制作していると、パソコンでは普通の記号なのに、スマホで見ると絵文字に変わってしまうことがあります。例えば矢印や記号などが、スマートフォンではカラフルな絵文字として表示されるケースです。これはバグではなく、スマートフォンのフォント仕様によって起きる現象です。仕組みを理解しておかないと、意... 続きをみる
-
フォントサイズ指定の「rem」と「%」の関係
WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント） です。 どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。 この記事では remと%の関係 を整理して解説します。... 続きをみる
-
メディアクエリの基本的な書き方
Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。 レスポンシブデザインを実装する上で、避けて通れない基本要素になります。 この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。 メディアクエリとは何... 続きをみる
-
-
max-widthとwidthの違いとは？
Web制作をしていると、必ずと言っていいほど出てくる width と max-width。 どちらも「横幅」を指定するプロパティですが、 実は使いどころと役割がまったく違います。 この記事では、 「結局どう違うの？」「どっちを使えばいいの？」 という疑問を、初心者にもわかるように解説します。 wid... 続きをみる
-
CSSの「inset: 0;」の意味とは？
CSSを書いていると、ときどき見かける inset: 0;。 一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。 この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのかをわかりやすく解説します。 insetとは？ inset は、要素の位置を... 続きをみる
-
三菱UFJ グローバルポイントWallet
新規ダウンロードして、指定カードから1000円以上チャージで、 500円分貰えます。 昨日やってみたら今日1500円になってました。
-
生成AI学習ログ#0-4 スタイル指定の影響を観察する
みなさんこんにちは、九十九です。 前回の記事では、「猫」というテーマを使って、プロンプトの長さ（粒度）が生成結果にどう影響するかを観察しました。 短い言葉と長い言葉、それぞれがAIの解釈にどんな違いを生むのかを比べることで、プロンプト設計の基本的な考え方を整理しました。 今回はその延長として、「スタ... 続きをみる
-
-
#
指定
-
#
整理収納
-
整理収納アドバイザー2級認定講座
-
湖に浮かぶ静けさを称えたオーストリアの城 オルト城
-
中古平屋のキッチン tower引き出し中ラックで収納を増やす。
-
【サンサンスポンジ】「ソフトタイプ」と「ノーマルタイプ」どっちがいい？比較レビュー
-
便利だから捨てられない！増えすぎた紙袋を整理しました
-
【洗面所の片付け】在庫管理が節約になる！
-
娘が、お花を持って帰ってきた。
-
何人家族？何足持ってる？
-
【整理】掃除ブラシの選び方
-
薬の収納。ピンセットの住所を作った話。
-
【収納例】無印良品「パイン材ユニットシェルフ」をおもちゃ棚にしたら快適すぎた話。
-
「息子の部屋を作りたい！」から7ヶ月後、どうなったか。
-
整理収納が好き、のはずだった
-
すだちを収穫した話。今あるものを存分に活かす。
-
整理収納が好き、整理収納アドバイザーの資格思ったより簡単に取れるかも？そして整理収納がお仕事になったら毎日楽しいかも
-
- # ブログ毎日更新してます
