ちょっと変わったマニアな作品が集結

あるWEBサイトのコンテンツがスマホで見た時だけ表示されません。
なぜでしょうか。

サイトは以下のサイトになります。
http://asobi.yte.co.jp/gyakuten/

なぜかメニューにあるネタバレのところのみスマホで見ると表示されません。
(パソコンは表示します)

ソースを見るとその部分だけ
<!--spoiler-->で囲まれているのでこれが原因だと思うのですが…

わかる方教えていただけませんか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ネタバレのコンテンツにある画像のimgタグすべてに"forPC"というclassが打ってあります。


そのclassが打ってある場合、スマートフォンくらいの画面幅のときは表示しないよう、CSSでdisplay:none;が設定されているためです。
この手を使うことはよくあります。
ただ、スマートフォンのとき用の画像も用意しておいて切り替えるのが通常だと思いますので、用意するのを忘れちゃったかなんかしたんでしょうね。
こういうこともよくあります笑
もしかすると意図的に隠しているのかもしれませんが、その意図がわからないので、やっぱり忘れちゃったんでしょう。

<!--spoiler-->で囲われていると、たしかに腐ったコンテンツみたいに思えますね。
spoilerはネタバレという意味のようですね。
直接は関係なかったのですが、おもしろい着眼点の質問でした。
    • good
    • 1

1) mediaqueryが使われている。


 
 印刷用、携帯用、スクリーンリーダーでスタイルを変えるユーザー別スタイルシートの拡張で、端末のディスプレイの幅で内容を変える。

2) サーバー側で、ユーザーエージェントによって内容を変えている。
 いまはあまり使われなくなりましたが、(1)が一般的でない頃はよく使われていた
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QHTML reset.cssのどの部分が有効になって、これらを可能にしているか知りたい。

楽天ストアを構築するのに、htmlとCSSを作っています。
HTML4で書いてます。

下記のソースを書いて、<iframe src="./leftnavi.html" width="200" height="1550" scrolling="no" frameborder="0"></iframe>で表示をさせようとしたのですが、どこかに、幅が取らててピッタリとiframe内に収まってくれませんでした。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
ul li{
list-style-type: none;
width: 200px;
}
-->
</style>
<title></title>
</head>

<body>

<ul>
<li><a href="#" target="_top"><img src="./btn_00.jpg" width="200" height="40" alt=""/></a></li>
</ul>
</body>
</html>

以下のreset.cssを読み込ませた所、ピッタリとハマってくれたのですが、どこのがrestされてピッタリとハマってくれたのか理解できてません。

どなたかご教授お願いできませんでしょうか?

