HTML/CSS の質問に優しく答えるスレ 24at HP
HTML/CSS の質問に優しく答えるスレ 24 - 暇つぶし2ch1010:Name_Not_Found
16/10/31 15:07:45.07 .net
httpsサイトにhttpページをiframe埋め込みするとセキュリティ関連でブロックされるけど、どうにかして出来ないの?

1011:Name_Not_Found
16/10/31 15:22:16.42 .net
phpでfile_get_contents()使うとか

1012:Name_Not_Found
16/10/31 16:05:27.90 .net
挿絵とか入れるのに、figureとfigcaptionを使うのがHTML5流みたいですが、今までのような、imgタグは推奨されないのでしょうか?

1013:Name_Not_Found
16/10/31 16:17:24.87 .net
>>983
情報ありがとうございました。
ググって調べています。
ちなみにphp以外の手法はないのでしょうか?phpが苦手なもので…

1014:Name_Not_Found
16/10/31 16:26:16.55 .net
>>984
figureを使うか使わないかは、表示したい画像がどういう文脈なのかによって使い分ける。

URLリンク(developer.mozilla.org)
> 「主なテキストの中から参考文献として参照されるが、メインのフローに影響を与える事無く別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」

逆に、文章から切り離せないような画像だったら、裸で<img>を書くといいと思う。

1015:Name_Not_Found
16/10/31 16:28:57.04 .net
>>713>>717
亀だけど、このアルゴリズムって気持ち悪いね。
URLリンク(html.spec.whatwg.org)

<h1>大見出し</h1>
<div>
<h2>見出しA</h2>
<p>hogeA</p>
<h2>見出しB</h2>
<p>hogeB</p>
</div>

この場合、div要素は見出し「B」をヘッダに持つセクションに結び付けられる
…ってことだよね?
・div要素に入るときには何もしない
・div要素から出るときにcurrent sectionに結び付けられる
・その時のcurrent sectionは見出し「B」をヘッダに持つセクション
ということだから。

DOMツリー上はh2はdiv要素の子ノードであるのに、
アルゴリズムによると親ノードの方が子に結び付けられてるという。

1016:Name_Not_Found
16/10/31 16:48:18.73 .net
>>986
ありがとうございます。

1017:Name_Not_Found
16/10/31 16:54:13.53 .net
>>982
CSP で許可する

<meta http-equiv="content-security-policy"
content=“frame-src http://” >

でいけるんじゃないかな(報告ヨロ)
またはサーバで Content-Security-Policy ヘッダを設定してもおおよそ同じ

(参考 URLリンク(triple-underscore.github.io)

1018:Name_Not_Found
16/10/31 17:09:52.46 .net
>>987
そういうことになるね。確かに気持ち悪いと思う。
そのHTMLみたいに、DOM構造とアウトラインはそもそも一致しないことが多いから、俺は気にしすぎないようにしてるわ。

そもそもアウトラインにおいて、見出し以外の"Associated"はすごく弱い意味だと思ってる。
アウトラインを表示する拡張機能とかWebサービスはたくさんあるけど、見出し以外の要素を表示するようなものは皆無�


1019:セし、 仕様にも、「アウトラインには表示されないだろう」って書いてある。 https://html.spec.whatwg.org/multipage/semantics.html#outlines:the-body-element-2 > Also associated with the paragraph <p>Some intro to the document.</p> (though it likely would not be shown in a rendered view of the outline). セクション同士の入れ子関係と、見出しの関連付けがちゃんとできていればとりあえずいいかなーって俺は思う。



1020:Name_Not_Found
16/10/31 17:16:00.36 .net
>>987
そういう場合はsection要素を使えば上手く出来るとか、ないのかな

1021:Name_Not_Found
16/10/31 17:39:28.65 .net
>>991
確かにそうだわ。ちょっと読み込み不足だった。
sectionを使えば、こうなるか。
<h1>大見出し</h1>
<div>
 <section>
  <h2>見出しA</h2>
  <p>hogeA</p>
 </section>
 <section>
  <h2>見出しB</h2>
  <p>hogeB</p>
 </section>
</div>

↓↓↓

bodyのoutline
┗<body>: <h1>大見出し</h1> - <div></div>
 ┣<section>: <h2>見出しA</h2> - <p>hogeA</p>
 ┗<section>: <h2>見出しB</h2> - <p>hogeB</p>
(セクションを作るタグ: 見出しを作るタグ - 関連付けられる要素)

"When exiting a sectioning content element"で current section が親に移るから、きれいなアウトラインになるみたい。

1022:Name_Not_Found
16/11/01 00:09:39.21 .net
>>989
情報ありがとうございました。
content=“frame-src URLリンク(...)
この部分の記述が分からなかったのでいろいろ試してみたのですが、
どうやってもブロックされました。ダメなのでしょうか?

1023:Name_Not_Found
16/11/01 01:29:13.07 .net
input:checked + p > .button {}

CSSにて、こういう2段階的な指定ってどのブラウザでも対応してますか?
とりあえず動いてるしバリデータでもエラーが出ていません

1024:Name_Not_Found
16/11/01 01:43:25.79 .net
>>994
2段階の意味が分からんが、個々のセレクタに対応きているなら組み合わせに制限はない

1025:Name_Not_Found
16/11/01 01:45:45.05 .net
bootstrapを使うとcontentの両側に広めの余白が付きますよね。
その時に特定のdivのみ幅をブラウザウインドウの最大幅で表示したいのですが
CSSで出来ますか?
やり方をご存じでしたら教えてください。

1026:Name_Not_Found
16/11/01 02:41:40.93 .net
>>993
CSP では無理らしいスマン

URLリンク(stackoverflow.com)

原理的に禁止っぽいので
https: proxy サーバを経由して読み込ませるか何かする必要がありそう

(あと、その記述はいい加減に書いたので正確でなかった
content="frame-src http:" が正しい
ブラウザにエラーメッセージが出るのですぐわかるが。
その部分には許可したい URL を入れることになっているので
完全なURLで特定のリソースも指定できる)

1027:Name_Not_Found
16/11/01 03:14:22.97 .net
>>997
stackoverflowありがとうございました。
確かにyou can't って書いてましたね。
どうにかして出来ないもんでしょうか?

1028:Name_Not_Found
16/11/01 07:18:02.78 R5PSXj05.net
ハンバーガーメニューをCSS3で実装したんですが、
メニュー展開時、Androidだとposition: fixed;の時にheight: 100%;で背景が縦幅100%に伸びますが、iOSでは縦100%にならずheight: auto;のままになってしまいます。
ちなみにheight: 100%;を指定する要素にはdisplay: table;も指定しています。
jQueryのiOS判定で高さを画面縦幅pxに指定する処理もしましたが、効きません。
何か解決方法ありますか?

1029:Name_Not_Found
16/11/01 09:05:21.50 .net
ハンバーガーメニューをCSS3で実装するには、positi

1030:過去ログ ★
[過去ログ]
■ このスレッドは過去ログ倉庫に格納されています


最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch