Webフロントエンドの常識を学ぶための詳細な紹介

1. 一般的なブロックレベル要素 インライン要素

p - 最も一般的に使用されるブロックレベル要素

dl - dt-dd で使用されるブロックレベル要素

form - インタラクティブフォーム

h1 -h6-largeタイトル

hr - 水平区切り線

ol - 順序付きリスト

p - 段落

ul - 順序なしリスト

fieldset - フォームフィールドセット

Colgroup-col - フォーム列グループ化要素

table-tr- td テーブル行 - セル

事前にフォーマットされたテキスト

a - ハイパーリンク (アンカー)

br - 改行

i - イタリック体

em - 強調

img - 画像

input - 入力ボックス

ラベル - フォームラベル

スパン - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義

Strong - 太字の強調

sub - 下付き文字

sup - 上付き文字

textarea - 複数行のテキスト入力ボックス

u - 下線

選択 - プロジェクト選択

2. 3つのテキストを実現するためのいくつかの条件

text-overflow属性は、テキストがオーバーフローしたときに省略マークを表示するかどうかだけであり、効果を達成するための他のスタイルの属性定義はありません。オーバーフロー時に楕円を生成するには、次のように定義する必要があります:

1. コンテナの幅: width: value; (px、%、両方を使用できます)

2. テキストを 1 行で表示するように強制します: white - space：nowrap;

3. オーバーフロー コンテンツは非表示になります: overflow: hidden;

4. オーバーフロー テキストには省略記号が表示されます: text-overflow: ellipsis;

注: オーバーフローを設定するには 1 行のテキストである必要があります。この記事の！ ！ ！