@charset "utf-8";
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, ul, ol, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del { text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select { vertical-align: middle; }
img, img a, img a:hover { border: 0; }

楽天ストアを構築するのに、htmlとCSSを作っています。
HTML4で書いてます。

下記のソースを書いて、<iframe src="./leftnavi.html" width="200" height="1550" scrolling="no" frameborder="0"></iframe>で表示をさせようとしたのですが、どこかに、幅が取らててピッタリとiframe内に収まってくれませんでした。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; ch...続きを読む

Aベストアンサー

html, body, ・・・・ul,の行の

ul, ←この要素型セレクタがあるから。

そこの

margin: 0;
padding: 0;

が効いている

Q画像と同じCSSデザインにしたいのですが、やり方が分かりません。

現在趣味でサイト制作をしている、プログラミング初心者です。
下記の参考画像のようなCSSデザインにしたいのですが、やり方が分からないため質問致しました。

参考画像のように、スマホで閲覧した際に「画像の上に文字列を配置し、文字列を半透明の枠で囲んでる」デザインにしたいのですが、どうしたら良いか分かりません。

ご教授お願い致します!

※レスポンシブのやり方は把握しております。

Aベストアンサー

これは思った以上に難しいかも知れません。
ブラウザによって見え方も違ってくるかも。
一番確実で安全な方法は、半透明グレー枠+テキストを画像に合成してしまうことです。
アルファチャンネルとレイヤー対応画像編集ソフトでできます。

作例はGIMP

QJavascriptの本に乗っていることがわかりません

最近勉強を始めたものです。
関数のところで、1行目に、

/* 関数定義 ******************/

とあるのですが、どういう意味でしょう

Aベストアンサー

「/*」から始まり「*/」で終わるまでの間はコメント文として
好きなことをかけます。備忘録のようなものです。
「*」がいっぱい書いてあるのは桁あわせ(インデント)や
パッと見て目につきやすくしている(アイキャッチ)のだと思います

Q質問です。

スキャナでスキャンした新聞を保存するのに適した画像形式は【  】である   
 
 
CRC
GIF
MPEG
MP3

上記4つの内、どれが正しいでしょうか?

Aベストアンサー

その中ならGIFでしょうけど
妙な問題ですね
別に適しては無いですからね

Qサイトを作る時のcssファイルはいくつ作るのが一般的ですか?

css、html初心者です。
サイトを作るときのファイル構造について、基本的な質問をさせて下さい。
あるサイトを作るのにトップページのtop.htmlファイルと外部cssファイルをそれぞれ1つずつ作りました。
その後、別ページguide.htmlを作成したいのですが、基本的にcssファイルは1つですか?
例えば、top.htmlでは.contentsに対してmagin-top:120pxを、guide.htmlではmagin-top:50pxを指定したい場合は、.contents1、.contents2というように個々に作成していますか?
分かりにくくてすみません。。。
それとも全ページ共通のcssと各ページごとのcssなどを作るのが一般的なのでしょうか?

Aベストアンサー

CSS(Cascading Style Sheets)を作成されたのですよね。
なら、Cascading の仕組みをフル活用しているはずです。
一枚にすれば、HTTP要求/提供のステップが一回で済むし、他のページに移動するたびに読み込まなくて済む。CSSはテキストですから読み込む時間はほとんどかかりません。
  (画像や動画のほうは負荷が大きいですが、それでもアイコンや背景は一枚にしてスプライトという手法を使うのと同じです。小分けして必要な時、都度読むよりあらかじめ全部読ませた方が良い)

 しかし、最近のネットはとても早くなっているので、時間的な問題は気にする必要がないでしょう。
 一枚に書く方が一度読めばよいので速度的には有利です。しかし、メンテナンスは極めて厄介になる。

★管理しやすいので、分ける。

 Cascading の仕組みから、
固定スタイルシートで、すべてのメディアに適用するスタイルを書きます。
 これは印刷にも、スクリーンリーダーにも適用される
screenメディア用のメディア別スタイルシートを書きます。
 screen用優先スタイルシート
★デフォルトのスタイルシートを記述した後、個別のページについては
 そのページだけ適用する場合は、<head>内の<style>要素に記述
 複数枚に適用させる場合は、外部スタイルシートで必要な部分だけを上書き
  ・・Cascading機能を使いシンプルに・・
  これは、mediaqueryを使う場合も同じです。

 公的なページなどでは、印刷用スタイルシート、代替スタイルシート、スクリーンリーダー用のスタイルシートが必要な場合もあります。

>.contentsに対して・・guide.htmlではmagin-top:50pxを指定したい場合は
 これはHTMLが間違いです。20年以上前のHTML4.01の時代から「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」となっていて、デザインではなく文書構造をHTMLではマークアップします。HTML5では、<header><section>とか、具体的になりdivは原則使いません。
 また、セレクタの指定も起点セレクタを書くようにしましょう。

 大事なことは、メンテナンス性です。文書構造を担うHTMLとプレゼンテーションを担うスタイルシートを分ける最大の目的は、
【引用】____________ここから
2.4.1 構造とプレゼンテーションの分離
 HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )]より

私の場合


1) 固定スタイルシート
 HTMLの<head>への記述
 <link rel="stylesheet" type="text/css" href="/CSS/parmanent.css">

 CSSへの記述
  html,body{margin:0;padding:0;}
  h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
  p{ext-indent:1em;}
  ・・・
2) メディア別優先スタイルシート
 (screen用優先スタイルシート)
 HTMLの<head>への記述
  <link rel="stylesheet" type="text/css" media="screen" href="/CSSt/screen.css">

 CSSの記述
   body{font-famiry:*****;}
  
