html 面接でよくある 5 つの質問-htmlチュートリアル-php.cn

1. 共通のブロックレベル要素インライン要素 p - 最も一般的に使用されるブロックレベル要素 dl - dt-dd で使用されるブロックレベル要素フォーム - インタラクティブフォーム h1 -h6- タイトル hr - 水平区切り線 ol - 順序付きリスト p - 段落 ul - 順序なしリストフィールドセット - フォームフィールドセット Colgroup-col - フォーム列グループ化要素 table-tr-td テーブルと行セル - フォーマット済みテキスト a - ハイパーリンク (アンカー) br - 改行 i - イタリック体 em - 強調 img - 画像入力 - 入力ボックスラベル - フォームラベルスパン - テキストブロックを定義するために一般的に使用されるインラインコンテナ Strong - 太字強調 sub - 下付き文字 sup - 上付きテキストエリア - 複数行テキスト入力ボックス u - 下線選択 - プロジェクト選択 2. いくつかの条件text-overflow 属性は、テキストがオーバーフローした場合に省略マークを表示するかどうかのみであり、オーバーフローを実現する際に生成される他のスタイル属性の定義はありません。省略記号の値を定義する必要があります:
1. コンテナの幅: width: value; (px、%、両方を使用できます)
2. テキストを 1 行で表示します: white-space: nowrap ;
3. オーバーフローコンテンツを非表示にする: overflow: hidden;
4. オーバーフローテキストに省略記号を表示する: text-overflow: ellipsis;
注: この記事のオーバーフローを設定するには、1 行のテキストを指定する必要があります。！！

IE6+; chrome1.0+; (Firefox、Opera はまだサポートされていません)

3. コンテナ内で要素を垂直方向に中央揃えに設定するには、変更する必要があります
display
属性値は inline-block;であり、兄弟要素 (ruler) を追加します (兄弟要素 [ruler] スタイルは vertical-align
:middle;width:0;height: に設定されています) 100%;表示:インラインブロック;)。 3 つの条件:
1:
text-align
:center をコンテナー (親要素) に追加する必要があります。 2: 現在の要素をインラインブロック要素 (display:inline-block;) に変換して追加する必要があります。現在の要素にvertical-align:middle;3を追加します: 現在の要素の後に兄弟要素spanを追加し(改行なし)、vertical-align:middle;width:0;height:100%;display:inline -block;

4. 置換要素と非置換要素

置換要素と非置換要素

a) 置換要素: ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。たとえば、ブラウザは画像情報を読み取り、タグの src 属性の値に基づいて表示しますが、(x)html コードを表示すると、画像の実際の内容は表示されません。タグのタイプ属性は、入力ボックスや
ラジオボタン
などを表示するかどうかを決定します。 HTML の (x)、、

