84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
Placeholder (プレースホルダー) は HTML5 の新しい HTML 属性で、入力フィールドの期待値に関するプロンプト情報を提供するために使用されます。これは主流のブラウザーで広くサポートされており、使用方法は非常に簡単です:
この属性は次のとおりです。 </code>複数行のテキスト ボックスと、属性値が text、password、search、tel、url、または email などである <code><input></code>に適しています。 > <code><textarea></code>多行文本框和 <code>type</code>属性值为 text, password, search, tel, url 或者 email 等的 <code><input></code>。 <p></p><p> <img src="https://img.php.cn/upload/article/000/000/194/66eda5290ea819ebfa483cfd04ac08b5-0.png" alt="HTML5 プレースホルダー属性の詳細な紹介"> <p></p> <h3>自定义样式</h3><p>如果想改变 HTML5 プレースホルダー属性の詳細な紹介 的默认呈现样式，应该使用 <code>::HTML5 プレースホルダー属性の詳細な紹介</code>伪元素选择器，不过当前还没有浏览器支持，因此只能根据不同浏览器的不同实现方式分别定义： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* Chrome/Safari/Opera */ color: green;}::-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 19+ */ color: green;}:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* IE 10+ 注意这里只有一个冒号 */ color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>为什么样式要分别定义呢，如果像下面这样组合到一起： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介,::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>不应该把针对不同浏览器的选择器写在一起，这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然，像类似 IE 7 这种具有超强错误处理能力的浏览器除外，不过这里和 IE 7 没什么关系)。 <p></p> <h3>Firefox 定义方式的改变</h3><p>如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 4 - 18 */ color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>因为从 Firefox 19 开始一个冒号的伪类定义方式 <code>:-moz-HTML5 プレースホルダー属性の詳細な紹介</code>被废弃了，切换为两个冒号的伪元素定义方式。与此同时，它还添加了一个默认的 <code>opacity: 0.54</code>不透明度样式，如果需要，可以覆盖掉该样式，否则文字是半透明的： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green; opacity: 1;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <h3>伪类和伪元素</h3><p>伪类和伪元素有什么区别呢？伪类可以理解为给某个元素添加了一个类，比如 <code>:first-child</code>伪类，选择第一个子元素： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p:first-child { font-size: 16px;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>也可以理解为元素当前的状态，同样也可以通过添加一个真正的 class 来实现类似效果： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p.first-child { font-size: 16px;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>无论是伪类还是真正的类，样式都是直接添加到 <code><p></code>元素上的。 <p></p><p>而伪元素可以理解为添加了一个虚拟的元素。比如 <code>p:before</code>伪元素，可以像下面这个伪代码这样理解： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;"><before>p:before</before><p>paragraph</p></pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>这里 <code><p></code>元素和 <code>p:before</code>可以理解为是两个不同的元素。如果被绕晕了，没关系，毕竟这不是本文的重点，更多伪元素与伪类的信息可以参考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN <p></p> <h3>关于伪类选择器引发的问题</h3><p>因为 IE 浏览器使用的是伪类 <code>:-ms-input-HTML5 プレースホルダー属性の詳細な紹介</code>选择器来定义 HTML5 プレースホルダー属性の詳細な紹介 的样式，实际上样式是作用于文本输入框的，如果另外还有针对文本输入框的选择器特殊性更高的样式规则，将会覆盖掉该样式，参考下面代码： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 1, 1 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>注释中的数字用来表示该选择器的特殊性。 <p></p><p>上面两个样式规则当中使用 ID 选择器的特殊性更高，所以在 IE 10/11 中测试会看到 HTML5 プレースホルダー属性の詳細な紹介 显示为蓝色，与期望的有点不一样。同样使用伪类选择器的旧版本 Firefox 也会出现这个问题，因此，在书写样式的时候需要特别注意，实在搞不定，别忘了还有 <code>!important</code>规则可以用。其它使用两个冒号的伪元素选择器的浏览器不会出现这个问题，例如： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 0, 2 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>上面两个样式规则互相之间不会影响，使用 Chrome 测试 HTML5 プレースホルダー属性の詳細な紹介 的颜色为绿色。 <p></p><p>关于选择器的特殊性可以参考拙作CSS选择器特殊性与重要性。 <p></p> <h3>让行为保持一致</h3><p>虽然样式是可以自定义了，不过在行为上还有些差异，在 Chrome 和 Firefox 中当文本输入框输入内容时 HTML5 プレースホルダー属性の詳細な紹介 才会消失，清除内容时又会显示出来；而在 IE 中则是当文本输入框获取焦点时 HTML5 プレースホルダー属性の詳細な紹介 就消失了，失去焦点同时没有输入内容时才会重新显示。如果希望在 Chrome 和 Firefox 等浏览器中实现获取焦点就消失的效果，可以借助 <code>:focus</code>伪类选择器来将 HTML5 プレースホルダー属性の詳細な紹介 的文本颜色设置为透明： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>当文本输入框获取焦点时，HTML5 プレースホルダー属性の詳細な紹介 的颜色被设置为透明，感官上就好像消失一样。 <p></p> <h3>JavaScript</h3><p>获取或者修改 HTML5 プレースホルダー属性の詳細な紹介 的内容直接获取或者修改对应文本输入框的 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性的值就行了： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').attr('HTML5 プレースホルダー属性の詳細な紹介', 'Please enter your name');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>So easy，妈妈再也不用担心我写代码了。不过，想要像普通 DOM 元素那样通过 javaScript 获取伪元素对象直接操作估计很难，目前可以使用 <code>window.getComputedStyle()</code> <p></p> <img src="https://img.php.cn/upload/article/000/000/194/66eda5290ea819ebfa483cfd04ac08b5-0.png" alt="HTML5 プレースホルダー属性の詳細な紹介"><p> <h3>カスタム スタイル</h3> <p></p>プレースホルダーのデフォルトのレンダリング スタイルを変更したい場合は、 <code>::HTML5 プレースホルダー属性の詳細な紹介</code>疑似要素セレクターを使用する必要があります。ただし、現在ブラウザーはサポートされていないため、次に従って個別に定義することしかできません。異なるブラウザの異なる実装方法: <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">window.getComputedStyle(document.getElementById('username'), '::-moz-HTML5 プレースホルダー属性の詳細な紹介').getPropertyValue('color'); // "rgb(0, 255, 0)"</pre> <div class="contentsignin"> ログイン後にコピー </div> </div>スタイルを別々に定義する必要があるのはなぜですか? スタイルを次のように組み合わせる場合: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: red;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>異なるブラウザのセレクターを一緒に記述すべきではありません。これにより、ルール セット全体が認識できなくなります。無視されます (もちろん、スーパー エラー処理機能を備えた IE 7 のようなブラウザは除きますが、これは IE 7 とは関係ありません)。 <h3>Firefox 定義メソッドの変更</h3>古いバージョンの Firefox ブラウザと互換性を持たせる必要がある場合は、コロンを 1 つだけ含む次のスタイル ルールも追加する必要があります: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').addClass('style-2').removeClass('style-1');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>Firefox 19 以降では、コロン疑似クラスがあります。定義メソッド <code>:-moz-HTML5 プレースホルダー属性の詳細な紹介</code>は非推奨となり、2 つのコロンの疑似要素定義メソッドに切り替えられます。同時に、デフォルトの <code>opacity: 0.54</code>不透明度スタイルも追加されます。これは必要に応じてオーバーライドできます。それ以外の場合、テキストは半透明になります: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div> <h3>pseudo-class および pseudo-class要素</h3>疑似クラスと疑似要素の違いは何ですか?疑似クラスは、 <code>:first-child</code>疑似クラスなどの要素にクラスを追加し、最初の子要素を選択するものとして理解できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>は、の現在の状態としても理解できます。同様の効果は、実際のクラスを追加することで実現できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>疑似クラスであっても実際のクラスであっても、スタイルは <code><p></code>要素に直接追加されます。 。 擬似要素は、仮想要素を追加するものとして理解できます。たとえば、 <code>p:before</code>擬似要素は次の擬似コードのように理解できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">({}).toString.call(window.operamini) === '[object OperaMini]'</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div> <code><p></code>要素と <code>p:before は次のとおりです。</code>これは 2 つの異なる要素として理解できます。混乱している場合でも、それは問題ではありません。結局のところ、これはこの記事の焦点ではありません。疑似要素と疑似クラスの詳細については、「疑似クラス - MDN と疑似要素 -」を参照してください。 CSS | MDN <h3>疑似クラス セレクターについて 発生する問題</h3>IE ブラウザはプレースホルダーのスタイルを定義するために疑似クラス <code>:-ms-input-HTML5 プレースホルダー属性の詳細な紹介</code>セレクターを使用するため実際、スタイルはテキスト入力ボックスに適用されます。テキスト入力ボックスのセレクターに対してより高い特異性を持つ他のスタイル ルールがある場合、このスタイルは上書きされます。コメント内の は、セレクターの特異性を示すために使用されます。 上記 2 つのスタイル ルールのうち、ID セレクターを使用する方がより具体的であるため、IE 10/11 でテストすると、プレースホルダーが青色で表示され、予想とは少し異なることがわかります。この問題は、疑似クラス セレクターを使用する Firefox の古いバージョンでも発生するため、スタイルを記述するときに特に注意する必要があります。 <code>! important</ があることを忘れないでください。 code> 使用できるルール。 2 つのコロンを含む疑似要素セレクターを使用する他のブラウザーでは、この問題は発生しません。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">if (!('HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> 上記の 2 つのスタイル ルールは、相互に影響しません。Chrome を使用して、プレースホルダーの色が緑色であることをテストします。 セレクターの特殊性については、私の著作「CSS セレクターの特殊性と重要性」を参照してください。 <h3>動作の一貫性を保つ</h3> スタイルはカスタマイズできますが、Chrome と Firefox ではまだ動作にいくつかの違いがあり、テキスト入力ボックスにコンテンツが入力された場合にのみプレースホルダーが消えます。コンテンツがクリアされると表示されます。IE では、テキスト入力ボックスがフォーカスを取得するとプレースホルダーが消え、フォーカスを失ってコンテンツが入力されないと再表示されます。 Chrome や Firefox などのブラウザでフォーカスを取得した後に消える効果を実現したい場合は、 <code>:focus</code>擬似クラス セレクターを使用して、プレースホルダーのテキストの色を透明に設定できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) { this.value = ''; $this.removeClass('HTML5 プレースホルダー属性の詳細な紹介'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>テキスト入力ボックスにフォーカスが当たると、プレースホルダーの色が透明に設定され、視覚的に消えます。 <h3>JavaScript</h3>プレースホルダーのコンテンツを取得または変更するには、対応するテキスト入力ボックスの <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性の値を直接取得または変更するだけです: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介 if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); $this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>とても簡単です、お母さんはもう私がコードを書いたことを心配する必要はありません。ただし、通常の DOM 要素のように JavaScript から直接疑似要素オブジェクトを取得することは困難であると推定されており、現時点では <code>window.getComputedStyle()</code>メソッドを使用してそのスタイル属性を取得できます。このメソッドの 2 番目のパラメータは疑似要素です: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>JavaScript を通じてプレースホルダー疑似要素のスタイルを変更したい場合、より良い方法は、いくつかの異なるスタイルを事前定義することです: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: red;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>然后通过切换文本输入框的 <code>class</code>属性来实现修改样式的目的： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').addClass('style-2').removeClass('style-1');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外也可以通过直接添加样式规则来实现。 <p></p> <h3>Polyfill</h3><p>对于不支持该属性的浏览器，会简单地忽略掉。原则上，HTML5 プレースホルダー属性の詳細な紹介 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。 <p></p><p>判断浏览器是否支持 <code><input></code>元素的 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性，可以引入 Modernizr 库来判断： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>也可以自己写判断，简单易行的办法就是生成一个 <code><input></code>元素对象，并判断该元素对象是否具有 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>同理，对于 <code><textarea></code>元素也是一样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外，Opera Mini 明明不支持 HTML5 プレースホルダー属性の詳細な紹介 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">({}).toString.call(window.operamini) === '[object OperaMini]'</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>结合起来就是这样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!('HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 HTML5 プレースホルダー属性の詳細な紹介 是否显示，将文本输入框的 <code>value</code>值设置为 <code>HTML5 プレースホルダー属性の詳細な紹介</code>的值来模拟显示 HTML5 プレースホルダー属性の詳細な紹介 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 <code>value</code>的值为 HTML5 プレースホルダー属性の詳細な紹介 则清空文本输入框；当文本输入框失去焦点时如果 <code>value</code>值为空则将 HTML5 プレースホルダー属性の詳細な紹介 的内容赋给它，同时当 HTML5 プレースホルダー属性の詳細な紹介 显示的时候应该给文本输入框添加一个 <code>class="HTML5 プレースホルダー属性の詳細な紹介"</code>用来设置样式以区别是显示的 HTML5 プレースホルダー属性の詳細な紹介 和还是显示的普通 value： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) { this.value = ''; $this.removeClass('HTML5 プレースホルダー属性の詳細な紹介'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>这只是一个简单的模拟实现，实际上还有很多需要处理的情况。 <p></p> <h4>处理密码输入框</h4><p>如果需要处理 HTML5 プレースホルダー属性の詳細な紹介 的是个密码输入框，它的 <code>value</code>值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 HTML5 プレースホルダー属性の詳細な紹介 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 <code>type</code>属性为 'text' 来替代显示 HTML5 プレースホルダー属性の詳細な紹介，并把原本的密码输入框隐藏： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介 if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); $this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。 <p></p> <h4>处理表单提交</h4><p>当表单提交的时候应该将那些正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 <code>value</code>值设为空，提交之后再恢复成显示 HTML5 プレースホルダー属性の詳細な紹介 的状态： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(document).on('submit', 'form', function() { var $input = $('.HTML5 プレースホルダー属性の詳細な紹介', this); $input.each(function() { this.value = ''; }); setTimeout(function() { $input.each(function() { this.value = $(this).attr('HTML5 プレースホルダー属性の詳細な紹介'); }); }, 10);});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <h4>离开页面时</h4><p>当用户离开页面时也需要清空正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 <code>beforeunload</code>事件来处理： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(window).on('beforeunload', function() { $('.HTML5 プレースホルダー属性の詳細な紹介').each(function() { this.value = ''; });});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外还需要考虑的问题： <p></p> <ul class=" list-paddingleft-2"> <li><p>使用代码给一个文本输入框赋值时，应该同时处理 HTML5 プレースホルダー属性の詳細な紹介 的状态。<p></p></li> <li><p>使用代码获取一个正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框的值的时候应该得到的是一个空字符串。<p></p></li> </ul><p>如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。 <p></p> <h3>总结</h3><p>将所有样式总结起来： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介, textarea::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}input::-moz-HTML5 プレースホルダー属性の詳細な紹介, textarea::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: #999; opacity: 1;}input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介, textarea:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}.HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}input:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介, textarea:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}input:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介, textarea:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-HTML5 プレースホルダー属性の詳細な紹介，已经相当完善了。 <p></p> <p>以上がHTML5 プレースホルダー属性の詳細な紹介の詳細内容です。詳細については、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="//m.sbmmt.com/ja/search?word=html5，placeholder" target="_blank">HTML5 ，Placeholder</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;"> ソース：php.cn </div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/ja/faq/357704.html" title=""><span>前の記事：html5共通タグの概要詳細</span></a> <a href="//m.sbmmt.com/ja/faq/357707.html" title=""><span>次の記事：HTML5/CSS3 を使用して、5 つの手順で付箋用の特殊効果コード例をすばやく作成します (画像とテキスト)</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="//m.sbmmt.com/ja/faq/377601.html">独自の PHP フレームワークをゼロから構築するためのビデオ資料</a> </div> <div> 2023-03-15 16:54:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/377137.html">PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例</a> </div> <div> 2023-03-15 12:26:02 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/376186.html">PHPでIMAPでメールを受信する方法の紹介</a> </div> <div> 2023-03-14 18:58:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/375194.html">PHP で配列の重複排除を迅速に実装する方法の例</a> </div> <div> 2023-03-14 11:30:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/369412.html">HTML での</a> <a>タグのすべての属性の使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/379971.html">PHPの基礎知識まとめ（初心者が始めるのに必要）</a> </div> <div> 2023-03-16 15:20:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/381607.html">JavaScript での typeof の使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/382066.html">JavaScript でのconfirm() メソッドの使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/357705.html">HTML5 プレースホルダー属性の詳細な紹介</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/380149.html">ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法</a> </div> <div> 1970-01-01 08:00:00 </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="//m.sbmmt.com/ja/wenda/173456.html" target="_blank" title="Vue js: トラブルシューティング - 未定義の '$refs' プロパティの読み取り" class="wdcdcTitle">Vue js: トラブルシューティング - 未定義の '$refs' プロパティの読み取り</a> <a href="//m.sbmmt.com/ja/wenda/173456.html" class="wdcdcCons">テンプレートに参照があるにもかかわらず、「未定義のプロパティを読み取ることができません ('$refs' を読み取ります)」というエラーが発生します。これは、Vue マウント フッ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-11-07 23:34:12</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>305 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/173309.html" target="_blank" title="Vue.jsのメソッド内で入力フォーカスイベントをトリガーするにはどうすればよいですか?" class="wdcdcTitle">Vue.jsのメソッド内で入力フォーカスイベントをトリガーするにはどうすればよいですか?</a> <a href="//m.sbmmt.com/ja/wenda/173309.html" class="wdcdcCons">次のイベントを使用する入力があります: <b-nputclass="input"id="link"v-model="link...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-10-29 23:56:42</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>270 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/173075.html" target="_blank" title="Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか?" class="wdcdcTitle">Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか?</a> <a href="//m.sbmmt.com/ja/wenda/173075.html" class="wdcdcCons">JavaScriptでテキスト入力ボックスを必須としてマークしようとしています。 <inputid="edName"type="text&quo...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-10-13 08:52:25</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>317 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/172445.html" target="_blank" title="正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する" class="wdcdcTitle">正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する</a> <a href="//m.sbmmt.com/ja/wenda/172445.html" class="wdcdcCons">このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getEleme...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-09-12 12:20:33</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>280 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/172281.html" target="_blank" title="CSS 属性セレクターと入力タグの疑似要素の違い" class="wdcdcTitle">CSS 属性セレクターと入力タグの疑似要素の違い</a> <a href="//m.sbmmt.com/ja/wenda/172281.html" class="wdcdcCons">**CSS ファイル内: **input[type="text"]{border:2pxsolidred;}input::placeholder{color:g...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-09-10 15:43:12</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>184 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt"> <div class="wzczt-title"> <div> 関連トピック </div> <a href="//m.sbmmt.com/ja/faq/zt" target="_blank">詳細></a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html5アニメーション制作の制作方法とは何ですか？"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/html5dhzzynxz" class="title-a-spanl" title=""><span>html5アニメーション制作の制作方法とは何ですか？</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="HTMLとHTML5の違い"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/htmlyhtmldeqb" class="title-a-spanl" title=""><span>HTMLとHTML5の違い</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/win10xzsbdjjf"><img src="https://img.php.cn/upload/subject/202407/22/2024072212172772569.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="win10のダウンロード失敗の解決策"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/win10xzsbdjjf" class="title-a-spanl" title=""><span>win10のダウンロード失敗の解決策</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/bgpjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214235718413.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="表の平均"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/bgpjz" class="title-a-spanl" title=""><span>表の平均</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/eclipsezmszzw"><img src="https://img.php.cn/upload/subject/202407/22/2024072214302810412.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Eclipseで中国語を設定する方法"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/eclipsezmszzw" class="title-a-spanl" title=""><span>Eclipseで中国語を設定する方法</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/smsmacdz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214123047977.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="MACアドレスとは何ですか"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/smsmacdz" class="title-a-spanl" title=""><span>MACアドレスとは何ですか</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/goyysxysfcz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213284689745.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Go言語で演算子のオーバーロードを実装する方法は何ですか?"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/goyysxysfcz" class="title-a-spanl" title=""><span>Go言語で演算子のオーバーロードを実装する方法は何ですか?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/yjsjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214383855724.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="クラウドコンピューティング技術"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/yjsjs" class="title-a-spanl" title=""><span>クラウドコンピューティング技術</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="h5とは何ですか" href="//m.sbmmt.com/ja/faq/414835.html">h5とは何ですか</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="コードがわからない場合に h5 ページを作成するにはどうすればよいですか?推奨される H5 ページ制作プラットフォーム" href="//m.sbmmt.com/ja/faq/417718.html">コードがわからない場合に h5 ページを作成するにはどうすればよいですか?推奨される H5 ページ制作プラットフォーム</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="html5の新機能とは何ですか？" href="//m.sbmmt.com/ja/faq/473125.html">html5の新機能とは何ですか？</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="h5ページ制作とは" href="//m.sbmmt.com/ja/faq/468382.html">h5ページ制作とは</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="h5 プログラムとミニ プログラムの違いは何ですか?" href="//m.sbmmt.com/ja/faq/463311.html">h5 プログラムとミニ プログラムの違いは何ですか?</a> </div></li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div> 人気のチュートリアル </div> <a target="_blank" href="//m.sbmmt.com/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="//m.sbmmt.com/ja/course/812.html" title="" 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="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div> 1402526 <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="//m.sbmmt.com/ja/course/74.html" title="" 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="//m.sbmmt.com/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div> 4228226 <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="//m.sbmmt.com/ja/course/286.html" title="" 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="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div> 2410776 <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="//m.sbmmt.com/ja/course/504.html" title="" 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="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div> 497444 <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="//m.sbmmt.com/ja/course/2.html" title="" 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="//m.sbmmt.com/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div> 832838 <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="//m.sbmmt.com/ja/course/812.html" title="" 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="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div> 1402526 回の学習 </div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/286.html" title="" 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="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div> 2410776 回の学習 </div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/504.html" title="" 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="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div> 497444 回の学習 </div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/901.html" title="" 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="//m.sbmmt.com/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div> 214123 回の学習 </div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/234.html" title="" 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="//m.sbmmt.com/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div> 856821 回の学習 </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="//m.sbmmt.com/ja/course/1648.html" title="" 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="//m.sbmmt.com/ja/course/1648.html">[Web フロントエンド] Node.js クイック スタート</a> <div class="wzrthreerb"> <div> 4565 回の学習 </div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1647.html" title="" 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="//m.sbmmt.com/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div> 3581 回の学習 </div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1646.html" title="" 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="//m.sbmmt.com/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div> 3062 回の学習 </div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1645.html" title="" 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="//m.sbmmt.com/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div> 556 回の学習 </div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1644.html" title="" 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="//m.sbmmt.com/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div> 15859 回の学習 </div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> </div> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div> 最新のダウンロード </div> <a href="//m.sbmmt.com/ja/xiazai">詳細></a> </div> <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="//m.sbmmt.com/ja/xiazai/js/8071">[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果" href="//m.sbmmt.com/ja/xiazai/js/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果" href="//m.sbmmt.com/ja/xiazai/js/8069">[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード" href="//m.sbmmt.com/ja/xiazai/js/8068">[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード" href="//m.sbmmt.com/ja/xiazai/js/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム" href="//m.sbmmt.com/ja/xiazai/js/8066">[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール" href="//m.sbmmt.com/ja/xiazai/js/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果" href="//m.sbmmt.com/ja/xiazai/js/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="//m.sbmmt.com/ja/xiazai/code/8328" title="[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8327" title="[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8326" title="[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8325" title="[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8324" title="[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8323" title="[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/sucai/3078" target="_blank" title="[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3077" target="_blank" title="[PNG素材] 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="//m.sbmmt.com/ja/xiazai/sucai/3076" target="_blank" title="[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3075" target="_blank" title="[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3074" target="_blank" title="[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3073" target="_blank" title="[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3072" target="_blank" title="[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)">[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3071" target="_blank" title="[PNG素材] 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="//m.sbmmt.com/ja/xiazai/code/8328" target="_blank" title="[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8327" target="_blank" title="[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8326" target="_blank" title="[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8325" target="_blank" title="[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8324" target="_blank" title="[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8323" target="_blank" title="[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/code/8321" target="_blank" title="[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div></li> </ul> </div> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/ja/about/us.html" rel="nofollow" target="_blank" title="私たちについて" class="cBlack">私たちについて</a> <a href="//m.sbmmt.com/ja/about/disclaimer.html" rel="nofollow" target="_blank" title="免責事項" class="cBlack">免責事項</a> <a href="//m.sbmmt.com/ja/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all"> </body> </html>
</code>複数行のテキスト ボックスと、属性値が text、password、search、tel、url、または email などである <code><input></code>に適しています。 > <code><textarea></code>多行文本框和 <code>type</code>属性值为 text, password, search, tel, url 或者 email 等的 <code><input></code>。 <p></p><p> <img src="https://img.php.cn/upload/article/000/000/194/66eda5290ea819ebfa483cfd04ac08b5-0.png" alt="HTML5 プレースホルダー属性の詳細な紹介"> <p></p> <h3>自定义样式</h3><p>如果想改变 HTML5 プレースホルダー属性の詳細な紹介 的默认呈现样式，应该使用 <code>::HTML5 プレースホルダー属性の詳細な紹介</code>伪元素选择器，不过当前还没有浏览器支持，因此只能根据不同浏览器的不同实现方式分别定义： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* Chrome/Safari/Opera */ color: green;}::-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 19+ */ color: green;}:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* IE 10+ 注意这里只有一个冒号 */ color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>为什么样式要分别定义呢，如果像下面这样组合到一起： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介,::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>不应该把针对不同浏览器的选择器写在一起，这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然，像类似 IE 7 这种具有超强错误处理能力的浏览器除外，不过这里和 IE 7 没什么关系)。 <p></p> <h3>Firefox 定义方式的改变</h3><p>如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:-moz-HTML5 プレースホルダー属性の詳細な紹介 { /* Firefox 4 - 18 */ color: green;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>因为从 Firefox 19 开始一个冒号的伪类定义方式 <code>:-moz-HTML5 プレースホルダー属性の詳細な紹介</code>被废弃了，切换为两个冒号的伪元素定义方式。与此同时，它还添加了一个默认的 <code>opacity: 0.54</code>不透明度样式，如果需要，可以覆盖掉该样式，否则文字是半透明的： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green; opacity: 1;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <h3>伪类和伪元素</h3><p>伪类和伪元素有什么区别呢？伪类可以理解为给某个元素添加了一个类，比如 <code>:first-child</code>伪类，选择第一个子元素： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p:first-child { font-size: 16px;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>也可以理解为元素当前的状态，同样也可以通过添加一个真正的 class 来实现类似效果： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p.first-child { font-size: 16px;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>无论是伪类还是真正的类，样式都是直接添加到 <code><p></code>元素上的。 <p></p><p>而伪元素可以理解为添加了一个虚拟的元素。比如 <code>p:before</code>伪元素，可以像下面这个伪代码这样理解： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;"><before>p:before</before><p>paragraph</p></pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>这里 <code><p></code>元素和 <code>p:before</code>可以理解为是两个不同的元素。如果被绕晕了，没关系，毕竟这不是本文的重点，更多伪元素与伪类的信息可以参考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN <p></p> <h3>关于伪类选择器引发的问题</h3><p>因为 IE 浏览器使用的是伪类 <code>:-ms-input-HTML5 プレースホルダー属性の詳細な紹介</code>选择器来定义 HTML5 プレースホルダー属性の詳細な紹介 的样式，实际上样式是作用于文本输入框的，如果另外还有针对文本输入框的选择器特殊性更高的样式规则，将会覆盖掉该样式，参考下面代码： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 1, 1 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>注释中的数字用来表示该选择器的特殊性。 <p></p><p>上面两个样式规则当中使用 ID 选择器的特殊性更高，所以在 IE 10/11 中测试会看到 HTML5 プレースホルダー属性の詳細な紹介 显示为蓝色，与期望的有点不一样。同样使用伪类选择器的旧版本 Firefox 也会出现这个问题，因此，在书写样式的时候需要特别注意，实在搞不定，别忘了还有 <code>!important</code>规则可以用。其它使用两个冒号的伪元素选择器的浏览器不会出现这个问题，例如： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { /* 0, 0, 0, 2 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>上面两个样式规则互相之间不会影响，使用 Chrome 测试 HTML5 プレースホルダー属性の詳細な紹介 的颜色为绿色。 <p></p><p>关于选择器的特殊性可以参考拙作CSS选择器特殊性与重要性。 <p></p> <h3>让行为保持一致</h3><p>虽然样式是可以自定义了，不过在行为上还有些差异，在 Chrome 和 Firefox 中当文本输入框输入内容时 HTML5 プレースホルダー属性の詳細な紹介 才会消失，清除内容时又会显示出来；而在 IE 中则是当文本输入框获取焦点时 HTML5 プレースホルダー属性の詳細な紹介 就消失了，失去焦点同时没有输入内容时才会重新显示。如果希望在 Chrome 和 Firefox 等浏览器中实现获取焦点就消失的效果，可以借助 <code>:focus</code>伪类选择器来将 HTML5 プレースホルダー属性の詳細な紹介 的文本颜色设置为透明： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>当文本输入框获取焦点时，HTML5 プレースホルダー属性の詳細な紹介 的颜色被设置为透明，感官上就好像消失一样。 <p></p> <h3>JavaScript</h3><p>获取或者修改 HTML5 プレースホルダー属性の詳細な紹介 的内容直接获取或者修改对应文本输入框的 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性的值就行了： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').attr('HTML5 プレースホルダー属性の詳細な紹介', 'Please enter your name');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>So easy，妈妈再也不用担心我写代码了。不过，想要像普通 DOM 元素那样通过 javaScript 获取伪元素对象直接操作估计很难，目前可以使用 <code>window.getComputedStyle()</code> <p></p> <img src="https://img.php.cn/upload/article/000/000/194/66eda5290ea819ebfa483cfd04ac08b5-0.png" alt="HTML5 プレースホルダー属性の詳細な紹介"><p> <h3>カスタム スタイル</h3> <p></p>プレースホルダーのデフォルトのレンダリング スタイルを変更したい場合は、 <code>::HTML5 プレースホルダー属性の詳細な紹介</code>疑似要素セレクターを使用する必要があります。ただし、現在ブラウザーはサポートされていないため、次に従って個別に定義することしかできません。異なるブラウザの異なる実装方法: <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">window.getComputedStyle(document.getElementById('username'), '::-moz-HTML5 プレースホルダー属性の詳細な紹介').getPropertyValue('color'); // "rgb(0, 255, 0)"</pre> <div class="contentsignin"> ログイン後にコピー </div> </div>スタイルを別々に定義する必要があるのはなぜですか? スタイルを次のように組み合わせる場合: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: red;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>異なるブラウザのセレクターを一緒に記述すべきではありません。これにより、ルール セット全体が認識できなくなります。無視されます (もちろん、スーパー エラー処理機能を備えた IE 7 のようなブラウザは除きますが、これは IE 7 とは関係ありません)。 <h3>Firefox 定義メソッドの変更</h3>古いバージョンの Firefox ブラウザと互換性を持たせる必要がある場合は、コロンを 1 つだけ含む次のスタイル ルールも追加する必要があります: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').addClass('style-2').removeClass('style-1');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>Firefox 19 以降では、コロン疑似クラスがあります。定義メソッド <code>:-moz-HTML5 プレースホルダー属性の詳細な紹介</code>は非推奨となり、2 つのコロンの疑似要素定義メソッドに切り替えられます。同時に、デフォルトの <code>opacity: 0.54</code>不透明度スタイルも追加されます。これは必要に応じてオーバーライドできます。それ以外の場合、テキストは半透明になります: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div> <h3>pseudo-class および pseudo-class要素</h3>疑似クラスと疑似要素の違いは何ですか?疑似クラスは、 <code>:first-child</code>疑似クラスなどの要素にクラスを追加し、最初の子要素を選択するものとして理解できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>は、の現在の状態としても理解できます。同様の効果は、実際のクラスを追加することで実現できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>疑似クラスであっても実際のクラスであっても、スタイルは <code><p></code>要素に直接追加されます。 。 擬似要素は、仮想要素を追加するものとして理解できます。たとえば、 <code>p:before</code>擬似要素は次の擬似コードのように理解できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">({}).toString.call(window.operamini) === '[object OperaMini]'</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div> <code><p></code>要素と <code>p:before は次のとおりです。</code>これは 2 つの異なる要素として理解できます。混乱している場合でも、それは問題ではありません。結局のところ、これはこの記事の焦点ではありません。疑似要素と疑似クラスの詳細については、「疑似クラス - MDN と疑似要素 -」を参照してください。 CSS | MDN <h3>疑似クラス セレクターについて 発生する問題</h3>IE ブラウザはプレースホルダーのスタイルを定義するために疑似クラス <code>:-ms-input-HTML5 プレースホルダー属性の詳細な紹介</code>セレクターを使用するため実際、スタイルはテキスト入力ボックスに適用されます。テキスト入力ボックスのセレクターに対してより高い特異性を持つ他のスタイル ルールがある場合、このスタイルは上書きされます。コメント内の は、セレクターの特異性を示すために使用されます。 上記 2 つのスタイル ルールのうち、ID セレクターを使用する方がより具体的であるため、IE 10/11 でテストすると、プレースホルダーが青色で表示され、予想とは少し異なることがわかります。この問題は、疑似クラス セレクターを使用する Firefox の古いバージョンでも発生するため、スタイルを記述するときに特に注意する必要があります。 <code>! important</ があることを忘れないでください。 code> 使用できるルール。 2 つのコロンを含む疑似要素セレクターを使用する他のブラウザーでは、この問題は発生しません。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">if (!('HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> 上記の 2 つのスタイル ルールは、相互に影響しません。Chrome を使用して、プレースホルダーの色が緑色であることをテストします。 セレクターの特殊性については、私の著作「CSS セレクターの特殊性と重要性」を参照してください。 <h3>動作の一貫性を保つ</h3> スタイルはカスタマイズできますが、Chrome と Firefox ではまだ動作にいくつかの違いがあり、テキスト入力ボックスにコンテンツが入力された場合にのみプレースホルダーが消えます。コンテンツがクリアされると表示されます。IE では、テキスト入力ボックスがフォーカスを取得するとプレースホルダーが消え、フォーカスを失ってコンテンツが入力されないと再表示されます。 Chrome や Firefox などのブラウザでフォーカスを取得した後に消える効果を実現したい場合は、 <code>:focus</code>擬似クラス セレクターを使用して、プレースホルダーのテキストの色を透明に設定できます: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) { this.value = ''; $this.removeClass('HTML5 プレースホルダー属性の詳細な紹介'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>テキスト入力ボックスにフォーカスが当たると、プレースホルダーの色が透明に設定され、視覚的に消えます。 <h3>JavaScript</h3>プレースホルダーのコンテンツを取得または変更するには、対応するテキスト入力ボックスの <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性の値を直接取得または変更するだけです: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介 if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); $this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>とても簡単です、お母さんはもう私がコードを書いたことを心配する必要はありません。ただし、通常の DOM 要素のように JavaScript から直接疑似要素オブジェクトを取得することは困難であると推定されており、現時点では <code>window.getComputedStyle()</code>メソッドを使用してそのスタイル属性を取得できます。このメソッドの 2 番目のパラメータは疑似要素です: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div>JavaScript を通じてプレースホルダー疑似要素のスタイルを変更したい場合、より良い方法は、いくつかの異なるスタイルを事前定義することです: <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">.style-1::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: green;}.style-2::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: red;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>然后通过切换文本输入框的 <code>class</code>属性来实现修改样式的目的： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').addClass('style-2').removeClass('style-1');</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外也可以通过直接添加样式规则来实现。 <p></p> <h3>Polyfill</h3><p>对于不支持该属性的浏览器，会简单地忽略掉。原则上，HTML5 プレースホルダー属性の詳細な紹介 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。 <p></p><p>判断浏览器是否支持 <code><input></code>元素的 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性，可以引入 Modernizr 库来判断： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!Modernizr.input.HTML5 プレースホルダー属性の詳細な紹介) { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>也可以自己写判断，简单易行的办法就是生成一个 <code><input></code>元素对象，并判断该元素对象是否具有 <code>HTML5 プレースホルダー属性の詳細な紹介</code>属性： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>同理，对于 <code><textarea></code>元素也是一样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('textarea')</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外，Opera Mini 明明不支持 HTML5 プレースホルダー属性の詳細な紹介 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">({}).toString.call(window.operamini) === '[object OperaMini]'</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>结合起来就是这样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!('HTML5 プレースホルダー属性の詳細な紹介' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 HTML5 プレースホルダー属性の詳細な紹介 是否显示，将文本输入框的 <code>value</code>值设置为 <code>HTML5 プレースホルダー属性の詳細な紹介</code>的值来模拟显示 HTML5 プレースホルダー属性の詳細な紹介 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 <code>value</code>的值为 HTML5 プレースホルダー属性の詳細な紹介 则清空文本输入框；当文本输入框失去焦点时如果 <code>value</code>值为空则将 HTML5 プレースホルダー属性の詳細な紹介 的内容赋给它，同时当 HTML5 プレースホルダー属性の詳細な紹介 显示的时候应该给文本输入框添加一个 <code>class="HTML5 プレースホルダー属性の詳細な紹介"</code>用来设置样式以区别是显示的 HTML5 プレースホルダー属性の詳細な紹介 和还是显示的普通 value： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">// 做点什么事$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('HTML5 プレースホルダー属性の詳細な紹介') && $this.hasClass('HTML5 プレースホルダー属性の詳細な紹介')) { this.value = ''; $this.removeClass('HTML5 プレースホルダー属性の詳細な紹介'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); this.value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>这只是一个简单的模拟实现，实际上还有很多需要处理的情况。 <p></p> <h4>处理密码输入框</h4><p>如果需要处理 HTML5 プレースホルダー属性の詳細な紹介 的是个密码输入框，它的 <code>value</code>值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 HTML5 プレースホルダー属性の詳細な紹介 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 <code>type</code>属性为 'text' 来替代显示 HTML5 プレースホルダー属性の詳細な紹介，并把原本的密码输入框隐藏： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input[HTML5 プレースホルダー属性の詳細な紹介]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 HTML5 プレースホルダー属性の詳細な紹介 if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('HTML5 プレースホルダー属性の詳細な紹介-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('HTML5 プレースホルダー属性の詳細な紹介-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('HTML5 プレースホルダー属性の詳細な紹介'); $this[0].value = $this.attr('HTML5 プレースホルダー属性の詳細な紹介'); }});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <div class="contentsignin"> ログイン後にコピー </div> </div><p>需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。 <p></p> <h4>处理表单提交</h4><p>当表单提交的时候应该将那些正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 <code>value</code>值设为空，提交之后再恢复成显示 HTML5 プレースホルダー属性の詳細な紹介 的状态： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(document).on('submit', 'form', function() { var $input = $('.HTML5 プレースホルダー属性の詳細な紹介', this); $input.each(function() { this.value = ''; }); setTimeout(function() { $input.each(function() { this.value = $(this).attr('HTML5 プレースホルダー属性の詳細な紹介'); }); }, 10);});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div> <h4>离开页面时</h4><p>当用户离开页面时也需要清空正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 <code>beforeunload</code>事件来处理： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(window).on('beforeunload', function() { $('.HTML5 プレースホルダー属性の詳細な紹介').each(function() { this.value = ''; });});</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>另外还需要考虑的问题： <p></p> <ul class=" list-paddingleft-2"> <li><p>使用代码给一个文本输入框赋值时，应该同时处理 HTML5 プレースホルダー属性の詳細な紹介 的状态。<p></p></li> <li><p>使用代码获取一个正在显示 HTML5 プレースホルダー属性の詳細な紹介 的文本输入框的值的时候应该得到的是一个空字符串。<p></p></li> </ul><p>如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。 <p></p> <h3>总结</h3><p>将所有样式总结起来： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介, textarea::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}input::-moz-HTML5 プレースホルダー属性の詳細な紹介, textarea::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: #999; opacity: 1;}input:-ms-input-HTML5 プレースホルダー属性の詳細な紹介, textarea:-ms-input-HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}.HTML5 プレースホルダー属性の詳細な紹介 { color: #999;}input:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介, textarea:focus::-webkit-input-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}input:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介, textarea:focus::-moz-HTML5 プレースホルダー属性の詳細な紹介 { color: transparent;}</pre> <div class="contentsignin"> ログイン後にコピー </div> </div><p>Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-HTML5 プレースホルダー属性の詳細な紹介，已经相当完善了。 <p></p> <p>以上がHTML5 プレースホルダー属性の詳細な紹介の詳細内容です。詳細については、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="//m.sbmmt.com/ja/search?word=html5，placeholder" target="_blank">HTML5 ，Placeholder</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;"> ソース：php.cn </div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/ja/faq/357704.html" title=""><span>前の記事：html5共通タグの概要詳細</span></a> <a href="//m.sbmmt.com/ja/faq/357707.html" title=""><span>次の記事：HTML5/CSS3 を使用して、5 つの手順で付箋用の特殊効果コード例をすばやく作成します (画像とテキスト)</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="//m.sbmmt.com/ja/faq/377601.html">独自の PHP フレームワークをゼロから構築するためのビデオ資料</a> </div> <div> 2023-03-15 16:54:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/377137.html">PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例</a> </div> <div> 2023-03-15 12:26:02 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/376186.html">PHPでIMAPでメールを受信する方法の紹介</a> </div> <div> 2023-03-14 18:58:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/375194.html">PHP で配列の重複排除を迅速に実装する方法の例</a> </div> <div> 2023-03-14 11:30:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/369412.html">HTML での</a> <a>タグのすべての属性の使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/379971.html">PHPの基礎知識まとめ（初心者が始めるのに必要）</a> </div> <div> 2023-03-16 15:20:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/381607.html">JavaScript での typeof の使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/382066.html">JavaScript でのconfirm() メソッドの使用の概要</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/357705.html">HTML5 プレースホルダー属性の詳細な紹介</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ja/faq/380149.html">ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法</a> </div> <div> 1970-01-01 08:00:00 </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="//m.sbmmt.com/ja/wenda/173456.html" target="_blank" title="Vue js: トラブルシューティング - 未定義の '$refs' プロパティの読み取り" class="wdcdcTitle">Vue js: トラブルシューティング - 未定義の '$refs' プロパティの読み取り</a> <a href="//m.sbmmt.com/ja/wenda/173456.html" class="wdcdcCons">テンプレートに参照があるにもかかわらず、「未定義のプロパティを読み取ることができません ('$refs' を読み取ります)」というエラーが発生します。これは、Vue マウント フッ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-11-07 23:34:12</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>305 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/173309.html" target="_blank" title="Vue.jsのメソッド内で入力フォーカスイベントをトリガーするにはどうすればよいですか?" class="wdcdcTitle">Vue.jsのメソッド内で入力フォーカスイベントをトリガーするにはどうすればよいですか?</a> <a href="//m.sbmmt.com/ja/wenda/173309.html" class="wdcdcCons">次のイベントを使用する入力があります: <b-nputclass="input"id="link"v-model="link...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-10-29 23:56:42</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>270 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/173075.html" target="_blank" title="Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか?" class="wdcdcTitle">Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか?</a> <a href="//m.sbmmt.com/ja/wenda/173075.html" class="wdcdcCons">JavaScriptでテキスト入力ボックスを必須としてマークしようとしています。 <inputid="edName"type="text&quo...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-10-13 08:52:25</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>317 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/172445.html" target="_blank" title="正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する" class="wdcdcTitle">正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する</a> <a href="//m.sbmmt.com/ja/wenda/172445.html" class="wdcdcCons">このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getEleme...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-09-12 12:20:33</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>280 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ja/wenda/172281.html" target="_blank" title="CSS 属性セレクターと入力タグの疑似要素の違い" class="wdcdcTitle">CSS 属性セレクターと入力タグの疑似要素の違い</a> <a href="//m.sbmmt.com/ja/wenda/172281.html" class="wdcdcCons">**CSS ファイル内: **input[type="text"]{border:2pxsolidred;}input::placeholder{color:g...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">から 2023-09-10 15:43:12</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>184 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt"> <div class="wzczt-title"> <div> 関連トピック </div> <a href="//m.sbmmt.com/ja/faq/zt" target="_blank">詳細></a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html5アニメーション制作の制作方法とは何ですか？"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/html5dhzzynxz" class="title-a-spanl" title=""><span>html5アニメーション制作の制作方法とは何ですか？</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="HTMLとHTML5の違い"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/htmlyhtmldeqb" class="title-a-spanl" title=""><span>HTMLとHTML5の違い</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/win10xzsbdjjf"><img src="https://img.php.cn/upload/subject/202407/22/2024072212172772569.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="win10のダウンロード失敗の解決策"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/win10xzsbdjjf" class="title-a-spanl" title=""><span>win10のダウンロード失敗の解決策</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/bgpjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214235718413.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="表の平均"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/bgpjz" class="title-a-spanl" title=""><span>表の平均</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/eclipsezmszzw"><img src="https://img.php.cn/upload/subject/202407/22/2024072214302810412.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Eclipseで中国語を設定する方法"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/eclipsezmszzw" class="title-a-spanl" title=""><span>Eclipseで中国語を設定する方法</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/smsmacdz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214123047977.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="MACアドレスとは何ですか"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/smsmacdz" class="title-a-spanl" title=""><span>MACアドレスとは何ですか</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/goyysxysfcz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213284689745.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Go言語で演算子のオーバーロードを実装する方法は何ですか?"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/goyysxysfcz" class="title-a-spanl" title=""><span>Go言語で演算子のオーバーロードを実装する方法は何ですか?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ja/faq/yjsjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214383855724.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="クラウドコンピューティング技術"></a><a target="_blank" href="//m.sbmmt.com/ja/faq/yjsjs" class="title-a-spanl" title=""><span>クラウドコンピューティング技術</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="h5とは何ですか" href="//m.sbmmt.com/ja/faq/414835.html">h5とは何ですか</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="コードがわからない場合に h5 ページを作成するにはどうすればよいですか?推奨される H5 ページ制作プラットフォーム" href="//m.sbmmt.com/ja/faq/417718.html">コードがわからない場合に h5 ページを作成するにはどうすればよいですか?推奨される H5 ページ制作プラットフォーム</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="html5の新機能とは何ですか？" href="//m.sbmmt.com/ja/faq/473125.html">html5の新機能とは何ですか？</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="h5ページ制作とは" href="//m.sbmmt.com/ja/faq/468382.html">h5ページ制作とは</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="h5 プログラムとミニ プログラムの違いは何ですか?" href="//m.sbmmt.com/ja/faq/463311.html">h5 プログラムとミニ プログラムの違いは何ですか?</a> </div></li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div> 人気のチュートリアル </div> <a target="_blank" href="//m.sbmmt.com/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="//m.sbmmt.com/ja/course/812.html" title="" 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="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div> 1402526 <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="//m.sbmmt.com/ja/course/74.html" title="" 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="//m.sbmmt.com/ja/course/74.html">PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ</a> <div class="wzrthreerb"> <div> 4228226 <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="//m.sbmmt.com/ja/course/286.html" title="" 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="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div> 2410776 <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="//m.sbmmt.com/ja/course/504.html" title="" 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="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div> 497444 <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="//m.sbmmt.com/ja/course/2.html" title="" 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="//m.sbmmt.com/ja/course/2.html">PHP ゼロベースの入門チュートリアル</a> <div class="wzrthreerb"> <div> 832838 <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="//m.sbmmt.com/ja/course/812.html" title="" 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="//m.sbmmt.com/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div> 1402526 回の学習 </div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/286.html" title="" 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="//m.sbmmt.com/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div> 2410776 回の学習 </div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/504.html" title="" 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="//m.sbmmt.com/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div> 497444 回の学習 </div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/901.html" title="" 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="//m.sbmmt.com/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div> 214123 回の学習 </div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/234.html" title="" 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="//m.sbmmt.com/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div> 856821 回の学習 </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="//m.sbmmt.com/ja/course/1648.html" title="" 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="//m.sbmmt.com/ja/course/1648.html">[Web フロントエンド] Node.js クイック スタート</a> <div class="wzrthreerb"> <div> 4565 回の学習 </div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1647.html" title="" 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="//m.sbmmt.com/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div> 3581 回の学習 </div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1646.html" title="" 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="//m.sbmmt.com/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div> 3062 回の学習 </div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1645.html" title="" 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="//m.sbmmt.com/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div> 556 回の学習 </div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ja/course/1644.html" title="" 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="//m.sbmmt.com/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div> 15859 回の学習 </div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> </div> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div> 最新のダウンロード </div> <a href="//m.sbmmt.com/ja/xiazai">詳細></a> </div> <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="//m.sbmmt.com/ja/xiazai/js/8071">[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果" href="//m.sbmmt.com/ja/xiazai/js/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果" href="//m.sbmmt.com/ja/xiazai/js/8069">[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード" href="//m.sbmmt.com/ja/xiazai/js/8068">[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード" href="//m.sbmmt.com/ja/xiazai/js/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム" href="//m.sbmmt.com/ja/xiazai/js/8066">[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール" href="//m.sbmmt.com/ja/xiazai/js/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果" href="//m.sbmmt.com/ja/xiazai/js/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="//m.sbmmt.com/ja/xiazai/code/8328" title="[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8327" title="[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8326" title="[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8325" title="[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8324" title="[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8323" title="[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/sucai/3078" target="_blank" title="[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3077" target="_blank" title="[PNG素材] 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="//m.sbmmt.com/ja/xiazai/sucai/3076" target="_blank" title="[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3075" target="_blank" title="[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3074" target="_blank" title="[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3073" target="_blank" title="[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3072" target="_blank" title="[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)">[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/sucai/3071" target="_blank" title="[PNG素材] 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="//m.sbmmt.com/ja/xiazai/code/8328" target="_blank" title="[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8327" target="_blank" title="[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8326" target="_blank" title="[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8325" target="_blank" title="[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8324" target="_blank" title="[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/code/8323" target="_blank" title="[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ja/xiazai/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="//m.sbmmt.com/ja/xiazai/code/8321" target="_blank" title="[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div></li> </ul> </div> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/ja/about/us.html" rel="nofollow" target="_blank" title="私たちについて" class="cBlack">私たちについて</a> <a href="//m.sbmmt.com/ja/about/disclaimer.html" rel="nofollow" target="_blank" title="免責事項" class="cBlack">免責事項</a> <a href="//m.sbmmt.com/ja/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all"> </body> </html>