3) マニュアル用追加スタイルシート
 (screen用追加スタイルシート)
 HTMLの<head>への記述
  <link rel="stylesheet" type="text/css" media="screen" href="/CSSt/manual.css">
   

4)
 <link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/CSS/projection.css" title="プロジェクター用">

5) 印刷用優先スタイルシート
 (print用スタイルシート)
  <link rel="styleSheet" type="text/css" media="print" href="/styleSheet/CSS/print.css">

6) 個別のページ用
 <head>
 <style type="text/css" media="screen">
  header nav li a[href="/page2.html"]{color:red;font-weight:bold;}
  サイトナビで当該のページである場合

とか、
要は、カスケーディングの機能を利用して、メンテナンスが容易になるようにする。そのためのCascading スタイルシートなのですよ。

 時間が取れれば、サンプル作ってみましょう

CSS(Cascading Style Sheets)を作成されたのですよね。
なら、Cascading の仕組みをフル活用しているはずです。
一枚にすれば、HTTP要求/提供のステップが一回で済むし、他のページに移動するたびに読み込まなくて済む。CSSはテキストですから読み込む時間はほとんどかかりません。
  (画像や動画のほうは負荷が大きいですが、それでもアイコンや背景は一枚にしてスプライトという手法を使うのと同じです。小分けして必要な時、都度読むよりあらかじめ全部読ませた方が良い)

 しかし、最近のネットはとても早...続きを読む

Qデザイン系で年収が平均以上の仕事を教えて下さい。。。

デザイン系で年収が平均以上の仕事を教えて下さい。。。

Aベストアンサー

デザイン系の職業は、仕事の出来次第でもらえる金額が変わる歩合制が
多いので、平均以上の年収が欲しいのであれば、他のデザイナーよりも
優れた結果を出し続ける必要が有ります。
良い結果が次の仕事を呼びます。
それが、出来なくなった時が仕事を失う時。

Qcss&htmlでフォントの均等割りが出来ません。

右端もきれいに揃えるために以下の設定で指定をしたのですが、何も変わらず右端がガタガタの状態です。

フォントサイズなど、均等割り以外の指定はちゃんと効いています。
なお、改行は指定の箇所で行いたいです。
何か解決方法はありますでしょうか(><)
WIndouw7、IE10です。

【html】
<body>
<div class="contents1"><h1>走れメロス</h1>
<p>メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。</br>
メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き羊と遊んで暮して来た。
けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、
十里はなれた此このシラクスの市にやって来た。</br>メロスには父も、母も無い。女房も無い。
十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。</p></div>
</body>

【css】
.contents1{
width:612px;
height:300px;
background:linear-gradient(white,#FFFF80);
margin-top:100px;
margin-right:auto;
margin-left:auto;
}
p{
font-size:15px;
margin:15px;
line-height:180%;
text-align:justify; /* 両端揃え */
text-justify:inter-ideograph; /* 両端揃えの種類 */
}
h1{
font-size:20px;
font-family:"メイリオ","Meiryo",sans-serif;
padding: .25em 0.5em .25em;
font-weight: normal;
border-left:12px solid midnightblue;
border-bottom:3px solid midnightblue;
background-color:white;
}

右端もきれいに揃えるために以下の設定で指定をしたのですが、何も変わらず右端がガタガタの状態です。

フォントサイズなど、均等割り以外の指定はちゃんと効いています。
なお、改行は指定の箇所で行いたいです。
何か解決方法はありますでしょうか(><)
WIndouw7、IE10です。

【html】
<body>
<div class="contents1"><h1>走れメロス</h1>
<p>メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。</br>
メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き羊...続きを読む

Aベストアンサー

>試してみましたが、何ら変化がありませんでした(;;)
もしかして、文字数が1行の文字数に全然足りていない行についても両端揃えをしようとしていますか?
もしそうであれば下記の値が該当します。

text-justify:distribute-all-lines;

が…IE10はこれをサポートしていません。
IE5~IE7及びEdge 12~Edge15がサポートしています。
IE8~IE11はサポートしていません。
こういったところがW3Cが仕様を足したり引いたりしている辺りです…

Qbackground-imageにmax-width:100%;height:auto;を適用したい

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100%;
height:auto;
}
とすると、(font-size:10px;で適用確認)すると、画面を越えてしまって半分ぐらいしか文字が入っていません、拡大されているのかどうかわかりませんが、max-widthが効かないようです。

