Terms of Use<\/a><\/li>\n <\/ul>\n<\/footer>\n<\/pre>\n\n\n\nフッターには、サイトにとって不可欠だと思われる重要なリンクがいくつか含まれています。 <\/p>\n\n
プロジェクト開(kāi)始から 3 時(shí)間で、ページの基本的な HTML 構(gòu)造が完成しました。次の手順では、ページのスタイルを設(shè)定し、スクリプト ファイルを追加して、コンテンツを設(shè)定します。 <\/p>
\n \n \n 4 時(shí)間目: 基本のセットアップ\n<\/h2>\n\n
私はページの基本的なスタイルを設(shè)定することから始めました。私はいつもボディから始めて、全體的なルックアンドフィールを確立します。
\n<\/p>\n\n
\n\n\n \n \n Document Title<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://www.miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://www.miracleart.cn/ja/wenda.html" title="に質(zhì)問(wèn)" class="languagechoosea">に質(zhì)問(wèn)</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://www.miracleart.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/toolset/development-tools" title="開(kāi)発ツール" class="languagechoosea on">開(kāi)発ツール</a>
<a href="http://www.miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://www.miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://www.miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://www.miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://www.miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://www.miracleart.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ja')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="検索" onclick="searchs('ja')"><img src="/static/imghw/find.png" alt="検索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語(yǔ)<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/js-tutorial.html"
class="phpgenera_Details_mainL1a">jsチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>ULTIMATE 教育 Web サイトを一から構(gòu)築しました — 1 日目</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">ULTIMATE 教育 Web サイトを一から構(gòu)築しました — 1 日目</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/1246273.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/246/273/647834461a95f136.jpg" src="/static/imghw/default1.png" alt="DDD">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/1246273.html" class="author_name">DDD</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 09, 2025 am 06:33 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>1週間前、友人の一人、ノア?クレイジから、化學(xué)やその他の主題に関する知識(shí)を無(wú)料で共有できるウェブサイトを構(gòu)築したいと相談を受けました。ノアはマンチェスター大學(xué)で一般化學(xué)と有機(jī)化學(xué)の博士號(hào)を取得しており、世界に対する前向きな模範(fàn)となりたいと考えていました。彼は、広告なしで教育コンテンツを作成し、Web サイトに公開(kāi)することにしました。</p>
<p>教育サイトを作成したいと常々思っていましたが、それを価値あるものにするための専門(mén)知識(shí)が不足していたので、これは私にとって素晴らしい機(jī)會(huì)でした。私は彼のアイデアが大好きで、彼が取り組んだ崇高な目的に有意義に貢獻(xiàn)したかったので、すぐに無(wú)料で取り組み始めました。</p>
<p>當(dāng)初、私は React をフレームワークとして使用することを検討しましたが、彼は基本的な Web サイトだけを望んでいたため、それは必要ないかもしれないとすぐに気づきました。私はシンプルなコンセプトと名前から始めました。これは ChatGPT から得た、Neuron IQ というぴったりの選択です。</p>
<p>フレームワークについては、基本的な HTML、CSS、JavaScript を使用することにしました。私はプロの開(kāi)発者のように、これらのテクノロジーを使用してツールを作成しました。 React を使用することもできましたが、プレーンな HTML、CSS、JavaScript を使用することで、ルーターやその他の機(jī)能がどのように作成されるかを一から理解することができました。興味深いことに、私は Node.js も使用せず、プロジェクトを軽量かつ簡(jiǎn)単に保ちました。</p>
<p>私が最も感謝したのは、彼がサイトのレイアウトとスタイルのデザインにおいて創(chuàng)造的な自由をたくさん與えてくれたことです。この機(jī)會(huì)を本當(dāng)に大切に思いました。私はプロの UI/UX デザイナーではありませんが、デザインとタイポグラフィの基本を理解するのに十分な Web サイトを開(kāi)発しました。そう、ダークテーマを選択したのは、発作を起こしたくなかったからです。</p>
<p>裏話はたくさんあるので、すぐに內(nèi)容に入りましょう;</p>
<h2>
1時(shí)間目:
</h2>
<p>他の優(yōu)れたプロジェクトと同様に、私たちは基本から始めました。 VS Code を起動(dòng)し、!ショートカット、私の基本的な HTML ボイラープレートをすぐに生成しました:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
</pre>
<p>この定型文のカスタム修正バージョンがあり、style.css と script.js がすでに含まれているため、手動(dòng)で追加する手間が省けます。 </p>
<p>私はタイトルの設(shè)定から始めました。これは SEO とブラウザーのタブでサイトがどのように表示されるかにとって重要です。 ChatGPT の助けを借りて私が決めたタイトルは、<strong>「Neuron IQ - 高品質(zhì)の教育ノートと回答」</strong></p> でした。
<p>次に、ヘッダーから始まるユーザー エクスペリエンスに焦點(diǎn)を當(dāng)てました。明確でユーザーフレンドリーなナビゲーションは、優(yōu)れたウェブサイトの鍵です。少なくとも、私はそう教えられてきました。<br>
</p>
<pre class="brush:php;toolbar:false"><header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>? 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
</pre>
<p>フッターには、サイトにとって不可欠だと思われる重要なリンクがいくつか含まれています。 </p>
<p>プロジェクト開(kāi)始から 3 時(shí)間で、ページの基本的な HTML 構(gòu)造が完成しました。次の手順では、ページのスタイルを設(shè)定し、スクリプト ファイルを追加して、コンテンツを設(shè)定します。 </p><h2>
4 時(shí)間目: 基本のセットアップ
</h2>
<p>私はページの基本的なスタイルを設(shè)定することから始めました。私はいつもボディから始めて、全體的なルックアンドフィールを確立します。<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
</pre>
<p>ここでは、フォントを「Poppins」に設(shè)定し、デフォルトのマージンとパディングを削除し、読みやすいように行の高さを調(diào)整し、テキストの色を明るいグレーに設(shè)定し、暗い背景を使用しました。私がダークテーマを選択したのは、誰(shuí)も発作を起こさないようにするためと、特に學(xué)習(xí)と STEM に特化した Web サイトで見(jiàn)た目がクールだからです。</p>
<p>次に、ヘッダーのスタイルに進(jìn)みました。優(yōu)れたヘッダーは第一印象を左右する可能性があります。<br>
</p>
<pre class="brush:php;toolbar:false"><header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>? 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
</pre>
<p>濃い灰色の背景、パディング、微妙な影を追加し、その位置をスティッキーに設(shè)定して、ユーザーがスクロールするときにナビゲーションバーが常に上部に表示されるようにしました。これにより、ナビゲーション バーがユーザーをフォローしているような、継続的なナビゲーション エクスペリエンスが提供されます。</p>
<p>次に、ナビゲーション バー自體のスタイルを設(shè)定しました。<br>
</p>
<pre class="brush:php;toolbar:false">body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
</pre>
<p>これは、フレックスボックスを使用して、ロゴを左側(cè)に、ナビゲーション リンクを右側(cè)に配置します。また、応答性とセンタリングのために max-width を追加し、大きな畫(huà)面で伸びすぎないようにしました。</p>
<p>ロゴには、ブランドを認(rèn)識(shí)できるように獨(dú)自のフォントの色を使用しました。<br>
</p>
<pre class="brush:php;toolbar:false">header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
</pre>
<p>ナビゲーション リンク:<br>
</p>
<pre class="brush:php;toolbar:false">nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
</pre>
<p>スタイルはスタンダードでクリーンですが、過(guò)度に複雑なデザインを使用するのではなく、常にシンプルさを目指しています。デフォルトのリストのスタイルを削除し、フレックスボックスを使用してリンクを水平に表示し、各リンク間にスペースを追加し、優(yōu)れたホバー効果を追加しました。</p>
<p>サイト全體で一貫した間隔を保つために、セクションのスタイルを変更しました:<br>
</p>
<pre class="brush:php;toolbar:false">.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
</pre>
<p>これにより、すべてのセクションの最大幅、余白、テキストの配置が同じになります。</p>
<h2>
5 時(shí)間目: ヒーローセクションのスタイリング
</h2>
<p>ヒーローセクションに移りますが、注目を集める印象的なビジュアル要素が必要でした。<br>
</p>
<pre class="brush:php;toolbar:false">nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
</pre>
<p>背景に線形グラデーションを使用して奧行きとモダンな雰囲気を出し、間隔を広げるためにパディングを追加しました。<br>
</p>
<pre class="brush:php;toolbar:false">section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
</pre>
<p>これにより、ヒーローのテキスト コンテンツが広がりすぎないようにスタイル設(shè)定され、水平方向の中央に配置され、ヒーロー セクションがロードされたときにスムーズなトランジション効果が得られます。</p>
<p>見(jiàn)出しと段落のスタイルはシンプルで標(biāo)準(zhǔn)的です:<br>
</p>
<pre class="brush:php;toolbar:false">.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 80px 20px;
color: #e0e0e0;
}
</pre>
<p>最後にボタン:<br>
</p>
<pre class="brush:php;toolbar:false">.hero-content {
max-width: 700px;
margin: 0 auto;
opacity: 0; /* Start hidden */
transform: translateY(20px); /* Slight move down */
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content {
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content h1, .hero-content p{
opacity:0;
transform: translateY(-20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content h1, .hero.loaded .hero-content p{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content .btn{
opacity:0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content .btn{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
</pre>
<p>これにより、ボタンは視覚的に魅力的でインタラクティブになり、ホバーすると背景が変わります。</p>
<h2>
6 時(shí)間目: イントロダクション、カテゴリー、お客様の聲のスタイリング
</h2>
<p>次に、イントロセクションのスタイルを設(shè)定する必要がありました。<br>
</p>
<pre class="brush:php;toolbar:false">.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
</pre>
<p>これにより、グリッドを使用してイントロ セクションの応答性の高いグリッドが作成され、並べて配置され、各イントロ カードに微妙なフェードイン アニメーションが提供されます。</p>
<p>カテゴリセクションの場(chǎng)合:<br>
</p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
</pre>
<p>これにより、別の応答性の高いグリッドが作成され、微妙なフェードイン アニメーションを使用して主題が整理されて表示されます。フレックスボックスを使用して畫(huà)像とテキストを配置し、パディングとスペース、ホバー効果を追加しました。</p>
<p>そして今度は紹介セクション、カルーセルです。<br>
</p>
<pre class="brush:php;toolbar:false"><header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>? 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
</pre>
<p>これは、視覚的にアピールするトランジション効果とスケール効果を備えた、推薦カルーセルの標(biāo)準(zhǔn) CSS です。</p>
<h2>
7 時(shí)間目: 最新のリソースと CTA のスタイリング
</h2>
<p>最新のリソース セクションのスタイルを設(shè)定します。<br>
</p>
<pre class="brush:php;toolbar:false">body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
</pre>
<p>ここでは、別のレスポンシブ グリッドを?qū)g裝し、カードのスタイルを設(shè)定し、ホバー効果を追加し、フェードイン アニメーションを含めてこれらのカードに命を吹き込みました。</p>
<p>次に、行動(dòng)喚起セクションの CTA:<br>
</p>
<pre class="brush:php;toolbar:false">header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
</pre>
<p>これは、ユーザーがサイトにさらに関與するためのシンプルで明確なセクションです。</p>
<h2>
8時(shí)間目: 最後の仕上げ
</h2>
<p>スタイルを完成させるために、フッターに焦點(diǎn)を當(dāng)てました:<br>
</p>
<pre class="brush:php;toolbar:false">nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
</pre>
<p>これにより、フッターのスタイルが設(shè)定され、リンクのリストが含まれ、ホバー効果が設(shè)定されます。</p>
<p>次に、メディア クエリを使用してレスポンシブ デザインを追加しました。<br>
</p>
<pre class="brush:php;toolbar:false">.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
</pre>
<p>これにより、ナビゲーションとグリッド レイアウトが調(diào)整され、サイトが小型のデバイスでも適切に表示されるようになります。</p>
<h2>
9 時(shí)間目: 件名とページのスタイリング
</h2>
<p>最後に、この Web サイトの目的はノアの知識(shí)を促進(jìn)することであるため、件名とページについてのスタイルを追加し、それらをできるだけ最小限に抑えます。そのため、デザインは可能な限り最小限に抑えられています。<br>
</p>
<pre class="brush:php;toolbar:false">nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
</pre>
<p>これらのスタイルは同じテーマに従っており、特定のページ要素を反映するために小さな変更が加えられ、すべてのページで一貫した外観が作成されます。</p>
<p>これで Neuron IQ のスタイリングが完了しました。すべてを希望どおりに配置するのに約 6 時(shí)間かかりました。ここで、パズルの最後のピースである JavaScript に取り掛かります。</p>
<p>JS に移行する前に、現(xiàn)在の Web サイトの外観を確認(rèn)してみましょう:</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563534819.jpg" class="lazy" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1"><br>
または、ライブプレビューを見(jiàn)たい場(chǎng)合は、ここにあります: NeuronIQ</p>
<p>この部分は、正直に言うと、私の忍耐力を少し試しました。つまり、簡(jiǎn)単にいかないことは分かっていましたが、それでも…</p>
<h2>
10 時(shí)間目: アニメーションとスクロール効果から始める
</h2>
<p>私はウェブサイトを単なる靜的なページではなく、生きていると感じさせることを目標(biāo)として始めました。まず、ヒーロー セクションのアニメーションを設(shè)定しました。<br>
</p>
<pre class="brush:php;toolbar:false">section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
</pre>
<p>これは簡(jiǎn)単です。DOM が完全にロードされたら、ヒーロー セクションのアニメーションをトリガーするクラスを追加すると、計(jì)畫(huà)どおりにスムーズにアニメーション化されます。</p>
<p>次に、セクションがビューポートにスクロールするときにアニメーションを追加することを目指しました。このために、IntersectionObserver API を使用しました。この部分は少し難しかったです。<br>
</p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
</pre>
<p>このコードは、.intro-grid div 要素のオブザーバーを設(shè)定します。オブザーバーがビューに表示されると、フェードイン クラスを追加してアニメーションをトリガーし、オブザーバーは不要になったので削除します。</p>
<p>カテゴリセクションでも同じことを行いました:<br>
</p>
<pre class="brush:php;toolbar:false"><header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>? 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
</pre>
<p>カテゴリーセクションにも同じ構(gòu)造を使用し、非常に基本的な遅延を追加しました。まだ多くの改良が必要でした。</p>
<h2>
11 時(shí)間目: お客様の聲スライダー
</h2>
<p>次に、紹介カルーセルの実裝に移りました。<br>
</p>
<pre class="brush:php;toolbar:false">body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
</pre>
<p>これはスライダーのかなり標(biāo)準(zhǔn)的なセットアップです。スライダーを更新し、動(dòng)きを制御し、スライド間に 5 秒の遅延を設(shè)けて自動(dòng)スライドを設(shè)定する機(jī)能を追加しました。</p>
<p>最後に、最新のリソースセクションにスクロール効果を?qū)g裝しました。<br>
</p>
<pre class="brush:php;toolbar:false">header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
</pre>
<p>私は以前と同様の構(gòu)造に従い、これらのカードにフェードイン クラスを観察して追加し、観察を解除しました。</p>
<h2>
12 時(shí)間目と 13 時(shí)間目: 不満とデバッグ
</h2>
<p>ここで問(wèn)題が発生しました。テスト後、スクロール アニメーションが一貫して動(dòng)作していないことがわかりました。アニメーションのトリガーが早すぎる場(chǎng)合もあれば、まったくトリガーされない場(chǎng)合もあれば、ページ上でちらつくだけの場(chǎng)合もあります。めちゃくちゃでした</p>
<p>私は次の 2 時(shí)間をかけてコードを徹底的に調(diào)べ、しきい値のさまざまな値を試したり、アニメーションをトリガーするさまざまな方法を試したりしました。何をしてもセクションがランダムにアニメーションし続けるため、イライラしていました。</p>
<p>最初は、しきい値が低すぎるため、しきい値が正しく設(shè)定されておらず、ユーザーがスクロールしていなくても要素がオブザーバーに表示されてしまうのではないかと思いました。したがって、すべての要素に対して 0.2 のしきい値が適切であると考えました。まあ、どうやら違うようです。一部の要素には別の番號(hào)が必要です。</p>
<p>私はすべてのステップをログに記録し、ブラウザの開(kāi)発者コンソールを検査し、遭遇した可能性のあるすべてのエラー メッセージを Google で検索しました (この間、Stack Overflow が私の親友になりました)。結(jié)局、複數(shù)の要素に対して各オブザーバーを 1 つのしきい値だけで設(shè)定していましたが、一部の要素ではそれが機(jī)能しませんでした。そのため、ちらついたり、ランダムにアニメーションしたり、まったくアニメーションしなかったりすることがあります。</p>
<p>私のアプローチは明らかに間違っていたので、修正する必要がありました。結(jié)局、この混亂のデバッグに約 2 時(shí)間を費(fèi)やしました。最終的に、特定のターゲットしきい値を取得するためにオブザーバーを書(shū)き直しました。変更後、ようやくアニメーションが期待通りに動(dòng)作するようになりました。</p>
<p>適切なしきい値を受け取るために各 handleIntersection 関數(shù)を変更する必要がありましたが、これで問(wèn)題は修正されました。</p>
<p>3 時(shí)間の JavaScript コーディングと 2 時(shí)間のデバッグを経て、ついにこのプロジェクトのコーディングが完了しました。</p>
</pre></pre></pre></pre><p>以上がULTIMATE 教育 Web サイトを一から構(gòu)築しました — 1 日目の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見(jiàn)つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821119.html" title="ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796827210.html" title="Oguri Cap Build Guide |かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796828723.html" title="Agnes Tachyonビルドガイド|かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyonビルドガイド|かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821436.html" title="砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー" class="phpgenera_Details_mainR4_bottom_title">砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見(jiàn)る</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫(huà)像を無(wú)料で</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード寫(xiě)真を作成する AI 搭載アプリ</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>寫(xiě)真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類(lèi)リムーバー</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見(jiàn)る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821119.html" title="ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796827210.html" title="Oguri Cap Build Guide |かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796828723.html" title="Agnes Tachyonビルドガイド|かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyonビルドガイド|かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821436.html" title="砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー" class="phpgenera_Details_mainR4_bottom_title">砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見(jiàn)る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無(wú)料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國(guó)語(yǔ)版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國(guó)語(yǔ)版</h3>
</a>
<p>中國(guó)語(yǔ)版、とても使いやすい</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開(kāi)発ツール</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見(jiàn)る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8639</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1785</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1581</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1445</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/faq/zt">もっと見(jiàn)る</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796822063.html" title="Java vs. JavaScript：混亂を解消します" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs. JavaScript：混亂を解消します" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796822063.html" title="Java vs. JavaScript：混亂を解消します" class="phphistorical_Version2_mids_title">Java vs. JavaScript：混亂を解消します</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">JavaとJavaScriptは異なるプログラミング言語(yǔ)であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開(kāi)発に使用されますが、JavaScriptは主にWebページ開(kāi)発に使用されます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796821632.html" title="JavaScriptコメント：短い説明" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScriptコメント：短い説明" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796821632.html" title="JavaScriptコメント：短い説明" class="phphistorical_Version2_mids_title">JavaScriptコメント：短い説明</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span>
<p class="Articlelist_txts_p">JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796827639.html" title="JSで日付と時(shí)間を操作する方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JSで日付と時(shí)間を操作する方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796827639.html" title="JSで日付と時(shí)間を操作する方法は？" class="phphistorical_Version2_mids_title">JSで日付と時(shí)間を操作する方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:27 AM</span>
<p class="Articlelist_txts_p">JavaScriptで日付と時(shí)間を処理する場(chǎng)合は、次の點(diǎn)に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお?jiǎng)幛幛筏蓼埂?2。時(shí)間情報(bào)を取得および設(shè)定して、メソッドを設(shè)定でき、月は0から始まることに注意してください。 3.手動(dòng)でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお?jiǎng)幛幛筏蓼埂￥长欷椁沃匾圣荪ぅ螗趣蛄?xí)得すると、一般的な間違いを効果的に回避できます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796828200.html" title="なぜの下部にタグを配置する必要があるのですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="なぜの下部にタグを配置する必要があるのですか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796828200.html" title="なぜの下部にタグを配置する必要があるのですか？" class="phphistorical_Version2_mids_title">なぜの下部にタグを配置する必要があるのですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:22 AM</span>
<p class="Articlelist_txts_p">PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796822037.html" title="JavaScript vs. Java：開(kāi)発者向けの包括的な比較" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs. Java：開(kāi)発者向けの包括的な比較" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796822037.html" title="JavaScript vs. Java：開(kāi)発者向けの包括的な比較" class="phphistorical_Version2_mids_title">JavaScript vs. Java：開(kāi)発者向けの包括的な比較</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span>
<p class="Articlelist_txts_p">javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796822137.html" title="JavaScript：効率的なコーディングのためのデータ型の調(diào)査" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript：効率的なコーディングのためのデータ型の調(diào)査" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796822137.html" title="JavaScript：効率的なコーディングのためのデータ型の調(diào)査" class="phphistorical_Version2_mids_title">JavaScript：効率的なコーディングのためのデータ型の調(diào)査</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:46 AM</span>
<p class="Articlelist_txts_p">javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796828191.html" title="DOMでのイベントの泡立ちとキャプチャとは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="DOMでのイベントの泡立ちとキャプチャとは何ですか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796828191.html" title="DOMでのイベントの泡立ちとキャプチャとは何ですか？" class="phphistorical_Version2_mids_title">DOMでのイベントの泡立ちとキャプチャとは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span>
<p class="Articlelist_txts_p">イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設(shè)定することにより実裝されます。 2。イベントバブルはデフォルトの動(dòng)作であり、UseCaptureはfalseに設(shè)定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動(dòng)的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796820615.html" title="JavaとJavaScriptの違いは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaとJavaScriptの違いは何ですか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796820615.html" title="JavaとJavaScriptの違いは何ですか？" class="phphistorical_Version2_mids_title">JavaとJavaScriptの違いは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 17, 2025 am 09:17 AM</span>
<p class="Articlelist_txts_p">JavaとJavaScriptは、異なるプログラミング言語(yǔ)です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語(yǔ)です。 2。JavaScriptは動(dòng)的なタイプと解釈された言語(yǔ)であり、主にWebインタラクションとフロントエンド開(kāi)発に使用されます。</p>
</div>
</div>
<a href="http://www.miracleart.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長(zhǎng)を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://www.miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a>
<a href="http://www.miracleart.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="59iq5" class="pl_css_ganrao" style="display: none;"><label id="59iq5"><strong id="59iq5"><p id="59iq5"><source id="59iq5"></source></p></strong></label><thead id="59iq5"></thead><legend id="59iq5"><menu id="59iq5"><ol id="59iq5"><th id="59iq5"></th></ol></menu></legend><tr id="59iq5"></tr><optgroup id="59iq5"><nav id="59iq5"></nav></optgroup><div id="59iq5"><source id="59iq5"><xmp id="59iq5"></xmp></source></div><th id="59iq5"><nobr id="59iq5"></nobr></th><button id="59iq5"><option id="59iq5"></option></button><ins id="59iq5"><em id="59iq5"><kbd id="59iq5"></kbd></em></ins><em id="59iq5"><listing id="59iq5"><li id="59iq5"><label id="59iq5"></label></li></listing></em><form id="59iq5"><div id="59iq5"><big id="59iq5"></big></div></form><sub id="59iq5"><menuitem id="59iq5"></menuitem></sub><wbr id="59iq5"></wbr><dfn id="59iq5"><var id="59iq5"><table id="59iq5"><dfn id="59iq5"></dfn></table></var></dfn><wbr id="59iq5"><acronym id="59iq5"><tfoot id="59iq5"><thead id="59iq5"></thead></tfoot></acronym></wbr><u id="59iq5"><th id="59iq5"><strong id="59iq5"></strong></th></u><strong id="59iq5"><dl id="59iq5"><th id="59iq5"><div id="59iq5"></div></th></dl></strong><span id="59iq5"><tr id="59iq5"><menuitem id="59iq5"></menuitem></tr></span><th id="59iq5"><bdo id="59iq5"></bdo></th><small id="59iq5"></small><noframes id="59iq5"><li id="59iq5"><small id="59iq5"><noframes id="59iq5"></noframes></small></li></noframes><optgroup id="59iq5"><small id="59iq5"></small></optgroup><thead id="59iq5"></thead><i id="59iq5"><input id="59iq5"></input></i><li id="59iq5"></li><ol id="59iq5"></ol><th id="59iq5"></th><style id="59iq5"></style><dfn id="59iq5"><pre id="59iq5"></pre></dfn><rp id="59iq5"><small id="59iq5"><li id="59iq5"></li></small></rp><table id="59iq5"></table><ol id="59iq5"></ol><label id="59iq5"><listing id="59iq5"><dfn id="59iq5"></dfn></listing></label><kbd id="59iq5"><tr id="59iq5"><button id="59iq5"><ruby id="59iq5"></ruby></button></tr></kbd><acronym id="59iq5"></acronym><form id="59iq5"></form><acronym id="59iq5"><pre id="59iq5"><rp id="59iq5"><video id="59iq5"></video></rp></pre></acronym><output id="59iq5"></output><font id="59iq5"></font><sup id="59iq5"><ol id="59iq5"></ol></sup><tt id="59iq5"><b id="59iq5"></b></tt><th id="59iq5"><form id="59iq5"><pre id="59iq5"></pre></form></th><nav id="59iq5"></nav><progress id="59iq5"></progress><option id="59iq5"></option><pre id="59iq5"><ul id="59iq5"><video id="59iq5"></video></ul></pre><ins id="59iq5"><delect id="59iq5"><tt id="59iq5"><ruby id="59iq5"></ruby></tt></delect></ins><li id="59iq5"><abbr id="59iq5"><pre id="59iq5"></pre></abbr></li><pre id="59iq5"><pre id="59iq5"><s id="59iq5"><rt id="59iq5"></rt></s></pre></pre><font id="59iq5"></font><kbd id="59iq5"><em id="59iq5"></em></kbd><blockquote id="59iq5"></blockquote><ol id="59iq5"><tfoot id="59iq5"><tbody id="59iq5"><meter id="59iq5"></meter></tbody></tfoot></ol><delect id="59iq5"></delect><small id="59iq5"><noframes id="59iq5"><abbr id="59iq5"></abbr></noframes></small><menuitem id="59iq5"></menuitem><ruby id="59iq5"></ruby><pre id="59iq5"><dfn id="59iq5"></dfn></pre><em id="59iq5"><ruby id="59iq5"><li id="59iq5"></li></ruby></em><em id="59iq5"><mark id="59iq5"><ins id="59iq5"></ins></mark></em><dl id="59iq5"></dl><sup id="59iq5"><samp id="59iq5"><b id="59iq5"><small id="59iq5"></small></b></samp></sup><u id="59iq5"><table id="59iq5"><tbody id="59iq5"></tbody></table></u><span id="59iq5"></span><p id="59iq5"><strike id="59iq5"><wbr id="59iq5"><td id="59iq5"></td></wbr></strike></p><center id="59iq5"></center><tr id="59iq5"></tr><strong id="59iq5"></strong><bdo id="59iq5"><code id="59iq5"><legend id="59iq5"><wbr id="59iq5"></wbr></legend></code></bdo><sub id="59iq5"></sub><menu id="59iq5"><listing id="59iq5"><strong id="59iq5"></strong></listing></menu><sup id="59iq5"><ol id="59iq5"></ol></sup><s id="59iq5"></s><sup id="59iq5"></sup><ruby id="59iq5"><b id="59iq5"><small id="59iq5"></small></b></ruby><strike id="59iq5"></strike><em id="59iq5"></em><code id="59iq5"></code><tr id="59iq5"><tt id="59iq5"></tt></tr><table id="59iq5"><dfn id="59iq5"></dfn></table><th id="59iq5"></th><code id="59iq5"><strong id="59iq5"><p id="59iq5"></p></strong></code><s id="59iq5"></s><abbr id="59iq5"></abbr><rt id="59iq5"><acronym id="59iq5"><th id="59iq5"><div id="59iq5"></div></th></acronym></rt><strong id="59iq5"><dl id="59iq5"><th id="59iq5"><div id="59iq5"></div></th></dl></strong><abbr id="59iq5"><li id="59iq5"><optgroup id="59iq5"><strong id="59iq5"></strong></optgroup></li></abbr><tbody id="59iq5"><small id="59iq5"></small></tbody><ruby id="59iq5"></ruby><center id="59iq5"><output id="59iq5"><ruby id="59iq5"><li id="59iq5"></li></ruby></output></center><p id="59iq5"></p><strong id="59iq5"></strong><option id="59iq5"><track id="59iq5"><var id="59iq5"></var></track></option><wbr id="59iq5"><td id="59iq5"></td></wbr><wbr id="59iq5"></wbr><legend id="59iq5"></legend><sub id="59iq5"><center id="59iq5"><meter id="59iq5"><del id="59iq5"></del></meter></center></sub><pre id="59iq5"><button id="59iq5"><video id="59iq5"><tr id="59iq5"></tr></video></button></pre><mark id="59iq5"></mark><strong id="59iq5"></strong><tbody id="59iq5"><pre id="59iq5"><style id="59iq5"><rt id="59iq5"></rt></style></pre></tbody><dfn id="59iq5"><abbr id="59iq5"></abbr></dfn><ruby id="59iq5"></ruby><kbd id="59iq5"></kbd><button id="59iq5"></button><rp id="59iq5"></rp><blockquote id="59iq5"><samp id="59iq5"><b id="59iq5"><em id="59iq5"></em></b></samp></blockquote><style id="59iq5"><rt id="59iq5"><label id="59iq5"><th id="59iq5"></th></label></rt></style><tr id="59iq5"><optgroup id="59iq5"></optgroup></tr><em id="59iq5"><noframes id="59iq5"><nobr id="59iq5"></nobr></noframes></em><cite id="59iq5"></cite><form id="59iq5"><track id="59iq5"><nav id="59iq5"></nav></track></form><nav id="59iq5"><menu id="59iq5"><ol id="59iq5"><legend id="59iq5"></legend></ol></menu></nav><thead id="59iq5"></thead><output id="59iq5"><ruby id="59iq5"></ruby></output><menu id="59iq5"><legend id="59iq5"><sup id="59iq5"><span id="59iq5"></span></sup></legend></menu><var id="59iq5"></var><center id="59iq5"></center><output id="59iq5"></output><thead id="59iq5"><td id="59iq5"></td></thead><nobr id="59iq5"><abbr id="59iq5"><bdo id="59iq5"></bdo></abbr></nobr><video id="59iq5"></video><span id="59iq5"><form id="59iq5"><pre id="59iq5"><meter id="59iq5"></meter></pre></form></span><menuitem id="59iq5"><delect id="59iq5"></delect></menuitem><nav id="59iq5"><menu id="59iq5"><ol id="59iq5"></ol></menu></nav><em id="59iq5"><button id="59iq5"></button></em><strike id="59iq5"></strike><address id="59iq5"><sub id="59iq5"><menuitem id="59iq5"><delect id="59iq5"></delect></menuitem></sub></address><code id="59iq5"></code><track id="59iq5"><u id="59iq5"><form id="59iq5"></form></u></track><font id="59iq5"></font><legend id="59iq5"></legend><s id="59iq5"><fieldset id="59iq5"><acronym id="59iq5"><legend id="59iq5"></legend></acronym></fieldset></s><del id="59iq5"><em id="59iq5"><u id="59iq5"></u></em></del><tbody id="59iq5"></tbody><pre id="59iq5"></pre><option id="59iq5"></option><form id="59iq5"><track id="59iq5"><nav id="59iq5"></nav></track></form><th id="59iq5"></th><u id="59iq5"></u><em id="59iq5"><button id="59iq5"></button></em><form id="59iq5"></form><thead id="59iq5"><acronym id="59iq5"></acronym></thead><cite id="59iq5"><strike id="59iq5"></strike></cite><dfn id="59iq5"><rp id="59iq5"></rp></dfn><var id="59iq5"><pre id="59iq5"></pre></var><center id="59iq5"></center><strong id="59iq5"></strong></div>
</html>