ムラゴン ホーム
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アプリとスマホアプリの違いを、技術的になりすぎず、実務や利用シーンを意識... 続きをみる
-
Reactの「レンダリング」とは何か？
Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。 でも、 何をもって「レンダリングされた」と言うのか いつレンダリングが起きているのか ここが曖昧なまま進んでしまう人も多いです。 この記事では、Reactにおけるレンダリングの意味を、できるだけ噛み砕いて解説します。 一言で... 続きをみる
-
Vite（ヴィート）とは？
Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。 主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。 一言でいうと、 「開発中の表示がめちゃくちゃ速い環境を用意してくれる仕組み」 です。 初学者向けに一言で説明すると ... 続きをみる
-
#
画面
-
デュアルモニターでノートPCでも３画面で複数通貨監視
-
スマホの画面を守る
-
ゲオNintendo Switch 2 本体画面に貼る液晶保護フィルムを5月29日より販売開始
-
モニターの限界をガッツリ解説！4K主流の今、未来の進化はどうなる？
-
Nintendo Switch 2用の保護フィルム比較「任天堂スイッチ２おすすめ保護フィルム一覧」
-
人のスマホを勝手に見る人
-
なんとか復旧（ーー；）～そして事の顛末～☆
-
これが最適解ですかね☆
-
左足を痛めました
-
【Windows11】画面全体の大きさを変える方法【小技】
-
画面遷移のヒストリーバック
-
画面サイズいっぱいのDialogFragmentを表示する
-
lineの画面
-
凹む〜からの〜気分スッキリ✌️
-
【Android】レイアウトXMLをJavaから制御する方法
-
-
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なのかいてあるので。
-
書くな
消すつもりで書くなら 最初から書くな 見せたくないなら 最初から書くな この世は架空じゃないんだ その画面の向こう側に 心を持っている 生身の人間がいるんだ 忘れんな
-
#
フロントエンドエンジニア
-
フロントエンドエンジニアを目指せる！おすすめプログラミングスクール5選！
-
配列（Array）をやさしく解説 — JavaScriptでの基本と実践テクニック
-
SSGFormフォームの確認画面をポップアップアラートで表示させる方法
-
未経験から挑戦！サーバーサイドエンジニアの役割とキャリアガイド
-
VSCodeでEmmetのlang設定を「lang=ja」に変更する方法
-
WordPressでメンテナンスモード「Briefly unavailable for scheduled maintenance. Check back in a minute.」を解除する方法
-
WordPressのインストールを自分で手動でインストールする方法
-
【2025年】フロントエンドの皆さん！あなたが《日々チェックするサイト》を教えてください
-
アンケート｜現役フロントエンドエンジニアがおすすめしたい本とは？【2025年度版】
-
Webエンジニアのスキルセットを徹底解説！初心者からキャリアアップを目指す方法とは？
-
【WordPress】アップロード先のフォルダの階層を変更する方法
-
【WP】画像だけのメディアページが自動生成される原因と対処法
-
XDでボタンをマウスオーバーした時にアニメーションをつける方法
-
【WordPress】ブログ記事に「読了目安時間」を表示させる方法2選
-
【JavaScript】パスワードを入力してページ遷移をさせる方法
-
-
#
HTML&CSS
-
X-Frameとは何のためにありますか
-
HTMLとCSSの疑似クラス・疑似要素の違いをやさしく完全理解する
-
はじめてのWebデザイン基礎ガイド
-
Web関連の規格と技術＋API基礎｜HTML5プロフェッショナル認定試験対策
-
Core Web Vitalsを学び、ユーザー体験を向上させよう
-
LPO（ランディングページ最適化）とは？｜デザインで成果を上げるための入門ガイド
-
【完全版】Webデザイナーのためのマトリクスコード講座｜Canvas×JavaScriptで作るデジタル演出ガイド
-
【初学者向け】コンテナクエリとメディアクエリの違いをやさしく解説｜これからのレスポンシブ設計の新常識
-
【受験レポ】HTML＆CSS技術認定試験に挑戦してわかった合格ポイントと学習のコツ（2025/11/13受験）
-
Web制作における画像の基礎知識まとめ｜形式・配色・装飾・著作権まで
-
Web制作者のための画像最適化講座｜Retina対応とsrcset（x記述子・w記述子）の正しい使い分け
-
HTMLフォームのパターンチェック完全ガイド｜pattern属性・正規表現・UX・アクセシビリティまで
-
:root（ルート疑似クラス）完全ガイド：CSS設計の土台を強くする
-
URL正規化とは？SEO評価を守るための「URL統一」完全ガイド
-
HTTPS（SSL化）のSEO効果とは？安全と信頼を両立する必須施策
-
