WebView内のテキストフィールドを選択した時に、表示されるキーボードのタイプは選択可能なのか調べました。今回はSFSafariViewで試していますがWKWebViewでも同じはずです。 可能です htmlのtypeの指定によって表示されるキーボードの種類が変わります。 // 普通のキーボード <input type="text" size="20" maxlength="30"> // PhonePad <input type="tel" size="20" maxlength="30"> これ以外にもtypeにurlやemailを指定することで、それぞれに応じたキーボードを表示させることができます。
WebView内のテキストフィールドを選択した時に、表示されるキーボードのタイプは選択可能なのか調べました。今回はSFSafariViewで試していますがWKWebViewでも同じはずです。
SFSafariView
WKWebView
htmlのtypeの指定によって表示されるキーボードの種類が変わります。
type
// 普通のキーボード <input type="text" size="20" maxlength="30"> // PhonePad <input type="tel" size="20" maxlength="30">
これ以外にもtypeにurlやemailを指定することで、それぞれに応じたキーボードを表示させることができます。
url
email
WebView内のテキストフィールドを選択した時に、表示されるキーボードのタイプは何によって決まるのか調べました。今回はSFSafariViewで試していますがWKWebViewでも同じはずです。 結論 htmlのtypeの指定によって表示されるキーボードの種類が変わります。 // 普通のキーボード <input type="text" size="20" maxlength="30"> // PhonePad <input type="tel" size="20" maxlength="30"> これ以外にもtypeにurlやemailを指定することで、それぞれに応じたキーボードを表示させることができます。
WebView内のテキストフィールドを選択した時に、表示されるキーボードのタイプは何によって決まるのか調べました。今回はSFSafariViewで試していますがWKWebViewでも同じはずです。
はじめに 超ど初心者のメモです フォーム 新規投稿フォーム form_tag("url") do で送った情報はparam[] に入る <%=form_tag("/posts/create") do%> <div class="form"> <div class="form-body"> <textarea name="content"></textarea> <input type="submit" value="投稿"> </div> </div> <% end %> param[:content] とかで参照する。 新規ユーザー登録 <%= form_tag("/users/create") do %> <p>ユーザー名</p> <input name="name" value="<%= @user.name %>"> <p>メールアドレス</p> <input name="email" value="<%= @user.email %>"> <input type="submit" value="新規登録"> <% end %> ログインフォーム <%= form_tag("送りたいURL") do%> <p>メールアドレス</p> <input name="email"> <p>パスワード</p> <input type="password" name="password"> <input type="submit" value="ログイン"> <% end %>
超ど初心者のメモです
form_tag("url") do で送った情報はparam[] に入る
form_tag("url") do
param[]
<%=form_tag("/posts/create") do%> <div class="form"> <div class="form-body"> <textarea name="content"></textarea> <input type="submit" value="投稿"> </div> </div> <% end %>
param[:content] とかで参照する。
param[:content]
<%= form_tag("/users/create") do %> <p>ユーザー名</p> <input name="name" value="<%= @user.name %>"> <p>メールアドレス</p> <input name="email" value="<%= @user.email %>"> <input type="submit" value="新規登録"> <% end %>
<%= form_tag("送りたいURL") do%> <p>メールアドレス</p> <input name="email"> <p>パスワード</p> <input type="password" name="password"> <input type="submit" value="ログイン"> <% end %>
今日やったこと Webの神様模写コーディング (2h) https://www.youtube.com/watch?v=RBLkXAG4QTM& 基本情報技術者試験（キタミ式) (0.5h) うまくいったこと 最近模写コーディングを始めて、Progateからの脱出ができそう。 うまくいかなかったこと 衝動的に何をするか決めてしまうため、もっと計画的に勉強を進める必要がある。 午後になると頭が動かない。 対策 衝動的に何かする前にやることを記録する習慣をつける。（レコーディングダイエット的な） 長い目で見てめんどくささを減らしてくれるものを優先して覚える（ショートカットとか）
今日やったこと Webの神様模写コーディング (2h) https://www.youtube.com/watch?v=RBLkXAG4QTM&
基本情報技術者試験（キタミ式) (0.5h)
うまくいったこと 最近模写コーディングを始めて、Progateからの脱出ができそう。
うまくいかなかったこと 衝動的に何をするか決めてしまうため、もっと計画的に勉強を進める必要がある。 午後になると頭が動かない。
対策 衝動的に何かする前にやることを記録する習慣をつける。（レコーディングダイエット的な） 長い目で見てめんどくささを減らしてくれるものを優先して覚える（ショートカットとか）
どうも7noteです。table要素のちょいテク。 tableの子要素は幅を自動調整される特徴がありますが、どちらかというと幅を指定したい時が多いです。 そしてスマホの時には「1列目だけ幅を固定しつつも、全体は100%表示させたい」なんて方向けの記事です。 ソース index.html <table> <tr> <th>1列目</th> <!-- 1列目を[th]にしています。 --> <td>2列目</td> <td>3列目</td> </tr> <tr> <th>1列目</th> <td>2列目</td> <td>3列目</td> </tr> </table> style.css table { table-layout: fixed; /* table要素に指定することで、幅を固定 */ width: 100%; } table th{ width: 200px; /* 幅を指定した要素だけ固定される。他は等倍の可変 */ } まとめ シンプルですが、ついつい書き方を忘れてしまいそうなのでメモメモ。 必要ないですが、table-layout: fixed;を使わなくても、thにmin-width: ??px;を指定して、他の要素にwidth: 100%;を指定することでも似たような処理をできます。 過去にtableを使わずにレスポンシブ対応の表組を作る方法の記事もかいてますので、よければこちらもご覧ください。 https://qiita.com/7note/items/e5b3212e406a7852b052 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
tableの子要素は幅を自動調整される特徴がありますが、どちらかというと幅を指定したい時が多いです。 そしてスマホの時には「1列目だけ幅を固定しつつも、全体は100%表示させたい」なんて方向けの記事です。
<table> <tr> <th>1列目</th> <!-- 1列目を[th]にしています。 --> <td>2列目</td> <td>3列目</td> </tr> <tr> <th>1列目</th> <td>2列目</td> <td>3列目</td> </tr> </table>
table { table-layout: fixed; /* table要素に指定することで、幅を固定 */ width: 100%; } table th{ width: 200px; /* 幅を指定した要素だけ固定される。他は等倍の可変 */ }
シンプルですが、ついつい書き方を忘れてしまいそうなのでメモメモ。 必要ないですが、table-layout: fixed;を使わなくても、thにmin-width: ??px;を指定して、他の要素にwidth: 100%;を指定することでも似たような処理をできます。
table-layout: fixed;
min-width: ??px;
width: 100%;
過去にtableを使わずにレスポンシブ対応の表組を作る方法の記事もかいてますので、よければこちらもご覧ください。 https://qiita.com/7note/items/e5b3212e406a7852b052
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。 ある時スライドをポップアップさせて動画を表示させる依頼がありました。 仕様としては 「ページャーには第○章と順に入れてね」 「スマホの時はページャーをドットにしてね」 というもので、やり方を調べて実装しました。以下備忘録です。 slickでページャーを変更できる「customPaging」 「customPaging」というオプションで自由に変更できます。 $('.c5-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, arrows: true, prevArrow: '<span class="prev-arrow">前</span>', nextArrow: '<span class="next-arrow">次</span>', customPaging: function(slider, i) { return $('<div class="c5-dots__num">').text('第' + (i+1) + '章'); }, dotsClass: 'c5-dots', dots: true, }); See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen. 数字を降順にする 「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。 <section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section> customPaging: function(slider, i, j) { j = 5; return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章'); } See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen. 途中に番外編を入れる 「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。 <section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 2章番外編 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section> customPaging: function(slider, i, j) { j = 6; if(i >= 0 && i < 1){ return $('<div class="c5-dots__num">').text('第' + (j - (i+2)) + '章'); }else if(i == 1){ return $('<div class="c5-dots__num">').text('第2章番外編'); }else{ return $('<div class="c5-dots__num">').text('第' + (j - (i+1)) + '章'); } } See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen. 以上です。 参考 slick - にほんご。
スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。 ある時スライドをポップアップさせて動画を表示させる依頼がありました。 仕様としては 「ページャーには第○章と順に入れてね」 「スマホの時はページャーをドットにしてね」 というもので、やり方を調べて実装しました。以下備忘録です。
「customPaging」というオプションで自由に変更できます。
$('.c5-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, arrows: true, prevArrow: '<span class="prev-arrow">前</span>', nextArrow: '<span class="next-arrow">次</span>', customPaging: function(slider, i) { return $('<div class="c5-dots__num">').text('第' + (i+1) + '章'); }, dotsClass: 'c5-dots', dots: true, });
See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen.
「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。
<section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section>
customPaging: function(slider, i, j) { j = 5; return $('<div class="c5-dots__num">').text('第' + (j-(i+1)) + '章'); }
See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen.
「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。
<section> <div class="c5-slider_wrap"> <ul class="c5-slider"> <li class="c5-slider_content"> 4章 </li> <li class="c5-slider_content"> 2章番外編 </li> <li class="c5-slider_content"> 3章 </li> <li class="c5-slider_content"> 2章 </li> <li class="c5-slider_content"> 1章 </li> </ul> <!-- /.c5-slider --> </div> <!-- /.c5-slider_wrap --> </section>
customPaging: function(slider, i, j) { j = 6; if(i >= 0 && i < 1){ return $('<div class="c5-dots__num">').text('第' + (j - (i+2)) + '章'); }else if(i == 1){ return $('<div class="c5-dots__num">').text('第2章番外編'); }else{ return $('<div class="c5-dots__num">').text('第' + (j - (i+1)) + '章'); } }
See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen.
以上です。
slick - にほんご。
要素が重なった時に優先順位を決めたい！ 2つの要素にpositionをつけた時、思わぬ形で要素が重なってしまう、、 https://gyazo.com/3c01c80fad0dc299c069baf4a7376225 原因、2つの要素にpositionをつけた時には、勝手に優先順位ができるので、優先順位を手で書き込むこと header{ position: fixed;z-index:10;//z-index:10;を追加 text-align:center; } .tweets-comment{ width: 30vw; background-color: burlywood; position: relative;z-index:0; ;//z-index:0;を追加 } 結論！ z-index:0;の数字が高い 上 z-index:0;の数字が低い 下になります 直りました。。 https://gyazo.com/61361fe8cfce08d8880a2687e055813a
https://gyazo.com/3c01c80fad0dc299c069baf4a7376225
header{ position: fixed;z-index:10;//z-index:10;を追加 text-align:center; }
.tweets-comment{ width: 30vw; background-color: burlywood; position: relative;z-index:0; ;//z-index:0;を追加 }
https://gyazo.com/61361fe8cfce08d8880a2687e055813a
jQueryを使ってテキストボックスにフォーカスを当てる方法を見ていきましょう 以前に私が書いた要素の表示、非表示のコードをそのまま使っていきます。 まだ見ていない方はこちらからご覧ください。 https://qiita.com/pikarunn/items/ce8dc83d5baa4ce5fd60 完成形はこちらです 要素を表示した時にフォーカスが当たり、カーソルを当てなくても文字を打てるようになります 以前に使ったコードはこちらです header.script $("#input").toggle(); $("#button").click(function() { $("#input").toggle(); }); header.html <button id="button">表示 非表示ボタン</button> <input id="input" placeholder="表示させたい要素"> このコードに一行足すだけでテキストボックスにフォーカスを当てることができます $("#input").focus(); .focusを("#input")につけることで、テキストボックスが表示されたと同時にフォーカスも当たるようになり、カーソルを当てなくても、文字を打てるようになります。 まとめ 以上で実装完了です。 このようなフォーカスを当てる機能は項目を入力する際などに使うと便利です。 また、フォーカスを当てることでユーザーの手間を省くことができます。 このような時に便利なので是非実装してみてください！
以前に私が書いた要素の表示、非表示のコードをそのまま使っていきます。 まだ見ていない方はこちらからご覧ください。 https://qiita.com/pikarunn/items/ce8dc83d5baa4ce5fd60
要素を表示した時にフォーカスが当たり、カーソルを当てなくても文字を打てるようになります
以前に使ったコードはこちらです
$("#input").toggle(); $("#button").click(function() { $("#input").toggle(); });
<button id="button">表示 非表示ボタン</button> <input id="input" placeholder="表示させたい要素">
このコードに一行足すだけでテキストボックスにフォーカスを当てることができます
$("#input").focus();
.focusを("#input")につけることで、テキストボックスが表示されたと同時にフォーカスも当たるようになり、カーソルを当てなくても、文字を打てるようになります。
.focus
("#input")
以上で実装完了です。 このようなフォーカスを当てる機能は項目を入力する際などに使うと便利です。 また、フォーカスを当てることでユーザーの手間を省くことができます。 このような時に便利なので是非実装してみてください！
はじめに 最近プロジェクトでウェブサイトのリニューアルを行っています。 その中で、 <a><div>...</div></a> のように、<a> の中に <div> が入っているソースがありました。 インライン要素の中にブロックレベル要素を入れるのってダメじゃん。。と思ったのですが、 そういえば HTML5 からはインライン、ブロックレベルという分け方は無くなったと聞いたことがあります。 そこで調べてみたところ、思いのほかヘビーな仕様に変わっていました。 ここでは <a><div>...</div></a> の是非とその理由ついて記載します。 結論：HTML5 では条件付きで OK HTML5 では親要素によっては <a> に <div> を入れることができます。 例えば <div> <section> <article> などを親に持っている場合は <a> に <div> を入れることができます。 どのような要素を入れることができるのか知るためには、HTML5 でどのように要素が扱われているかを知る必要があります。 HTML5 の要素の扱い HTML4 では2種類 HTML4 では要素は インライン要素とブロックレベル要素に分類されていました。 インライン要素の中にブロックレベル要素を含めることはできないので、 <a><div>...</div></a> は明確にルール違反です。 HTML5 ではカテゴリーに分類 コンテンツカテゴリ 次バージョンの HTML5 では、インライン要素とブロックレベル要素という分類が無くなりました。 代わりに要素はコンテンツカテゴリと呼ばれるものに分類されます。 主に以下のカテゴリが存在します。 メタデータコンテンツ Metadata content フローコンテンツ Flow content 区分コンテンツ Sectioning content 見出しコンテンツ Heading content 記述コンテンツ Phrasing content 埋め込みコンテンツ Embedded content インタラクティブコンテンツ Interactive content すべての要素は１つ以上のコンテンツカテゴリに所属しています。 例えば <div> はフローコンテンツに分類されます。 また、<h1> はフローコンテンツと見出しコンテンツに分類されます。 コンテンツカテゴリは要素を分類するだけではなく、その要素が存在できる場所を表す場合にも利用します。 例えば <p> はフローコンテンツを親に持つことができ、記述コンテンツを子孫に持つことができます。 コンテンツカテゴリの詳細は HTML Standard にあります。Kinds of content の図を見るとカテゴリー間の関係がわかりやすいです。 すでにインライン、ブロックレベルの2種類しかなかった頃にくらべてだいぶ複雑になったのがわかります。。 コンテンツモデル 自身のコンテンツカテゴリや、親や子孫に持てるコンテンツカテゴリなどをまとめてコンテンツモデルと呼びます。 例えば <p> はフローコンテンツに所属していて、子要素には記述コンテンツを持つことができます。 これらをまとめて <p> のコンテンツモデルと呼びます。 また、コンテンツモデルは「持つ」と表現することがあります。 例えば、<pre> は <p> と似たコンテンツモデルを持つ、などと表現します。 透過的コンテンツモデル ここで１つ特殊なコンテンツモデルを紹介します。 透過的コンテンツモデル (transparent content model)というものです。 透過的コンテンツモデルは親要素のコンテンツモデルを引き継ぐ特殊なコンテンツモデルです。 この透過的コンテンツモデルがポイントになります。 <a> は透過的コンテンツモデルを持つ要素なのです。 ｺ ﾝ ﾃ ﾝ ﾂ ﾓ ﾃﾞ ﾙ がゲシュタルト崩壊してきましたが、ついに本題に入る準備が整いました！！ <a> に <div> を入れていい条件 <a> は透過的コンテンツモデルを持っているので、親のコンテンツモデルを引き継ぎます。 <p> を親に持つ <a> は <p> と同じコンテンツモデルとなるということです。 その結果、<p> が子孫に持てる要素は <a> も子孫に持てるようになります。 つまり、<a> に <div> を入れていい条件とは、<a> の親要素が <div> を子孫に持てることです。 もう少し抽象的な言い方をすると、 <a> の親要素のコンテンツモデルで、子孫に持てるとされているコンテンツモデルを持つ要素は <a> に入れることができます。 実例 実際のソースを見たほうがわかりやすいです。 以下の例は正しい html です。 html <!DOCTYPE html> <div> <a href="https://example.com"> <div>こんてんつ</div> </a> </div> <div> はフローコンテンツに属する要素のみ子孫に持つことができます。 そして <a> も親である <div> のコンテンツモデルを引き継ぎ、フローコンテンツのみを子孫に持てるようになります。 <a> の子は <div> 、つまりフローコンテンツなので上記は正しい html となります。 一方、以下の例は誤りです。 html <!DOCTYPE html> <p> <a href="https://example.com"> <div>こんてんつ</div> </a> </p> <p> は記述コンテンツに属する要素のみ子孫に持つことができます。 <a> も同様に記述コンテンツに属する要素のみ子孫に持つことができるようになります。 しかし <div> はフローコンテンツに属する要素で、記述コンテンツには属しません。 結果、上記は誤った html となります。 最後に、以下の例は誤りです。 html <!DOCTYPE html> <div> <span> <div>でぃぶ いん すぱん</div> </span> </div> HTML4 では <a> と同じインライン要素に分類される <span> を使ってみます。 <span> は透過的コンテンツモデルを持たないので、親の <div> のコンテンツモデルを引き継ぎません。 つまり、フローコンテンツを持てるようにはなりません。 また、 <sapn> は記述コンテンツのみを子孫に持つことができます。 結果、記述コンテンツしか持てない <span> にフローコンテンツである <div> を持たせていることになるので、誤った html となります。 どんなコンテンツモデルを持っているのかは調べなければわからない 結局のところ、ある要素がどんなコンテンツモデルを持っているのかは要素ごとに調べなければわかりません。 ↓のサイトで愚直に調べましょう。 https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories <a> の親と子の要素について、その親が子を持つのが妥当であれば、子を <a> で囲んでも妥当です。 まとめ <a> の中に <div> って入れていいの？と軽い気持ちで調べたらなかなかヘビーなのでした。 頻発するパターンとして div > a > div は OK と覚えておくだけでもいいかもしれません。 ルールは厳格に決まっているので linter なども探せばあるでしょう。 html なんて自分の中で使い慣れた技術だと思っていましたが、まだまだ知らないこともあるものです。 それをアウトプットする前提で調べ始めると一気に知識が深まりますね。 やはりアウトプットは最強の勉強法です 参考 コンテンツカテゴリー - 開発者ガイド | MDN HTML Standard Does Googlebot care about valid HTML? - YouTube 補足 透過的 = ないのと同じ 便器上引き継ぐという表現をしましたが、透過的とはあってもなくても同じという意味です。 要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML 5 として構造化されているものです。 コンテンツカテゴリー - 開発者ガイド | MDN #透過的コンテンツモデル そもそも誤った html だと何がいけないのか SEO の観点から不利という意見を見かけますが、誤った html が検索結果の順位に影響を与えることはありません。 以下の動画では Google で検索エンジンの最適化に関わっている Matt Cutts 氏が Googlebot は正しい HTML であることを考慮するか？というお話をされています。 https://www.youtube.com/watch?list=UUWf2ZlNsCGDS89VBF_awNvA&v=j3KgrbiB1pc 要約すれば以下のようなことを言っています。 多くのウェブサイトには構文エラーや無効な html がある。 html が正しいというだけでランキングの順位を上げると検索の質が下がってしまう。 Google はユーザーが必要とする情報を得ているかということを重要視しているので、 無効な html にペナルティを課すことはない。 もちろんメンテナンスなどを考えれば正しい html であるほうがよい。 しかし、検索順位を上げるために修正するは必要ない。 つまり html に誤りは検索順位に影響しないとのことです。 もちろん閉じタグを忘れると表示が崩れたりしますし、タイトルを間違えれば検索結果に正しく表示されません。 そして、Googlebot をはじめ検索エンジンのボットにウェブサイトの内容を正しく伝える上で、 <article> や <section> <aside> などを使って適切な意味合いでマークアップすることは大切です。 またメンテナンスなど将来的に手を入れることを考えれば、正しい html であるほうが負担は少ないでしょう。
最近プロジェクトでウェブサイトのリニューアルを行っています。 その中で、 <a><div>...</div></a> のように、<a> の中に <div> が入っているソースがありました。
<a><div>...</div></a>
<a>
<div>
インライン要素の中にブロックレベル要素を入れるのってダメじゃん。。と思ったのですが、 そういえば HTML5 からはインライン、ブロックレベルという分け方は無くなったと聞いたことがあります。
そこで調べてみたところ、思いのほかヘビーな仕様に変わっていました。 ここでは <a><div>...</div></a> の是非とその理由ついて記載します。
HTML5 では親要素によっては <a> に <div> を入れることができます。 例えば <div> <section> <article> などを親に持っている場合は <a> に <div> を入れることができます。
<section>
<article>
どのような要素を入れることができるのか知るためには、HTML5 でどのように要素が扱われているかを知る必要があります。
HTML4 では要素は インライン要素とブロックレベル要素に分類されていました。
インライン要素の中にブロックレベル要素を含めることはできないので、 <a><div>...</div></a> は明確にルール違反です。
次バージョンの HTML5 では、インライン要素とブロックレベル要素という分類が無くなりました。 代わりに要素はコンテンツカテゴリと呼ばれるものに分類されます。
主に以下のカテゴリが存在します。
すべての要素は１つ以上のコンテンツカテゴリに所属しています。
例えば <div> はフローコンテンツに分類されます。 また、<h1> はフローコンテンツと見出しコンテンツに分類されます。
<h1>
コンテンツカテゴリは要素を分類するだけではなく、その要素が存在できる場所を表す場合にも利用します。 例えば <p> はフローコンテンツを親に持つことができ、記述コンテンツを子孫に持つことができます。
<p>
コンテンツカテゴリの詳細は HTML Standard にあります。Kinds of content の図を見るとカテゴリー間の関係がわかりやすいです。
すでにインライン、ブロックレベルの2種類しかなかった頃にくらべてだいぶ複雑になったのがわかります。。
自身のコンテンツカテゴリや、親や子孫に持てるコンテンツカテゴリなどをまとめてコンテンツモデルと呼びます。
例えば <p> はフローコンテンツに所属していて、子要素には記述コンテンツを持つことができます。 これらをまとめて <p> のコンテンツモデルと呼びます。
また、コンテンツモデルは「持つ」と表現することがあります。 例えば、<pre> は <p> と似たコンテンツモデルを持つ、などと表現します。
<pre>
ここで１つ特殊なコンテンツモデルを紹介します。 透過的コンテンツモデル (transparent content model)というものです。
透過的コンテンツモデルは親要素のコンテンツモデルを引き継ぐ特殊なコンテンツモデルです。
この透過的コンテンツモデルがポイントになります。 <a> は透過的コンテンツモデルを持つ要素なのです。
ｺ ﾝ ﾃ ﾝ ﾂ ﾓ ﾃﾞ ﾙ がゲシュタルト崩壊してきましたが、ついに本題に入る準備が整いました！！
<a> は透過的コンテンツモデルを持っているので、親のコンテンツモデルを引き継ぎます。
<p> を親に持つ <a> は <p> と同じコンテンツモデルとなるということです。 その結果、<p> が子孫に持てる要素は <a> も子孫に持てるようになります。
つまり、<a> に <div> を入れていい条件とは、<a> の親要素が <div> を子孫に持てることです。
もう少し抽象的な言い方をすると、 <a> の親要素のコンテンツモデルで、子孫に持てるとされているコンテンツモデルを持つ要素は <a> に入れることができます。
実際のソースを見たほうがわかりやすいです。
以下の例は正しい html です。
<!DOCTYPE html> <div> <a href="https://example.com"> <div>こんてんつ</div> </a> </div>
<div> はフローコンテンツに属する要素のみ子孫に持つことができます。 そして <a> も親である <div> のコンテンツモデルを引き継ぎ、フローコンテンツのみを子孫に持てるようになります。 <a> の子は <div> 、つまりフローコンテンツなので上記は正しい html となります。
一方、以下の例は誤りです。
<!DOCTYPE html> <p> <a href="https://example.com"> <div>こんてんつ</div> </a> </p>
<p> は記述コンテンツに属する要素のみ子孫に持つことができます。 <a> も同様に記述コンテンツに属する要素のみ子孫に持つことができるようになります。 しかし <div> はフローコンテンツに属する要素で、記述コンテンツには属しません。 結果、上記は誤った html となります。
最後に、以下の例は誤りです。
<!DOCTYPE html> <div> <span> <div>でぃぶ いん すぱん</div> </span> </div>
HTML4 では <a> と同じインライン要素に分類される <span> を使ってみます。 <span> は透過的コンテンツモデルを持たないので、親の <div> のコンテンツモデルを引き継ぎません。 つまり、フローコンテンツを持てるようにはなりません。
<span>
また、 <sapn> は記述コンテンツのみを子孫に持つことができます。
<sapn>
結果、記述コンテンツしか持てない <span> にフローコンテンツである <div> を持たせていることになるので、誤った html となります。
結局のところ、ある要素がどんなコンテンツモデルを持っているのかは要素ごとに調べなければわかりません。
↓のサイトで愚直に調べましょう。 https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories
<a> の親と子の要素について、その親が子を持つのが妥当であれば、子を <a> で囲んでも妥当です。
<a> の中に <div> って入れていいの？と軽い気持ちで調べたらなかなかヘビーなのでした。
頻発するパターンとして div > a > div は OK と覚えておくだけでもいいかもしれません。 ルールは厳格に決まっているので linter なども探せばあるでしょう。
div > a > div
html なんて自分の中で使い慣れた技術だと思っていましたが、まだまだ知らないこともあるものです。 それをアウトプットする前提で調べ始めると一気に知識が深まりますね。
やはりアウトプットは最強の勉強法です
便器上引き継ぐという表現をしましたが、透過的とはあってもなくても同じという意味です。
要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML 5 として構造化されているものです。 コンテンツカテゴリー - 開発者ガイド | MDN #透過的コンテンツモデル
SEO の観点から不利という意見を見かけますが、誤った html が検索結果の順位に影響を与えることはありません。
以下の動画では Google で検索エンジンの最適化に関わっている Matt Cutts 氏が Googlebot は正しい HTML であることを考慮するか？というお話をされています。 https://www.youtube.com/watch?list=UUWf2ZlNsCGDS89VBF_awNvA&v=j3KgrbiB1pc
要約すれば以下のようなことを言っています。
多くのウェブサイトには構文エラーや無効な html がある。 html が正しいというだけでランキングの順位を上げると検索の質が下がってしまう。 Google はユーザーが必要とする情報を得ているかということを重要視しているので、 無効な html にペナルティを課すことはない。 もちろんメンテナンスなどを考えれば正しい html であるほうがよい。 しかし、検索順位を上げるために修正するは必要ない。
つまり html に誤りは検索順位に影響しないとのことです。
もちろん閉じタグを忘れると表示が崩れたりしますし、タイトルを間違えれば検索結果に正しく表示されません。
そして、Googlebot をはじめ検索エンジンのボットにウェブサイトの内容を正しく伝える上で、 <article> や <section> <aside> などを使って適切な意味合いでマークアップすることは大切です。
<aside>
またメンテナンスなど将来的に手を入れることを考えれば、正しい html であるほうが負担は少ないでしょう。