IE6+; chrome1.0+; safari3.1+ (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

置換要素と非置換要素

a) 置換要素: ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。 たとえば、ブラウザは画像情報を読み取り、 タグの src 属性の値に基づいて表示しますが、(x)html コードを表示すると、画像の実際の内容は表示されません。 タグのタイプ。入力ボックスやラジオ ボタンなどを表示するかどうかを決定します。 HTML の (x)、、、<select> はすべて置換要素です。これらの要素には実際のコンテンツがない、つまり空の要素であることがよくあります。 </p> <p style="text-align: left;">置換要素は表示内にボックスを生成します。これが、一部のインライン要素 (img、input) で幅と高さを設定できる理由です。 </p> <p style="text-align: left;">b) 置換不可能な要素 (置換不可能な要素): (x) html のほとんどの要素は置換不可能な要素です。つまり、その内容はユーザー (ブラウザなど) に直接表示されます。 </p> <p style="text-align: left;">5. スプライトとは何ですか?利点は何ですか? </p> <p style="text-align: left;">画像の統合、小さな単一の背景画像を 1 つの大きな背景画像に統合します。 </p> <p style="text-align: left;">画像統合の利点: 1) 画像統合によりサーバーへのリクエスト数が削減され、ページの読み込み速度が向上します。 2) 画像を統合してサイズを小さくします。 </p> <p style="text-align: left;">6. <a href="http://www.php.cn/code/5005.html" target="_blank">CSSカスケード</a>スタイルシートとは何ですか?優先アルゴリズムはどのように計算されますか? </p> <p style="text-align: left;">a. 重要性とソースの優先順位は、低いものから高いものまで次のとおりです: </p> <p style="text-align: left;">1) ブラウザのデフォルトのスタイル </p> <p style="text-align: left;">2) <a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id....セレクターの重み </p> <p style="text-align: left;">3) 行間スタイル </p> <p style="text-align: left;">4)インラインまたは外部 (書き込み順序) </p> <p style="text-align: left;">5) !重要 最高の</p> <p style="text-align: left;">7. display:none と <a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden の違い</p> <p style="text-align: left;"> 前者: スペースを占有せずに非表示にする 後者: 非表示にするが、位置を占有する </p> <p style="text-align: left;">8 , <a href="http://www.php.cn/code/6440.html" target="_blank"> float をクリアするいくつかの方法 </a></p>hack1: 親要素に宣言 overflow:hidden を追加します <p style="text-align: left;"></p>hack2: 親要素に高さを追加します <p style="text-align: left;"></p>hack3: float 要素の下に空の p を追加し、This 要素を与えます宣言を追加します: p{clear:both; height:0; overflow:hidden;}<p style="text-align: left;"></p>hack4: ユニバーサルクリアフローティングメソッド p:"."; :hidden;visibility:hidden;}<p style="text-align: left;"></p>9. どのような属性を継承できますか? <p style="text-align: left;"></p>1) テキスト関連: font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word -spacing<p style="text-align: left;"></p>2) リスト関連: list-style-image、list-style-position、list-style-type、list-style<p style="text-align: left;"></p>3) 色関連: color<p style="text-align: left;"></p>4) 透明度(子要素は継承されます)祖先要素の不透明度ですが、変更することはできません)<p style="text-align: left;"></p>注: font-size は、比率ではなく、親要素のサイズを継承します。 line-height 親要素がパーセント値またはピクセル値の場合、子要素は親要素と同じになります。 親要素が標準または数値の場合、子要素の行の高さは子のフォントサイズになります。要素に数値を乗算します。 <p style="text-align: left;"></p>10. 配置方法<p style="text-align: left;"></p>position 属性値: <p style="text-align: left;">static<a href="http://www.php.cn/wiki/188.html" target="_blank">、relative、absolute、fixed</a></p>1) static<p style="text-align: left;">static はドキュメントフロー内に配置され、</p>トップに表示されます。要素の <p style="text-align: left;">bottom<a href="http://www.php.cn/wiki/904.html" target="_blank">、</a>left<a href="http://www.php.cn/wiki/906.html" target="_blank">、</a>right<a href="http://www.php.cn/wiki/907.html" target="_blank"> 属性は無視されます。 </a>z-index<a href="http://www.php.cn/wiki/905.html" target="_blank"> 属性は常に 0 です。</a><a href="http://www.php.cn/wiki/903.html" target="_blank">2) 相対</a></p>相対位置決め、ドキュメント フロー内の要素が占める位置とサイズを保持し、相対移動距離は左/右/上/によって決まります。位置は保持されます<p style="text-align: left;"></p>3) 絶対<p style="text-align: left;"></p> <p style="text-align: left;">絶対配置</p>、オブジェクトをドキュメントフローから切り離し、left/right/top/bottom などの属性を使用して、最も近い親要素を基準とした絶対配置を実行します位置設定を使用します。そうでない場合は、ボディオブジェクトに基づきます <p style="text-align: left;"></p> <p style="text-align: left;">4) fixed</p> <p style="text-align: left;">fixed は絶対値と似ていますが、ウィンドウの左上隅を基準とした相対値であり、ドキュメントと一緒にスクロールしません。ただし、マルチフレーム ページ内の場合は、ブラウザの左上隅ではなく、フレームの左上隅を基準とします。 </p> <p style="text-align: left;">11. リンクと @import の違いは何ですか? </p> <p style="text-align: left;">1. 先祖の違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。 </p> <p style="text-align: left;">2. link タグは、CSS のロードに加えて、<a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a> の定義、rel 接続属性の定義など、他の多くのことも行うことができます。 @import は CSS </p> <p style="text-align: left;"> のロードのみを行うことができます。3. ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。そのため、@import が CSS を読み込むページを閲覧すると、スタイルが表示されないことがあります (ちらつくだけです) </p> <p style="text-align: left;">4. 互換性の違い。 @import は CSS2.1 で提案されたものなので、古いブラウザではサポートされていません。 @import は IE5 以降でしか認識できませんが、リンクタグではこの問題は発生しません。 5. dom を使用してスタイルを制御する場合の違い。 JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom で制御できないため、link タグのみを使用できます</p> <p style="text-align: left;">12 配置属性の値は何ですか?それぞれに価値はありますか？ </p> <p style="text-align: left;">各属性値の役割: </p> <p style="text-align: left;">static: デフォルト値。位置が静的に設定されている要素は、通常、ドキュメント フローによって指定された位置に常に表示されます (静的要素は、上、下、左、または右の宣言を無視します)。 </p> <p style="text-align: left;">absolute: 親要素の絶対位置を基準として、スペースを占有せず、その位置は最も近い位置にある親要素の位置を基準とします。 「left」、「top」、「right」、「bottom」のプロパティを直接指定できます。親が配置されていない場合は、html (ルート要素) が使用されます。 (重なり順 z-index: 値)</p> <p style="text-align: left;">relative: デフォルトの位置を基準としたオフセット位置です。左、上、右、下の値を設定することで、通常の位置 (開始位置の移動 [通常のレイアウト フローは中断されません] </p> <p style="text-align: left;">固定: ブラウザーを基準とした絶対位置。この要素の位置は、ブラウザー ウィンドウの指定された座標を基準にして配置できます。 、「top」、「right」、「bottom」属性は、ウィンドウがスクロールされているかどうかに関係なく、</p> <p style="text-align: left;">13. </p>html5<p style="text-align: left;"><a href="http://www.php.cn/wiki/1118.html" target="_blank"></a>ヘッダーナビゲーションに15個の新しい<a href="http://www.php.cn/php/php-tp-append.html" target="_blank">タグを書き込みます。フッター</a>メイン</p>サイド記事セクション図データリストビデオオーディオフィールドラベルキャプション<p style="text-align: left;"><a href="http://www.php.cn/wiki/646.html" target="_blank">1. ブロックレベルのフォーマットコンテキスト</a></p>2.垂直方向の <p style="text-align: left;">margin</p> が重ならないようにする (BFC を 2 つ入れる) <p style="text-align: left;"></p>3. ルート要素、<p style="text-align: left;">float<a href="http://www.php.cn/wiki/931.html" target="_blank"> 属性は none ではない、位置は絶対または固定、表示は inline-block、table-cell、table-caption、flex、 inline-flex、オーバーフローは表示されません</a></p>15、.px、em、rem、ptの違い<p style="text-align: left;"><a href="http://www.php.cn/wiki/919.html" target="_blank">1) pxは実際にはピクセルであり、pxを使用してフォントサイズを設定すると、より安定して正確になります</a> </p>しかし、この方法には問題があり、ユーザーがブラウザーで作成した Web ページを閲覧するときに、ブラウザーをズームすると Web<p style="text-align: left;">ページ レイアウト</p>が崩れてしまいます。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。 <p style="text-align: left;"></p>2) em はベースラインに基づいてフォント サイズを調整します <p style="text-align: left;"><a href="http://www.php.cn/code/7955.html" target="_blank"> em は親要素を基準にしてフォント サイズを設定するため、要素を設定するには、その親要素のサイズを知る必要がある場合があります。 </a></p>3) rem はルート要素のフォント サイズに相対して表示されます<p style="text-align: left;"></p>rem はルート要素 <html> に相対的です。つまり、ルート要素内の参照値を決定するだけで済みます<p style="text-align: left;"></p>4) pt のサイズ 1 インチの 1/72 に等しい<p style="text-align: left;"></p>ポンド: テキストとしての測定単位です<p style="text-align: left;"><p style="text-align: left;">この測定方法は印刷デザインの背景に由来しており、メディアに最適ですが、ディスプレイでも広く使用されています</p><p style="text-align: left;">16. 垂直方向と水平方向のセンタリングを実現する方法は何ですか? </p><p style="text-align: left;">1.p{幅:200px;高さ:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">背景</a>:#f00;位置:固定;左:0;右:0;上:0;下:0;余白:自動;}</p><p style="text-align: left;">2. p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}</p><p style="text-align: left;">17、プログレッシブエンハンスメントとグレースフルデグラデーション</p><p style="text-align: left;">段階的な強化: 最も基本的な機能を保証するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の機能を追加して、より良いユーザー エクスペリエンスを実現します。 </p><p style="text-align: left;"> グレースフル デグラデーション: 最初から完全な関数を構築し、それから下位バージョンのブラウザーと互換性を持たせます</p><p style="text-align: left;">18 CSS セレクターとは何ですか? </p><p style="text-align: left;">1) ワイルドカードセレクター *</p><p style="text-align: left;">2) タイプセレクター/要素セレクター a</p><p style="text-align: left;">3) 属性セレクター input[type="button"]</p><p style="text-align: left;">4) 含むセレクター p .code a</p><p style="text-align: left;">5 ) サブオブジェクトセレクター ul .test>li<p style="text-align: left;">6) ID セレクター #</p> <p style="text-align: left;">7) クラス セレクター .</p> <p style="text-align: left;">8) グループ セレクター body,ul,li</p> <p style="text-align: left;">9) <a href="http://www.php.cn/code/6014.html" target="_blank">疑似クラス</a> および疑似オブジェクト セレクター p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter</a> a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a></p> <p style="text-align: left;">10) 隣接セレクターli+li</p> <p style="text-align: left;">19、アニメーションとトランジションの違い</p> <p style="text-align: left;">同じ点: 時間の経過とともに要素の属性値が変化します。 </p> <p style="text-align: left;">の違い: トランジションは、</p> <p style="text-align: left;">css プロパティを時間の経過とともに変更する前に、イベント (ホバー イベントやクリック イベントなど) をトリガーする必要があります。アニメーションは、要素の属性値を変更することなく、時間の経過とともに明示的に変更することもできます。 CSS で <a href="http://www.php.cn/code/9595.html" target="_blank">アニメーション</a> 効果を実現するには、CSS3 アニメーションには明確なアニメーション属性値が必要です。 </p> <p style="text-align: left;">20. 標準の<a href="http://www.php.cn/code/6444.html" target="_blank">ボックスモデル</a>と奇妙なボックスモデルとは何ですか。 2 つの違い、奇妙なボックス モデルと標準和モデルの実装方法 </p> <p style="text-align: left;">標準ボックス モデル: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> </p> <p style="text-align: left;">奇妙なボックス モデル: content</p> <p style="text-align: left;">ボックスの幅を計算するとき、次の値を追加します追加せずにボーダーとパディングを他のものに</p> <p style="text-align: left;">奇妙なボックスモデルの実装: box-sizing: border-box</p> <p style="text-align: left;">標準のボックスモデル: box-sizing:content-box</p> <p style="text-align: left;"> 21. 要素を上下左右に中央揃えする方法親要素内に直接配置します</p> <p style="text-align: left;">css:</p> <p style="text-align: left;"> .box{display:flex;width:800px;height:300px;justify-content:center}</p> <p style="text-align: left;">.box p{align-self:center}</p> <p style="text-align: left;">html:</p> <p style="text-align: left;"><p class="box"></p> <p style="text-align: left;"> <p></p></p> <p style="text-align: left;"></p></p> <p style="text-align: left;">22. ビデオとオーディオの一般的に使用される形式は何ですか</p> <p style="text-align: left;"> ビデオの場合: video/ <a href="http://www.php.cn/code/6093.html" target="_blank">audio</a>のogg video/mp4 video/webm: audio/ogg audio/mpeg</p> <p style="text-align: left;">23. <a href="http://www.php.cn/code/10723.html" target="_blank">フレックスボックスモデル</a>の属性と属性値を簡単に説明します(少なくとも6つの属性を記述します)</p> <p style="text-align: left;">display:flex ;</p> <p style="text-align: left;">flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>:</p> <p style="text-align: left;">justify-content:</p> <p style="text-align: left;">align-items:</p> <p style="text-align: left;">align-self:</p> <p style="text-align: left;">align-content:</p> <p style="text-align: left;">flex-wrap:</p> <p style="text-align: left;"> 23 線形グラデーションの使用法を簡単に紹介します。 、放射状グラデーション、および反復グラデーション</p> <p style="text-align: left;">線形グラデーション: Linear-gradient()</p> <p style="text-align: left;">放射状グラデーション:radial-gradient()</p> <p style="text-align: left;">繰り返し線形グラデーション:repeat-linear-gradient()</p> <p style="text-align: left;">繰り返し放射状グラデーション:repeat-radial-gradient()</p> <p style="text-align: left;"> 24.アニメーションの使い方を簡単に紹介します</p> <p style="text-align: left;">アニメーション で構成されています。 2 つの部分: アニメーション: アニメーション名、アニメーションの実行時間、アニメーションの種類、アニメーションの遅延時間、アニメーションの繰り返し時間、アニメーションの方向; @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames アニメーション名</p> <p style="text-align: left;">25。 1. 被写界深度: perspactive :number; オブジェクトを大きく表示したい場合は、値を小さく設定します</p> <p style="text-align: left;">2. - 3d;</p> <p style="text-align: left;">3.transformZ()rotateZ()scaleZ()</p> <p style="text-align: left;">26.2Dの主な属性</p> <p style="text-align: left;">transform:translate()rotate()skew()scale()</p> <p style="text-align: left;">transform-origin:</p> <p style="text-align: left;"> 27トランジションアニメーションの属性と属性値を簡単に紹介します</p> <p style="text-align: left;">transition: 属性名(</p>all<p style="text-align: left;">を使用できます) アニメーションの実行時間の種類 アニメーションの遅延時間<a href="http://www.php.cn/wiki/1483.html" target="_blank"></a>28のcss3</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6021.html" target="_blank">。 background-origin</a>: 背景の原点</p> <p style="text-align: left;"><a href="http://www.php.cn/code/865.html" target="_blank">background-clip</a>: 背景のクリッピング</p> <p style="text-align: left;"><a href="http://www.php.cn/code/868.html" target="_blank">background-size</a>: </p>背景画像のサイズ<p style="text-align: left;"><a href="http://www.php.cn/code/872.html" target="_blank"></a>background-size<a href="http://www.php.cn/code/8294.html" target="_blank">の3つの値は以下の通りです</a>length</p> <p style="text-align: left;"> 背景画像のサイズ。最初の値は幅、2 番目の値は高さです。 </p> <p style="text-align: left;">パーセンテージ(%)</p> <p style="text-align: left;">背景画像のサイズをパーセンテージで設定します</p> <p style="text-align: left;">cover</p> <p style="text-align: left;">背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します</p> <p style="text-align: left;">29 5つの中核を書きます。主要なブラウザと代表作品</p> <p style="text-align: left;">*Trident: IE、Maxthon、Tencent、Theworld、360ブラウザ</p> <p style="text-align: left;">*Gecko:: 代表作品Mozilla Firefoxはオープンソースです</p> <p style="text-align: left;">*Webkit: 代表作品Safari、Chrome、オープンソースですプロジェクト。 </p> <p style="text-align: left;">*Presto：代表作Opera、PrestoはOpera Softwareが開発したブラウザレイアウトエンジンです。世界最速のレンダリング エンジンとしても認められています。 </p> <p style="text-align: left;">*Blink: Google と Opera Software によって開発され、2013 年 4 月にリリースされたブラウザ レイアウト エンジン。 </p> <p style="text-align: left;">30. IE6 の一般的なバグと解決策をいくつか書き留めます (少なくとも 4 つ) </p> <p style="text-align: left;">1) 画像に境界線があるバグの解決策: border:0; または border:0 none を追加します。 : 表示: inline</p> <p style="text-align: left;">3、デフォルトの高さ (IE6、IE7) 解決策: 要素にステートメントを追加します: font-size:0; 解決策 2: 要素にステートメントを追加します: overflow:hidden;</p> <p style="text-align: left;">4。ボタン要素のサイズが異なります。 解決策: </p> <p style="text-align: left;">31 をシミュレートするにはタグを使用します。 IE の </p>フィルター<p style="text-align: left;"> とは何ですか? </p> <p style="text-align: left;">1, _ 下線属性フィルター </p> <p style="text-align: left;">2, 9: IE バージョン認識; 他のブラウザーは認識しない 構文: selector {属性: 属性値 9;}<a href="http://www.php.cn/code/120.html" target="_blank"></a>3,</p><p>以上がWebフロントエンドの常識を学ぶための詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="ブートストラップIE8互換処理の使い方" href="http://m.php.cn/ja/faq/358069.html">ブートストラップIE8互換処理の使い方</a></span><span>次の記事：<a class="dBlack" title="ブートストラップIE8互換処理の使い方" href="http://m.php.cn/ja/faq/358073.html">ブートストラップIE8互換処理の使い方</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1796683485.html" title="CSS3 トランジションと jQuery アニメーション: iPad HTML5 アプリではどちらが高速ですか?" class="aBlack">CSS3 トランジションと jQuery アニメーション: iPad HTML5 アプリではどちらが高速ですか?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1796683492.html" title="CSS 疑似要素にホバー効果を作成するにはどうすればよいですか?" class="aBlack">CSS 疑似要素にホバー効果を作成するにはどうすればよいですか?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1796683504.html" title="コンテンツを重複させずに 2 色のテキストを使用できますか?" class="aBlack">コンテンツを重複させずに 2 色のテキストを使用できますか?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1796683505.html" title="Windows と Mac でフォントのレンダリングが異なるのはなぜですか?" class="aBlack">Windows と Mac でフォントのレンダリングが異なるのはなぜですか?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1796683506.html" title="テーブル構造内の不要なギャップを削除するにはどうすればよいですか?" class="aBlack">テーブル構造内の不要なギャップを削除するにはどうすればよいですか?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>