、<select> はすべて置換要素です。これらの要素には実際のコンテンツがない、つまり空の要素であることがよくあります。 <a href="http://www.php.cn/code/5979.html" target="_blank"></a>置換要素は表示内にボックスを生成します。これが、一部のインライン要素 (img、input) で幅と高さを設定できる理由です。 <br><br>b) 置換不可能な要素 (置換不可能な要素): (x) html のほとんどの要素は置換不可能な要素です。つまり、その内容はユーザー (ブラウザなど) に直接表示されます。 <br><br>5. スプライトとは何ですか?利点は何ですか? <br><br>画像の統合、小さな単一の背景画像を 1 つの大きな背景画像に統合します。 <br><br>画像統合の利点: 1) 画像統合によりサーバーへのリクエスト数が削減され、ページの読み込み速度が向上します。 2) 画像を統合してサイズを小さくします。 <br><br>6. <br>CSSカスケード<br>スタイルシートとは何ですか? <a href="http://www.php.cn/code/5005.html" target="_blank">優先度</a>アルゴリズムはどのように計算されますか? <a href="http://www.php.cn/code/6066.html" target="_blank"></a>a. 重要性とソースの優先順位は低位から高位までです: <br>1) ブラウザーのデフォルトのスタイル <br>2) <br>class<br>/id....セレクターの重み <a href="http://www.php.cn/wiki/164.html" target="_blank">3) インラインスタイル </a>4) インラインまたはアウトライン(書き順) <br>5) !重要最高 <br><br><br>7. display:none と <a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden<br><br> の違い 前者: スペースを占有せずに非表示にする 後者: 非表示にするがスペースを占有する<br><br>8. <a href="http://www.php.cn/code/6337.html" target="_blank">float をクリアするいくつかの方法</a><br><br>hack1: にオーバーフロー ステートメントを追加します。親要素 :hidden;<br><br>hack2: 親要素に高さを追加します<br><br>hack3: フローティング要素の下に空の p を追加し、要素にステートメントを追加します。 :hidden;}<a href="http://www.php.cn/wiki/917.html" target="_blank"></a> ハック 4: ユニバーサルクリアフロートメソッド p<br>:after<br>{content: “.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}<a href="http://www.php.cn/wiki/978.html" target="_blank"></a>9.属性は<br>継承<br>できますか? <a href="http://www.php.cn/code/6064.html" target="_blank"></a>1) テキスト関連: <br>font-family<br>、<a href="http://www.php.cn/wiki/804.html" target="_blank">font-size</a>、<a href="http://www.php.cn/wiki/807.html" target="_blank">font-style</a>、<a href="http://www.php.cn/wiki/826.html" target="_blank">font-variant</a>、<a href="http://www.php.cn/wiki/862.html" target="_blank">font-weight</a>、font、<a href="http://www.php.cn/wiki/858.html" target="_blank">letter-spacing</a>、<a href="http://www.php.cn/wiki/865.html" target="_blank">line-height</a> 、text-align、<a href="http://www.php.cn/wiki/864.html" target="_blank">text-indent</a>、<a href="http://www.php.cn/wiki/867.html" target="_blank">text-transform</a>、<a href="http://www.php.cn/wiki/863.html" target="_blank">word-spacing</a><a href="http://www.php.cn/wiki/866.html" target="_blank">2) リスト関連: </a>list-style<br>-image、<a href="http://www.php.cn/wiki/954.html" target="_blank">list-style-position</a>、<a href="http://www.php.cn/wiki/955.html" target="_blank">list-style-type </a>、list-style<a href="http://www.php.cn/wiki/956.html" target="_blank">3) 色関連: color</a>4) 透明度 (子要素は祖先要素の不透明度を継承しますが、変更することはできません)<br>注: font-size は、比率ではなく、親要素のサイズを継承します。 。 line-height 親要素がパーセント値またはピクセル値の場合、子要素は親要素と同じになります。 親要素が標準または数値の場合、子要素の行の高さは子のフォントサイズになります。要素に数値を乗算します。 <br><br>10. 配置方法<br><br>position 属性値: <br>static<br>、relative、absolute、fixed<a href="http://www.php.cn/wiki/188.html" target="_blank">1) static</a>static 要素はドキュメント フロー内に配置され、<br>top<br> と <a href="http://www.php.cn/wiki/904.html" target="_blank"> が通常どおり表示されます。要素の下部の </a>、<a href="http://www.php.cn/wiki/906.html" target="_blank">left</a>、<a href="http://www.php.cn/wiki/907.html" target="_blank">right</a> 属性は無視されます。 <a href="http://www.php.cn/wiki/905.html" target="_blank">z-index</a> 属性は常に 0 です。 <a href="http://www.php.cn/wiki/903.html" target="_blank">2) 相対</a> 相対位置決め、ドキュメント フロー内の要素が占める位置とサイズを保持し、相対移動距離と元の位置は左/右/上/によって決定されます。ボトム属性 <br>3) 絶対<br><br>絶対位置決め<br>を保持し、<a href="http://www.php.cn/code/6074.html" target="_blank">オブジェクト</a>をドキュメントフローから切り離し、left/right/top/bottomなどの属性を使用して、位置設定で最も近い親要素を基準とした絶対位置決めを実行します。そうでない場合は、body オブジェクトに基づきます <a href="http://www.php.cn/wiki/60.html" target="_blank">4) fixed</a>fixed は、absolute と似ていますが、ウィンドウの左上隅を基準とした相対的なものであり、ドキュメントと一緒にスクロールしません。ただし、マルチフレーム ページ内の場合は、ブラウザの左上隅ではなく、フレームの左上隅を基準とします。 <br><br>11. リンクと @import の違いは何ですか? <br><br>1. 先祖の違い。 LinkはX<br>HTMLタグ<br>に属しており、@importは完全にCSSが提供するメソッドです。 <a href="http://www.php.cn/code/427.html" target="_blank"></a>2. link タグは、CSS のロードに加えて、<br>RSS<br> の定義、rel 接続属性の定義など、他の多くのことも行うことができます。 @import は CSS <a href="http://www.php.cn/wiki/1541.html" target="_blank"></a> のロードのみを行うことができます。3. ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link<br><br> によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページのダウンロードが完了するまで待ってから読み込まれます。そのため、@import が CSS を読み込むページを閲覧すると、スタイルが表示されないことがあります (ちらつくだけです) <a href="http://www.php.cn/wiki/231.html" target="_blank"></a>4. 互換性の違い。 @import は CSS2.1 で提案されたものなので、古いブラウザではサポートされていません。 @import は IE5 以降でしか認識できませんが、リンクタグではこの問題は発生しません。 5. dom を使用してスタイルを制御する場合の違い。 <br>javascript<br>を使用してdomを制御してスタイルを変更する場合、@importはdom<br><br><a href="http://www.php.cn/code/7565.html" target="_blank">によって制御できないため、リンクタグのみを使用できます。12. ポジショニングの属性値は何ですか?それぞれに価値はありますか？ <br><br>各属性値の役割: <br><br>static: デフォルト値。位置が静的に設定されている要素は、通常、ドキュメント フローによって指定された位置に常に表示されます (静的要素は、上、下、左、または右の宣言を無視します)。 <br><br>absolute: 親要素の絶対位置を基準として、スペースを占有せず、その位置は最も近い位置にある親要素の位置を基準とします。 「left」、「top」、「right」、「bottom」のプロパティを直接指定できます。親が配置されていない場合は、html (ルート要素) が使用されます。 (重なり順 z-index: 値) <br><br>relative: デフォルトの位置を基準としたオフセット位置です。左、上、右、下の値を設定することで、通常の位置 (開始位置の移動 [通常のレイアウト フローは中断されません] <br><br>固定: ブラウザーを基準とした絶対位置。この要素の位置は、ブラウザー ウィンドウの指定された座標を基準にして配置できます。 、「top」、「right」、「bottom」属性。ウィンドウがスクロールされているかどうかに関係なく、要素はその位置に留まります<br><br>13. html5</a><a href="http://www.php.cn/php/php-tp-append.html" target="_blank"></a><br>mainに15個の新しい<br>タグを書き込みます。 <a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank"> 余談 記事セクション 図 データリスト ビデオ オーディオ フィールドテスト ラベル キャプション</a><a href="http://www.php.cn/wiki/646.html" target="_blank">14. BFC とはどのように生成されるのですか? </a><br>1. 内部フロートをクリアし、垂直方向のマージンを防止します。 <br> 重複から (2 つの BFC に配置) <br>3. ルート要素、<br>float<br> 属性が none ではない、位置が絶対または固定、表示が inline-block、table-cell、table -caption、flex、inline-flex、およびオーバーフローは表示されません<a href="http://www.php.cn/wiki/931.html" target="_blank"></a><br>15. .px、em、rem、pt の違い<a href="http://www.php.cn/wiki/919.html" target="_blank"></a>1) px を使用してフォント サイズを設定すると、より安定して正確になります<br>。この方法の問題点は、ユーザーがブラウザーで作成した Web ページを閲覧するときに、ブラウザーをズームすると Web<br>ページ レイアウト<br>が崩れてしまうことです。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。 <br>2) em はベースラインに基づいてフォント サイズを調整します <br>em は親要素を基準にしてフォント サイズを設定するため、要素を設定するには、その親要素のサイズを知る必要がある場合があります <br>3 )。 rem はルート要素のフォント サイズに相対して表示されます <a href="http://www.php.cn/code/7955.html" target="_blank">rem はルート要素  に相対的に表示されます。つまり、ルート要素内の参照値を決定するだけで済みます </a>4) pt のサイズは次と等しいです1インチ/72<br>ポイント: テキストの測定単位です<br>この測定方法は印刷デザインの背景に由来しており、メディアに最適ですが、モニターでも広く使用されています<br><br>16.垂直方向と水平方向のセンタリングを実現するには? <br><br>1.p{幅:200px;高さ:200px;<br>背景<br>:#f00;位置:固定;左:0;右:0;上:0;下:0;余白:自動;}<br><br>2. p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}<br><a href="http://www.php.cn/wiki/892.html" target="_blank">17、プログレッシブエンハンスメントとグレースフルデグラデーション</a><br>段階的な強化: 最も基本的な機能を保証するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の機能を追加して、より良いユーザー エクスペリエンスを実現します。 <br><br>グレースフルデグラデーション: 最初から完全な関数を構築し、それより低いバージョンのブラウザーと互換性を持たせます<br><br><br>18. CSS セレクターとは何ですか? <br><br>1) ワイルドカードセレクター *<br>2) タイプセレクター/要素セレクター a<br>3) 属性セレクター input[type="button"]4) セレクター p.code を含む<br>5) サブオブジェクトセレクター ul.test>li<br> 6) ID セレクター #<br>7) クラス セレクター .<br>8) グループ セレクター body,ul,li<br>9) <br>疑似クラス<br> と疑似オブジェクト セレクター p<br>:first-letter<br> a<br>:hover<a href="http://www.php.cn/code/6014.html" target="_blank"></a>10) 隣接selector li+li<a href="http://www.php.cn/wiki/970.html" target="_blank"></a>19. アニメーションとトランジションの違いは同じで、どちらも要素の属性値が時間の経過とともに変化します。 <a href="http://www.php.cn/wiki/966.html" target="_blank"></a>違い: トランジションは、時間の経過とともに <a href="http://www.php.cn/php/php-tp-incident.html" target="_blank"></a>css プロパティを変更する前に、<br> イベント<br> (ホバー イベントやクリック イベントなど) をトリガーする必要があります。アニメーションは、イベントをトリガーせずに時間の経過とともに明示的に変更することもできます。 <a href="http://www.php.cn/code/9595.html" target="_blank">アニメーション</a>効果を実現するには要素 css を使用する必要があります。css3 アニメーションには明確なアニメーション属性値が必要です。 <br><br>20. 標準の<a href="http://www.php.cn/code/6444.html" target="_blank">ボックスモデル</a>と奇妙なボックスモデルとは何ですか。 2 つの違い、奇妙なボックス モデルと標準の合計モデルの実装方法 <br><br>標準のボックス モデル: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> <br>奇妙なボックス モデル: content<br><br> <br><br>奇妙なボックスモデルの実装: box-sizing: border-box<br>標準のボックスモデル: box-sizing:content-box<br><br><br> 21. 要素を上、下、左の中央に配置する方法そして親要素<br><br>1.<br>css内で: <br>.box{display:flex;width:800px;height:<a href="http://www.php.cn/code/4221.html" target="_blank">300</a>px;just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content:center}<br>.box p{align-self :center}<br><br>html:<br><p class= "box"><br> <p></p><br></p><br><br>2.<br>css:<br>.box{display:flex;width :800px;height:800px;justify-content:center; align-items:center;}<br>html:<br><p class="box"><br> <p></p><br></p> <br><br>22. ビデオとオーディオの一般的に使用される形式は何ですか<br>video<a href="http://www.php.cn/code/6707.html" target="_blank">の場合: video/ogg video/mp4 video/webm </a>audio<a href="http://www.php.cn/code/6093.html" target="_blank">の場合: audio/ogg audio/mpeg</a><br>23. 属性と属性について簡単に説明します。 <br>フレックスボックスモデル<a href="http://www.php.cn/code/10723.html" target="_blank">の値 (少なくとも6つの属性を記述します) </a><br>display:flex;<br>flex-<br>direction<a href="http://www.php.cn/wiki/873.html" target="_blank">:</a>justify-content:<br>align-items:<br>align-self:<br>align-content:<br> flex-wrap:<br><br>23. 線形性の簡単な説明 グラデーション、放射状グラデーション、繰り返しグラデーションの使用法<br><br>線形グラデーション: Linear-gradient()<br>放射状グラデーション: Radial-gradient()<br>繰り返し線形グラデーション: 繰り返し線形-gradient()<br>放射状グラデーションの繰り返し:repeat-radial-gradient()<br><br>24.アニメーションの使い方を簡単に紹介します<br><br>アニメーションは2つの部分で構成されています:アニメーション: アニメーション名 アニメーション実行時間 アニメーションタイプ アニメーション遅延時間 アニメーション繰り返し数 アニメーション方向; @<br>key<a href="http://www.php.cn/wiki/1051.html" target="_blank">フレームアニメーション名</a><br> 25. css3Dの主な属性と属性値 <br>1. オブジェクトを大きく見せたい場合は、値を小さく設定します。オブジェクトを小さく表示したい場合は、値を大きく設定します<br><br>2. 3D ステージ:transform-style:preserve-3d;<br><br>3.translateZ()rotateZ()scaleZ()<br><br>26. 2Dでは<br><br>transform:translate()rotate()skew()scale()<br>transform-origin:<br><br>27.トランジションアニメーションの属性と属性値を簡単に紹介します<br><br>transition:属性名(<br>allを使用可能) <a href="http://www.php.cn/wiki/1483.html" target="_blank">) アニメーション実行時間 アニメーションの種類 アニメーション遅延時間 </a><br>28、css3 の新しい <br>background 属性<a href="http://www.php.cn/code/6021.html" target="_blank"></a><br><br>background-origin<a href="http://www.php.cn/code/865.html" target="_blank">: 背景の原点 </a><br>background-clip<a href="http://www.php.cn/code/868.html" target="_blank">: 背景クリッピング </a><br>background-size<a href="http://www.php.cn/code/872.html" target="_blank">: </a>the背景画像<a href="http://www.php.cn/code/8294.html" target="_blank"></a>のサイズは以下の通りですbackground-size<br><br>length<br>の3つの値は背景画像のサイズを指定します。最初の値は幅、2 番目の値は高さです。 <br><br>パーセンテージ(%)<br>背景画像のサイズをパーセンテージで設定します<br><br>cover<br>背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します<br> <br><br><br>29 5つの中核を書きます。主要ブラウザと代表作品<br><br>*Trident: IE、Maxthon、Tencent、Theworld、360ブラウザ<br><br>*Gecko:: 代表作品Mozilla Firefoxはオープンソースです<br><br>*Webkit: 代表作品Safari、Chrome、オープンソースですプロジェクト。 <br><br>*Presto：代表作Opera、PrestoはOpera Softwareが開発したブラウザレイアウトエンジンです。世界最速のレンダリング エンジンとしても認められています。 <br><br>※Blink：GoogleとOpera Softwareが開発し、2013年4月にリリースされたブラウザレイアウトエンジン。 <br><br>30. IE6 の一般的なバグと解決策をいくつか書き留めます (少なくとも 4 つ) <br><br>1) 画像に境界線がある 解決策: border:0; または border:0 none を追加します <br><br>2. ) 解決策: 表示: inline<br><br>3、デフォルトの高さ (IE6、IE7) 解決策: 要素にステートメントを追加します: font-size:0; 解決策 2: 要素にステートメントを追加します: overflow:hidden;<br> <br>4.ボタン要素のデフォルトのサイズが異なります。 解決策: <br><br>31 をシミュレートするタグを使用します。 IE の <a href="http://www.php.cn/code/120.html" target="_blank">フィルター</a> とは何ですか? <br><br>1, _ 下線属性フィルター <br>2, 9: IE バージョン認識; 他のブラウザーは認識しません 構文: selector {属性: 属性値 9;}<br>3,</article><p>以上がhtml 面接でよくある 5 つの質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>関連ラベル：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ja/search?word=htmlcss" target="_blank">Html/css</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">ソース：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="http://www.php.cn/ja/faq/359949.html" title="cssの複数行省略記号互換の書き方">
                        <span>前の記事：cssの複数行省略記号互換の書き方</span>
                    </a>
                                    <a href="http://www.php.cn/ja/faq/359951.html"  title="モバイルに最適なフォント サイズ設定">
                        <span>次の記事：モバイルに最適なフォント サイズ設定</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">このウェブサイトの声明</div>
                <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div>
            </div>
           <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">著者別の最新記事</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796629438.html">コーディングの鍵: 初心者のための C の力を解き放つ</a>
                            </div>
                            <div>2024-10-13 11:44:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796629203.html">PHP と MySQL を使用して Web サイトをデータベースに接続する</a>
                            </div>
                            <div>2024-10-13 09:56:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627843.html">Python による問題解決: 初心者プログラマーとして強力なソリューションをアンロックする</a>
                            </div>
                            <div>2024-10-11 20:58:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627712.html">Python Power、簡略化: 初心者に優しいプログラミングのアプローチ</a>
                            </div>
                            <div>2024-10-11 16:53:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627515.html">PHP とソーシャル メディア: ウェブサイトを世界と統合する</a>
                            </div>
                            <div>2024-10-11 11:54:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627348.html">PHP を使用したダイナミック イメージ ギャラリー: オンラインで作品を紹介します</a>
                            </div>
                            <div>2024-10-10 16:21:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627317.html">PHP を使用して API と Web サービスを構築する</a>
                            </div>
                            <div>2024-10-10 15:18:02</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627273.html">Java の謎を解く: 新人プログラマーのための明確で簡単な道</a>
                            </div>
                            <div>2024-10-10 13:34:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627270.html">C でゲームとグラフィックを作成する: 楽しくて実践的な入門</a>
                            </div>
                            <div>2024-10-10 13:26:26</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ja/faq/1796627154.html">「Glory of Kings」でチェン・ヤオジンを演じるにはどうすればよいですか?</a>
                            </div>
                            <div>2024-10-10 11:38:42</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">最新の問題</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ja/wenda/176405.html"  target="_blank" title="CSS マインド マッピングに関するコースウェアはどこにありますか?" class="wdcdcTitle">CSS マインド マッピングに関するコースウェアはどこにありますか?</a>
                            <a href="http://www.php.cn/ja/wenda/176405.html" class="wdcdcCons">コースウェア</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> から 2024-04-16 10:10:18</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>0</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1335</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ja/wenda/176403.html"  target="_blank" title="PX から REM への自動変換エラー" class="wdcdcTitle">PX から REM への自動変換エラー</a>
                            <a href="http://www.php.cn/ja/wenda/176403.html" class="wdcdcCons"><style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> から 2024-04-16 09:34:16</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>0</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>4687</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ja/wenda/176396.html"  target="_blank" title="ページが突然 CSS またはブートストラップを取得できなくなります" class="wdcdcTitle">ページが突然 CSS またはブートストラップを取得できなくなります</a>
                            <a href="http://www.php.cn/ja/wenda/176396.html" class="wdcdcCons">それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> から 2024-04-06 21:58:04</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>800</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ja/wenda/176389.html"  target="_blank" title="Javafx でインライン CSS スタイルを動的に変更する" class="wdcdcTitle">Javafx でインライン CSS スタイルを動的に変更する</a>
                            <a href="http://www.php.cn/ja/wenda/176389.html" class="wdcdcCons">アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> から 2024-04-06 20:57:16</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>487</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ja/wenda/176388.html"  target="_blank" title="CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか?" class="wdcdcTitle">CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか?</a>
                            <a href="http://www.php.cn/ja/wenda/176388.html" class="wdcdcCons">片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> から 2024-04-06 20:45:26</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>2</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>386</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>関連トピック</div>
                    <a href="http://www.php.cn/ja/faq/zt" target="_blank">詳細>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/jsjyyly"><img src="https://img.php.cn/upload/subject/202407/22/2024072214192342486.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="コンピュータ応用分野" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/jsjyyly" class="title-a-spanl" title="コンピュータ応用分野"><span>コンピュータ応用分野</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/nullpointerex"><img src="https://img.php.cn/upload/subject/202407/22/2024072214075044480.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="nullpointerException 例外" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/nullpointerex" class="title-a-spanl" title="nullpointerException 例外"><span>nullpointerException 例外</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/pdkcybkc"><img src="https://img.php.cn/upload/subject/202407/22/2024072214152580049.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="PD急速充電と一般的な急速充電の違い" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/pdkcybkc" class="title-a-spanl" title="PD急速充電と一般的な急速充電の違い"><span>PD急速充電と一般的な急速充電の違い</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/qcfddfsynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213300017514.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="フロートをクリアするにはどのような方法がありますか?" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/qcfddfsynx" class="title-a-spanl" title="フロートをクリアするにはどのような方法がありますか?"><span>フロートをクリアするにはどのような方法がありますか?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/dnxs651cwdmjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212280556057.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="コンピューターディスプレイエラーコード651の解決策" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/dnxs651cwdmjj" class="title-a-spanl" title="コンピューターディスプレイエラーコード651の解決策"><span>コンピューターディスプレイエラーコード651の解決策</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/ltdnrhgxdyj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213281166202.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="2 台のコンピュータ間でプリンタを共有する方法" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/ltdnrhgxdyj" class="title-a-spanl" title="2 台のコンピュータ間でプリンタを共有する方法"><span>2 台のコンピュータ間でプリンタを共有する方法</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/linuxckdksgkf"><img src="https://img.php.cn/upload/subject/202407/22/2024072212241252679.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Linuxでポートが開いているかどうかを確認する" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/linuxckdksgkf" class="title-a-spanl" title="Linuxでポートが開いているかどうかを確認する"><span>Linuxでポートが開いているかどうかを確認する</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ja/faq/sqlprocedurey"><img src="https://img.php.cn/upload/subject/202407/22/2024072212282144846.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="SQLプロシージャ構文エラーの解決策" /> </a>
                            <a target="_blank" href="http://www.php.cn/ja/faq/sqlprocedurey" class="title-a-spanl" title="SQLプロシージャ構文エラーの解決策"><span>SQLプロシージャ構文エラーの解決策</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">人気のおすすめ</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="URLってどういう意味ですか？" href="http://www.php.cn/ja/faq/418772.html">URLってどういう意味ですか？</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="DOM とはどういう意味ですか?" href="http://www.php.cn/ja/faq/414303.html">DOM とはどういう意味ですか?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="画像サイズを変更する方法" href="http://www.php.cn/ja/faq/414252.html">画像サイズを変更する方法</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="HTMLでフォントを太字にする方法" href="http://www.php.cn/ja/faq/414520.html">HTMLでフォントを太字にする方法</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="HTML画像のサイズを設定する方法" href="http://www.php.cn/ja/faq/475145.html">HTML画像のサイズを設定する方法</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>人気のチュートリアル</div>
                <a target="_blank" href="http://www.php.cn/ja/course.html">詳細>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a>
                                    <div class="wzrthreerb">
                                        <div>1417480 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ja/course/74.html" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ" href="http://www.php.cn/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a>
                                    <div class="wzrthreerb">
                                        <div>4258670 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="74">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a>
                                    <div class="wzrthreerb">
                                        <div>2483968 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a>
                                    <div class="wzrthreerb">
                                        <div>504162 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ja/course/2.html" title="PHP ゼロベースの入門チュートリアル" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP ゼロベースの入門チュートリアル"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP ゼロベースの入門チュートリアル" href="http://www.php.cn/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a>
                                    <div class="wzrthreerb">
                                        <div>858791 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="2">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a>
                                <div class="wzrthreerb">
                                    <div >1417480 回の学習</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a>
                                <div class="wzrthreerb">
                                    <div >2483968 回の学習</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a>
                                <div class="wzrthreerb">
                                    <div >504162 回の学習</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="http://www.php.cn/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a>
                                <div class="wzrthreerb">
                                    <div >215346 回の学習</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="http://www.php.cn/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a>
                                <div class="wzrthreerb">
                                    <div >878900 回の学習</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/1648.html" title="[Web フロントエンド] Node.js クイック スタート" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイック スタート"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[Web フロントエンド] Node.js クイック スタート" href="http://www.php.cn/ja/course/1648.html">[Web フロントエンド] Node.js クイック スタート</a>
                                <div class="wzrthreerb">
                                    <div >6537 回の学習</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="http://www.php.cn/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a>
                                <div class="wzrthreerb">
                                    <div >5109 回の学習</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Go言語実践GraphQL" href="http://www.php.cn/ja/course/1646.html">Go言語実践GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4282 回の学習</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="http://www.php.cn/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a>
                                <div class="wzrthreerb">
                                    <div >635 回の学習</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="http://www.php.cn/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a>
                                <div class="wzrthreerb">
                                    <div >21804 回の学習</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>最新のダウンロード</div>
                <a href="http://www.php.cn/ja/xiazai">詳細>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">ウェブエフェクト <div></div></div>
                    <div class="swiper-slide" data-id="twof">公式サイト<div></div></div>
                    <div class="swiper-slide" data-id="threef">サイト素材<div></div></div>
                    <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery エンタープライズ メッセージ フォームの連絡先コード" href="http://www.php.cn/ja/toolset/js-special-effects/8071">[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 MP3 オルゴール再生効果" href="http://www.php.cn/ja/toolset/js-special-effects/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果" href="http://www.php.cn/ja/toolset/js-special-effects/8069">[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード" href="http://www.php.cn/ja/toolset/js-special-effects/8068">[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="VUE.JS 模倣 Kugou 音楽プレーヤー コード" href="http://www.php.cn/ja/toolset/js-special-effects/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="古典的な HTML5 プッシュ ボックス ゲーム" href="http://www.php.cn/ja/toolset/js-special-effects/8066">[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="画像効果を追加または削減するための jQuery スクロール" href="http://www.php.cn/ja/toolset/js-special-effects/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="CSS3 個人アルバム カバー ホバー ズーム効果" href="http://www.php.cn/ja/toolset/js-special-effects/8064">[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8323" title="オンライン電子書籍ストア モールのウェブサイト テンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8322" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3078"  target="_blank"  title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3077"  target="_blank"  title="4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3076"  target="_blank"  title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3075"  target="_blank"  title="金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3074"  target="_blank"  title="黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3073"  target="_blank"  title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3072"  target="_blank"  title="フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)">[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-materials/3071"  target="_blank"  title="9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8328"  target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8327"  target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8326"  target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8325"  target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8324"  target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8323"  target="_blank" title="オンライン電子書籍ストア モールのウェブサイト テンプレート">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8322"  target="_blank" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ja/toolset/website-source-code/8321"  target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p>
        </div>
        <div class="footermid">
            <a href="http://www.php.cn/ja/about/us.html">私たちについて</a>
            <a href="http://www.php.cn/ja/about/disclaimer.html">免責事項</a>
            <a href="http://www.php.cn/ja/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>