ムラゴン ホーム
ホームページのファーストビューで伝えるべきこととは？第一印象で失敗しないポイント
ホームページを見たときに、最初に表示される画面のことを「ファーストビュー」といいます。 ファーストビューは、ホームページの第一印象を決めるとても重要な部分です。 どれだけ中身が充実していても、最初の画面で「何のサイトかわからない」「自分に関係なさそう」と思われてしまうと、そのまま離脱されてしまう可能... 続きをみる
画面のムラゴンブログ
-
-
ドメインを取得後、サーバーと紐づける方法
ホームページを作ろうと思ってドメインを取得したものの、「次は何をすればいいの？」と迷う方はかなり多いです。 実はドメインを取得しただけでは、まだホームページは表示されません。 ドメインは「住所」、サーバーは「土地」のようなイメージです。住所だけ決めても土地がなければ家は建てられないように、ホームペー... 続きをみる
-
SwiftUIとは何か
SwiftUIとは、Appleが提供しているUI（ユーザーインターフェース）構築のためのフレームワークです。iPhoneやiPad、Macなどのアプリの見た目や操作部分を、効率的に作るために設計されています。 従来の開発手法と比べて、よりシンプルで直感的にUIを構築できるのが特徴です。 SwiftU... 続きをみる
-
「このサイトは古いバージョンのPHPを実行しています」と出たときにやるべきこと
WordPressを触っていると、「このサイトは古いバージョンのPHP（7.4.33）を実行しており、セキュリティアップデートを受け取れません」という警告が表示されることがあります。 結論から言うと、これは放置してはいけません。 理由はシンプルで、セキュリティリスクが一気に上がるからです。 ここでは... 続きをみる
-
-
ホームページのセキュリティで気をつけるべきこと
ホームページは「公開しているだけ」で終わりではありません。むしろ公開してからが本番です。セキュリティを軽視すると、改ざん・情報漏洩・SEO評価の低下など、事業に直結するリスクに繋がります。ここでは最低限押さえるべきポイントを整理します。 1. SSL（HTTPS）は必須 まず前提として、サイトは必ず... 続きをみる
-
PCとスマホで背景に入れる動画は別々で用意するべきか
Webサイトのヒーローセクションなどで背景動画を使うケースは増えています。そこでよく出てくる疑問が「PCとスマホで同じ動画を使うべきか、それとも別々に用意するべきか」という点です。 結論から言うと、多くの場合はPC用とスマホ用で動画を分けて用意するのが望ましいです。 なぜ動画を分ける必要があるのか ... 続きをみる
-
今主流のレスポンシブフォントサイズの書き方
Webサイト制作では、画面サイズに応じて文字サイズを調整する「レスポンシブフォントサイズ」が重要です。スマートフォン・タブレット・PCなど、さまざまな画面幅でも読みやすさを保つためです。 以前はメディアクエリを使って画面幅ごとにフォントサイズを変更する方法が主流でした。しかし現在は、CSSの cla... 続きをみる
-
Reactの contextmenu イベントでできること
Webアプリを作っていると、「右クリックしたときに何かしたい」と思う場面があります。 Reactでも、ブラウザ標準の右クリック（コンテキストメニュー）をフックして、独自の挙動を実装することができます。 この記事では、Reactの contextmenu イベントで何ができるのか を整理します。 co... 続きをみる
-
メディアクエリの基本的な書き方
Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。 レスポンシブデザインを実装する上で、避けて通れない基本要素になります。 この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。 メディアクエリとは何... 続きをみる
-
-
Jest（ジェスト）とは？
Jest（ジェスト）とは、Webアプリやシステムの動作を自動でテストするためのツールです。 特に React / Javascript / Typescript の開発でよく使われていて、「ちゃんと動くか？」を人が毎回手で確認するのではなく、テストコードを書いて一発で検証できるようにしてくれます。 ... 続きをみる
-
ホームページを作成するときはスマホ版から作成すべきか
ホームページを作成するときは、スマホ版から作成すべきか。 これはWeb制作に関わる人なら一度は悩むテーマだと思います。結論から言うと、多くの場合「スマホ版から作成する」考え方はとても合理的です。ただし、すべてのケースで絶対に正解というわけでもありません。この記事では、その理由と注意点を整理します。 ... 続きをみる
-
理性三態：規則を掬い取る選択
テレビを見ながら 頭の中でテレビが描く物語に浸っている そのテレビのスイッチを切ると 物語は消えて無くなる 頭の中は 急に真白になり 現実に引き戻される テレビに浸っていた頭も 現実に引き戻された頭も どちらも私である しかし この二つの私は 私にとってそれぞれ異なった存在である この異なる2つの存... 続きをみる
-
ショートアニメ 周っている
上手いこと動かないなあ。 画面と睨めっこ。 しかし、画面の中でオブジェクトが浮いているって不思議な事だ。 しかも、右から左へ繰り返しやってきては消えていき、またやってくる。 ああ、周ってんだな、と思った静寂な真夜中。 坊のYOUTUBEチャンネル オリジナルの朗読やビジュアルノベル、ショートアニメ、... 続きをみる
-
Webアプリとスマホアプリの違いとは？
「Webアプリとスマホアプリの違いがよくわからない」 この疑問は、ITに詳しくない人だけでなく、これからサービスを作ろうとしている人からもよく聞きます。 見た目は似ていても、両者は仕組みも役割も異なります。 この記事では、Webアプリとスマホアプリの違いを、技術的になりすぎず、実務や利用シーンを意識... 続きをみる
-
#
画面
-
デュアルモニターでノートPCでも３画面で複数通貨監視
-
スマホの画面を守る
-
ゲオNintendo Switch 2 本体画面に貼る液晶保護フィルムを5月29日より販売開始
-
モニターの限界をガッツリ解説！4K主流の今、未来の進化はどうなる？
-
Nintendo Switch 2用の保護フィルム比較「任天堂スイッチ２おすすめ保護フィルム一覧」
-
人のスマホを勝手に見る人
-
なんとか復旧（ーー；）～そして事の顛末～☆
-
これが最適解ですかね☆
-
左足を痛めました
-
【Windows11】画面全体の大きさを変える方法【小技】
-
画面遷移のヒストリーバック
-
画面サイズいっぱいのDialogFragmentを表示する
-
lineの画面
-
凹む〜からの〜気分スッキリ✌️
-
【Android】レイアウトXMLをJavaから制御する方法
-
-
Reactの「レンダリング」とは何か？
Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。 でも、 何をもって「レンダリングされた」と言うのか いつレンダリングが起きているのか ここが曖昧なまま進んでしまう人も多いです。 この記事では、Reactにおけるレンダリングの意味を、できるだけ噛み砕いて解説します。 一言で... 続きをみる
-
Vite（ヴィート）とは？
Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。 主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。 一言でいうと、 「開発中の表示がめちゃくちゃ速い環境を用意してくれる仕組み」 です。 初学者向けに一言で説明すると ... 続きをみる
-
max-widthとwidthの違いとは？
Web制作をしていると、必ずと言っていいほど出てくる width と max-width。 どちらも「横幅」を指定するプロパティですが、 実は使いどころと役割がまったく違います。 この記事では、 「結局どう違うの？」「どっちを使えばいいの？」 という疑問を、初心者にもわかるように解説します。 wid... 続きをみる
-
CSSの「inset: 0;」の意味とは？
CSSを書いていると、ときどき見かける inset: 0;。 一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。 この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのかをわかりやすく解説します。 insetとは？ inset は、要素の位置を... 続きをみる
-
Chakra UIとは
React向けのモダンなUIコンポーネントライブラリ。 一言でいうと、「デザインが苦手でも“それっぽい綺麗なUI”がすぐ作れる便利セット」。 1. Chakra UIが生まれた理由 ReactでUIを組むとき、ボタン・入力フォーム・モーダル…など全部を自前でデザインしようとすると、地味にしんどい。 ... 続きをみる
-
-
テレビ画面が、、！？
いきなりテレビ画面が、？！ どの局も同じ。 一体何？
-
レスポンシブのpxの基準とは
レスポンシブデザインとは、スマホ・タブレット・PCなど、画面サイズの異なるデバイスでも快適に閲覧できるようにレイアウトを自動で調整する仕組みのことです。 その際に基準となるのが「ブレークポイント」と呼ばれるpx（ピクセル）単位の区切りです。 一般的には、デバイスの画面幅によっていくつかの区分が設けら... 続きをみる
-
Reactで作れるもの
React はUI（ユーザーインターフェース）を構築するためのライブラリなので、 「画面が動的に変化する」「ユーザー操作が多い」ものに特に向いています。 具体的にどんなものが作れるか、代表例をいくつか紹介します。 1. Webアプリケーション SNS系アプリ 例：Twitter風の投稿・いいね・コメ... 続きをみる
-
Reactで出来ること
Reactは、Facebook（現Meta）が開発したJavascriptのライブラリで、現在は世界中で幅広く利用されています。WebアプリやWebサイトを効率的かつ柔軟に作るための仕組みが揃っており、モダンなフロントエンド開発に欠かせない存在です。ここでは、Reactで具体的にどのようなことができ... 続きをみる
-
世界一簡単 70歳からのスマホの使いこなし術
世界一簡単 70歳からのスマホの使いこなし術 スマホ活用アドバイザー 増田由紀 アスコム 自分は年金生活者であり、学校や企業に所属しているわけでもないので、スマホの使い方は独学で学習しています。親族や知人に使い方を聞くこともあります。スマホに関する研修等を受講するわけでもありません。独学で使い方を知... 続きをみる
-
-
ポップアップウィンドウとは？
ポップアップウィンドウとは、ウェブページを閲覧している際に、ユーザーの操作や特定の条件によって新しく表示される小さなウィンドウや画面のことを指します。通常のページ遷移とは異なり、同じタブ内ではなく別枠や重ねて表示されるため、ユーザーの注意を引きやすい特徴があります。 主な用途 お知らせ・キャンペーン... 続きをみる
-
パソコンの液晶画面にトラブル？横浜駅近くの修理店が解決します！
お客様のパソコンが突然、 液晶画面に黒い墨のようなものが出ている、 画面が割れてしまっている、液が漏れているなどの トラブルに遭遇したら、まずは冷静に対処することが大切です。 「液漏れの原因とは？」 液漏れとは、パソコンの液晶画面に黒い墨のようなものが出る状態のことを指します。 これは、液晶パネルの... 続きをみる
-
-
Samsung Galaxy Z Fold 3: 未来に向けた折りたたみ革命
サムスンは、革新的なデザインとテクノロジーの先駆者として、最新のスマートフォンである「ギャラクシー Z フォールド 3」を世界に紹介しました。このデバイスは、折りたたみ可能な画面と高度な機能を組み合わせ、未来のモバイルエクスペリエンスを提供しています。本記事では、ギャラクシー Z フォールド 3の注... 続きをみる
-
今日の(ではないが)
先日パソコンにこのような画面が現れた。 電話して下さいと、 何、何、何、？ さっぱりわからない が 携帯で電話番号が本当か調べてみた。 わからない〜 えい¡ 画面消そうとしたが 画面が消えない。😵 いつものヤケクソでわからない時は強制終了に 消えた😌 まだ安心は出来ない。 どうすべきか❓
-
エッセイ きれぎれ草 92 ＜ピカソ、ルオー＞
ピカソの絵は、けっして画面の奥には向かわない。表面にこだわり抜いた画家。いや、ピカソの絵には、表裏の区別がないと言って良いのであろう。 ○ ルオー、精神の分厚い奥行き、時に重い。
-
液晶交換【中古品 再利用】＆Windows7をWindows10に NEC VJ24LF-J PC-VJ24LFWZ1RZJ 分解修理
液晶が壊れたノートPCの修理です。 部品取り品(VK24LF-H)が入手できたので、 液晶の再利用＆移植を試みます。 ついでに、パームレスト（タッチパッドまわり） にダメージや汚れがありましたため、 再利用＆移植をしてみます。 左が修理品、右が部品取り品です。 それぞれの液晶とパームレストです。 修... 続きをみる
-
【Unity】画面説明
画面はこんな感じです。 いっぱいありますね。でも名前はあんまり覚える必要はありません。 上に、ProjectやInspectorなのかいてあるので。
-
書くな
消すつもりで書くなら 最初から書くな 見せたくないなら 最初から書くな この世は架空じゃないんだ その画面の向こう側に 心を持っている 生身の人間がいるんだ 忘れんな
-
#
React
-
Cursor 3.11 — 本線チャットを汚さず、脇道の質問と過去チャット検索
-
仕様駆動をやってみて分かったこと — docsを正本にした日から、実装中の「これでいいか」は誰の判断か
-
Colorism v2: 効率的な色彩学習アプリの進化
-
サーバーレスアプリケーションでreactを動かす方法
-
2026年の主役【Agentic AI】自律型AIが切り拓く未来と8つの最前線！
-
Reactの歴史と設計思想の変遷：UI構築を再定義した10年
-
Reactとそのフレームワーク周辺の最新動向 2025年6月版
-
[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)
-
[Next.js] Supabase カレンダーメモアプリ チュートリアル (前編)
-
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
-
[React] 学習記録アプリ with Firebase、Zennで書籍化してみました
-
Next.js 入門｜ Props を「分割代入」で書く
-
HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
-
Next.js 入門｜ Props でコンポーネントに値を渡す
-
Google Cloud Shell が素晴らしすぎる
-
-
#
web制作
-
【告知】誰得サイト「バグった時計」を公開します
-
WEB制作の株式会社デモが破産手続開始決定
-
インフラ設計におけるオリジンってどういうもの？
-
AFFINGER7は初心者には難しい？実際に使ってわかった本当の難易度を解説【2026年版】
-
自分で書いた記事に悶絶ひとりツッコミ、恥ずか死ぬ～（笑）
-
HSTSの設定ってどれくらい重要？
-
【体験談】病棟看護師時代 vs フリーランス｜朝の気持ちがまるで違った話
-
SWELLはブログだけじゃない！企業サイト（コーポレートサイト）制作にもおすすめ！
-
【クリニック向け】国内WordPressテーマ11選｜安心感と集患につながるデザイン
-
企業サイトにおすすめのTCD WordPressテーマ４選【2025年版】
-
看護師でもWeb制作の副業はできる？忙しい中で感じたリアルな話【体験談】
-
看護師からWeb業界へ｜実際に働いて感じたギャップ7つ【体験談】
-
WEB制作の副業って何するの？仕事内容を看護師目線でリアルに解説
-
初心者的ノーコードWEBページ作成やってみる③(・ω・)WordPress
-
初心者的ノーコードWEBページ作成やってみる②(・ω・)WordPress
-