何が原因でしょうか?
教えて下さい。
宜しくお願い致します。

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100...続きを読む

Aベストアンサー

背景にはそんなプロパティ有りません。coverプロパティを使う。

Qホームページについて教えてください。 全くの初心者なのでわからない事だらけです。 初心者でもわかるよ

ホームページについて教えてください。

全くの初心者なのでわからない事だらけです。
初心者でもわかるように教えて欲しいです。

自分でホームページを作ろうとしてあまりの難しさに断念しました。
ホームページ制作会社に依頼して制作してもらい、その後Yahooの検索に引っかかるようにしたり、月々色々お金かかりますよね?

初期費用と月額費用はどれくらいかかるものですか?

Aベストアンサー

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません(数千万円とかそれ以上の案件もあります)。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金のかかる話です。
SEOと呼ばれるものですが、これはすでに運用しているサイトに対して行ったほうが効果が出やすいこともあり、
構築時にはSEO的に正しい作り方をする、という程度の話。
(この辺は制作会社のスキル次第です)

3.月々色々お金かかる?
ランニングコストの主なものは、「サーバー費用」と「更新費用」です。
サーバーというのはホームページを置いておく場所のこと。
まあ、お店の家賃だと思って下さい。費用は規模によりけりで無料もあれば数万円の場合もあります。
大した機能のないホームページであれば年間1万円程度見ておけば良いでしょう。

更新費用は文字通り。ホームページは更新しなければそのうち忘れ去られます。
というか、更新しないなら作る意味は無いと言ってもいいです。時間とお金の無駄。
更新するには文章書いたり、画像作ったりいろいろやることありますよね?
その作業を代行してもらうならその分のお金が発生します。
費用は頼む内容次第ですが、安くはないですよ。

これ以外だとドメイン費用というのがあります。これはホームベージの住所。
◯◯◯◯.comとかあるでしょ?あれです。
あれを取得、維持するには年間数百円〜数千円の費用がかかります。
ま、この辺は大したことないですから割愛してもいいかな。
制作会社が説明してくれるでしょう。


あとは「ホームページ」を作るのを止めてSNSやブログにしてしまうという手もあります。
要するにウェブ上の絵日記みたいなものですが、これはデザインや機能、ドメインを選べない反面、
誰でも手軽に作れるものになっています。大手サービスのほとんどは無料で利用できます。

私個人としてはそちらをオススメしますね。
もしどうしてもオリジナルなホームページがほしいと思うのであれば、
せめて毎年100万円程度の費用(あるいは労力)をかける覚悟をした方がいい。
構築費に結構お金をかけたけれど、まともに更新出来ずにデザインも機能もどんどん古臭くなり、
気がつけば誰も訪れなくなっているとか、よくある話です。
ホームページをちゃんと運用するというのは手間と費用のかかることなんです。

初心者なのは仕方ないのですが、格安で手軽に解決することはありません。
そこは断言できます(苦笑)。

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません(数千万円とかそれ以上の案件もあります)。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金...続きを読む

QHTMLで作ったホームページをWindowsとMac両対応にしたい

HTMLでホームページを作っているのですが、Macを使っており、文字コードをUTF-8にしています。
ですが、Windowsでは文字化けしてしまいますか?

かと言ってWindows用にShift_JISにするわけにも行きません。
両方のOSで正常に見せられる様な方法はありませんか?

今のところ、ツールを使う考えはありません。

Aベストアンサー

Windowsのブラウザでも、UTF-8で問題なく表示されます。

HTMLの content-type や charset とか、CSSの@charsetとか で UTF-8だというヒントを与えてますか?
あるいは、Windowsのブラウザの設定で、文字コードをShift_JISにするような設定になっていませんか?


人気Q&Aランキング