レスポンシブ対応についてご教示いただけますか

締切済

質問者：kemukemu2014
質問日時：2016/06/12 08:09
回答数：4件

すいません。
1つ質問がございます。

下記はYahooのニュースサイトですが、スマホサイトで見た場合の各ニュースの枠の大きさについて質問があります。

http://news.yahoo.co.jp/hl?c=c_ent

これはCSSで制御していると思うのですが、具体的にどの部分で制御しているのでしょうか？

CSSは画像1にあると思いますが、この中の具体的にどこで指定しているのでしょうか。

画像2はiphone6で見た場合です。

画像3はiphone5で見た場合です。

また、画像2の各ニュースの枠の大きさはニュースのコメント量によって若干調整されています。
それを、例えば、画像2でくくったニュースのみを200ｘ100と変更するにはどうすればよいでしょうか？　画像4のようにGoogle developer toolの右下で変更しても変わりますが、更新するとまたもとに戻ってしまいます。以下の2つのやり方があって、2つ目を考えているのですが知っている人がいたら教えていただければ幸いです。

1・このニュースのみdiv idを設定して、外部CSSでこのdiv idを使って調整する。
2・JavascriptでCSSを操作して、200x100に書き換える。Webページを読み込んだときに、外部CSSを適用せず、このJavascriptを適用するようにする。

2は実際無理なやり方でしょうか・・・
もしJavascriptのカテゴリで聞くべきでしたら、そちらで聞きます。

お手数ですがよろしくお願いいたします。

通報する

この質問は特に30代・男性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： Ogre7077
回答日時：2016/06/13 11:25

CSS3 の新機能である flexible box を使っているようです

https://www.w3.org/TR/css-flexbox-1/
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

この機能を使えば、写真以外では大きさの指定は不要ですので、
以下の記述でブラウザがよろしく表示を調整してくれます。

<style>
.記事 a { display: flex; }
.記事 a dl { flex: 1; } /* 写真幅を除いていっぱいに表示 */
.記事 a div { width: 60px; height: 60px; }
</style>
<ul class=記事>
<li> <a><dl><dt>記事</dl><div>写真</div></a>
</ul>

ご質問の「一部のみを200ｘ100と変更する」を行うならば、
CSS で "display: flex" を指定しているルールに対して、
ある要素の場合のみ、縦幅横幅を追加指定するだけで解決です。

例:
.記事 a { display: flex; }
.記事 a#ある要素のID { width:200px; height:100px; overflow:hidden;}

ある要素、の指定方法は他にも色々ありますので、ご検討ください。
.記事 a:firsr-child /* 最初の記事のみ */
.記事 a[href*="tokuteinokiji.html"] /* 特定の URL を含むリンクのみ */

ただ、そのサイトが自分の管理内ならば CSS を変更すれば済む話ですが、
管理外ならば、ユーザースタイルシート等の荒業を使わなければならないでしょう。
https://chrome.google.com/webstore/search/user%2 …

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2016/06/12 15:25

なお、調べ方ですが、ウェブ開発されているなら、ツール(

https://addons.mozilla.org/ja/firefox/extensions … )の豊富なfirefoxをお使いだと思いますが、そのアドオンのFirebug( https://addons.mozilla.org/ja/firefox/addon/fire … )と、FireMobileSimulator( https://addons.mozilla.org/ja/firefox/addon/fire … )を組み合わせて、ユーザーエージェントを変えるとHTMLソースや適用されるスタイルが変わることが確認できます。FireMobileSimulatorでなく、User-Agent Switcher( https://addons.mozilla.org/ja/firefox/addon/user … )でも確認はできる。
　firebug で変更した内容を壱岐応する場合はテキストエディタを指定して、それでできる。

先のHTMLとCSSでウィンドウ幅を変更すると、どのように適用されるかわかると思います。

30代男性にリクエストされていますが、私は64歳・・。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2016/06/12 15:15

文字数の制約で書ききれなかったdivの使い方

NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( https://www.w3.org/TR/html5/grouping-content.htm … )
　(訳)著者は、他により適切な要素がないときの最後の手段としてdiv要素を表示することが強く奨励されます。divでなくより適切な要素を使用することは、読者のためにはより良いアクセシビリティを、著者のためにはメンテナンス性の向上につながります。

　こうして、率直に文書構造だけをHTMLでマークアッフして、その文書構造に従ってCSS(カスケーディング　スタイルシート）を書くのです。
　そのためには、CSSの命といっても過言ではない「カスケーディング」を知っておかないと書けません。
　　カスケードとは、流れ落ちるというような意味で、基本的なものからより詳細な指定にカスケードしていくしくみ。
　6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★タブは＿に置換してあるので戻してください。

<style media="screen">

</style>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2016/06/12 10:54

可能な限りjavascriptは使用しません。

javascriptはそれが有効な設定にされてないと無効。検索エンジンはjavascriptなしで読み込むのでSEO(検索エンジン最適化)上問題になることもある・・
　lavascriptを使わなくて済むように、そのためのCSSなのですからね。

　以下はご存じたと思いますが簡単に説明すると

　元来divは「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。ご存知だと思いますが16年前のHTML4.01の勧告前から強く言われ続けてきたこと。
　HTML5ではそれが守られないために、文書構造を示すheader,section,nav,footerなどの新しい要素が追加され( http://www.html5.jp/trans/w3c_differences.html#n … )たこと。divは原則使わなくなった。
　次回補足します。

レスポンシブは、HTML4.01,CSS2の時代に登場した、メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )の拡張です。
　ですから、
1) リキッドデザインであること
2) メディア依存であること
　が基本です。そのうえで
3) mediaquery を使ってブラウザのウィンドウ幅でスタイルを変更する
という手順になります。
★ そのためには、そもそも「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ができてないと始まらない。

簡単なサンプル書いておきます。
まず、HTMLを書きますが、文書構造だけ指定します。
とりあえず、下記のようなHTMLだとします。
★タブは＿に置換してあるので戻してください。
★ セミコロン: は全角の：に変更してあるので戻してください。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力(右上)でチェック済み。
★スタイルシートは後で・・今から仕事なので

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<section>
＿＿＿<figure>
＿＿＿＿<img src="https：//d1v9c5y32oxrkp.cloudfront.net/oshietegoo/images/media/b/505976443_575c9a297f9c3/M.jpg" width="500" height="239" alt="表示見本">
＿＿＿</figure>
＿＿＿<h2>質問1</h2>
＿＿＿<p>
＿＿＿＿下記はYahooのニュースサイトですが、スマホサイトで見た場合の各ニュースの枠の大きさについて質問があります。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿<a href="http：//news.yahoo.co.jp/hl?c=c_ent">エンタメニュース - Yahoo!ニュース</a>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿これはCSSで制御していると思うのですが、具体的にどの部分で制御しているのでしょうか？
＿＿＿</p>
＿＿＿<p>
＿＿＿＿CSSは画像1にあると思いますが、この中の具体的にどこで指定しているのでしょうか。
＿＿＿</p>
＿＿＿<section>
＿＿＿＿<h3>回答</h3>
＿＿＿＿<p>
＿＿＿＿＿サーバー側でユーザーエージェントを判別してHTMLを(PHPなどで)動的に出力しています。ウィンドウ幅を変えたのではデザインが変わらないことから明白です。<strong>この方法ではユーザーエージェントを得られない場合は効きませんし、スマホやipadの縦置きや横置きなどウィンドウ幅では変更できない。</strong>
＿＿＿＿</p>
＿＿＿＿<p>
＿＿＿＿＿とても古くてウェブ標準でもないのですので参考にはできません。
＿＿＿＿</p>
＿＿＿＿<ul>
＿＿＿＿＿<li>div要素を文書構造ではなくデザインのためだけに使用している。</li>
＿＿＿＿＿<li>CSS1時代のセレクタで、カスケーディングが一切考慮されていない</li>
＿＿＿＿＿<li>印刷や携帯電話など他のUAに対する配慮がされていない</li>
＿＿＿＿</ul>
＿＿＿</section>
＿＿</section>
＿＿<section>
＿＿＿<h2>質問2</h2>
＿＿＿<p>
＿＿＿＿画像2の各ニュースの枠の大きさはニュースのコメント量によって若干調整されています。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿それを、例えば、画像2でくくったニュースのみを200ｘ100と変更するにはどうすればよいでしょうか？
＿＿＿</p>
＿＿＿<p>
＿＿＿＿画像4のようにGoogle developer toolの右下で変更しても変わりますが、更新するとまたもとに戻ってしまいます。以下の2つのやり方があって、2つ目を考えているのですが知っている人がいたら教えていただければ幸いです。
＿＿＿</p>
＿＿＿<ol>
＿＿＿＿<li>このニュースのみdiv idを設定して、外部CSSでこのdiv idを使って調整する。</li>
＿＿＿＿<li>JavascriptでCSSを操作して、200x100に書き換える。Webページを読み込んだときに、外部CSSを適用せず、このJavascriptを適用するようにする。</li>
＿＿＿</ol>
＿＿＿<p>
＿＿＿＿2は実際無理なやり方でしょうか・・・、もしJavascriptのカテゴリで聞くべきでしたら、そちらで聞きます。
＿＿＿</p>
＿＿＿<section>
＿＿＿＿<h3>回答2</h3>
＿＿＿＿<p>
＿＿＿＿＿ウィンドウ幅でスタイルシートを切り替えます。具体的にはmediaqueryを使う。
＿＿＿＿</p>
＿＿＿＿<p>
＿＿＿＿＿Google developer toolでは、あくまでスタイルシートを書き換えた時の表示確認です。このページだけuserstyle Sheetを適用させたいのでしたら、スタイルシートを別途書いて適用させます。(たぶんそれは目的ではないので省く）
＿＿＿＿</p>
＿＿＿</section>
＿＿</section>
＿＿<aside>
＿＿＿<h3>アクセスランキング（エンタメ）</h3>
＿＿＿<ol>
＿＿＿＿<li>海老蔵、病室の麻央夫人を見舞う
＿＿＿＿＿<p>
＿＿＿＿＿＿<span class="source">スポーツ報知</span>
＿＿＿＿＿＿<span class="date">6月12日(日)1時24分</span>
＿＿＿＿＿</p>
＿＿＿＿</li>
＿＿＿＿<li>ＧＡＣＫＴ、抜き打ちで薬物検査受ける　手を染める有名人に怒り「何やってんだ」
＿＿＿＿＿<p>
＿＿＿＿＿＿<span class="source">スポニチアネックス</span>
＿＿＿＿＿＿<span class="date">6月11日(土)9時35分</span>
＿＿＿＿＿</p>
＿＿＿＿</li>
＿＿＿＿<li>円楽の謝罪を宮根らが絶賛！「これだけリポーターが聞き入る会見ない」
＿＿＿＿＿<p>
＿＿＿＿＿＿<span class="source">サンケイスポーツ</span>
＿＿＿＿＿＿<span class="date">6月10日(金)15時50分</span>
＿＿＿＿＿</p>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
</html>