ぎみっく@gimmickgangさんのページユーザー

4.0千文字の記事
掲示板をみる(701)
  • twitter
  • facebook
  • はてな
  • LINE
  • ほめる(115)
  •  
  •  
  •  
  •  
  • その他

表示テスト

このtweetのツリーで述べているようにAAスマホ版向けにサイズ変更したところで、スマホの搭載フォントの影で崩れてしまうので背景画像に置き換えて、その前面に見えない文字で………

  _____
 |\ ◎-----、\     人人人人人人人人人人人人人人人人人人人人人人人人人人人人人
 |  \-----ヽ\ < すごい一斗缶を感じる。今までにない何か便利な一斗缶を。       >
 |   | ̄ ̄ ̄ ̄|< 形状・・・なんだろう定められている日本工業規格(JIS規格)に。      >
 | //|  \ / | < 、地は一辺の長さが238.0±2.0mm、高さは349.0±2.0mm、   >
 |   | ()=() |< 質量は11460g、容量は19.25±0.45リットルと定められている。    >
 |   |  _ |< 規格の大元は、一斗=十(約18.039リットル)を基準に考案されている。>
 |   |        | < 5ガロン缶とも呼ばれていた時期もある。(1ガロン = 3.7854118リットル) >
 \  | 〃----ヾ | < 5ガロンと18リットルで、5月18日は18リットル缶の日だよ。        >
   \|____|  YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

単語記事一斗缶』より。
コピペするにも結局は選択範囲部分も薄くなるから分かりにくい

表示テスト

PC版スマホ版のpタグフォントサイズの違いを利用して別表示をするテストとその工程。

このツイートの例を実際に表示したもの↓

A

スマホ版のpタグスタイル属性font-size: 14px;が定されているのを利用して
PC版ではpタグ要素となるdivタグ定したfont-size: 720px;を適応させつつ、
スマホ版ではpタグfont-size: 14px;で上書きさせることによってfont-sizeと表示領域を大幅に変える。

この仕組みを応用してPC版スマホ版で同一の箇所に別の表示をしてみる。

PC版ではニワンゴスマホ版ではニワンゴたんが出てくる領域を作る。


表示テストpreview領域

overflow: hidden;にしたheight: 360px;のの中にさきほどの細工(font-size: 374px; margin-top: -374px;)、height: 360px;のPC版、height: 360px;のスマホ版と上から順に並べてある。

一応は可だけど、フォントサイズとかの影でずれたりしそうなので………
それぞれをoverflow: hidden;にしてあるけど、根本的に画面幅の狭いスマホ向けのスマホ版用が下にくる配置なのでなんともしがたい…
それをなんとか最小限にするにはPC版スマホ版のdivを包括した形でtransform: rotateX(180deg);掛けてPC版スマホ版の配置を反転させて、それぞれにtransform: rotateX(180deg);して上下反転を解除するくらいしか方法ないかな…

表示切り替えについて

同一ページリンク<a href="#hoge">とoverflow: hidden;を組み合わせた非表示部分を使って記述内容が変化する記事のスマホ版対応について。

2021年3月ページジャンプ仕様変更exit_nicochannelによりスマホ版過去リビジョンおよびSafariでは正常に機しなくなっています。

不具合修正されたようです。ニコニコ大百科:現在発生中のエラー・不具合情報

対応する仕組みの解説

使えりゃなんでもいいやって人は読み飛ばして下さい。

大百科記事にて多くみられるheightを定して上下に配置した形だと、スマホ版ではデバイスの幅に合わせて記事幅が変化する為、heightを相対サイズ定しても切れる形になってきちんと表示されない場合があります。
そこでheight定をせずにfloatを使用して左右の外に配置してしまえばデバイス幅の違いにより変化するheightに対して、何も対策をせずにスマホ版に対応する事ができます。

実際に見てみましょう。↓↓表示例↓↓


「ニコニコ大百科」ロゴ

ニコニコ大百科のイメージ

公式略称は「ニコペ」、「ニコ百」である。非公式略称は「」、「百」など。

ニコニコで「大百科」と言うと本項をす事が多い。

運営会社はniconico全体の運営会社ドワンゴではなく、「株式会社大百科ニュース社」である。大百科ニュース社ドワンゴと同様に、株式会社カドカワ子会社。かつては「有限会社未来検索ブラジル」が運営していたが、2017年7月3日ニコニコ大百科事業が大百科ニュース社に承継された。

 切り替える   いっこ戻る 

ニコニコ大百科(-だいひゃっか、Nico Nico Pedianicopedia)とは、『あらゆる言葉について定義や意味、元ネタを解説する辞書・辞典』である。ニコニコ大百科TOPページにそう書かれてあるので間違いない。

また、一般の辞書や百科事典とは異なり利用者が自由に記述できるWikipediaと類似したUGCuser-generated contentWeb百科事典でもある。

 切り替える 


これはfloat属性を使って左右に寄せた要素をclear属性を使って回り込み解除する事で領域の高さの計算をブラウザ側に委ねているからです。
記事でも色々使った事はあると思いますが、非表示になっている部分でもこのようにちゃんと仕事をしてくれています。

それは分かったけど、どういう仕組みなん?
では、分かりやすくするのに同じものをoverflow: hidden;からoverflow: auto;へと切り替えてみましょう。スクロールバーに注するとどういった配置になっているのか理解できると思います。↓↓表示例↓↓


「ニコニコ大百科」ロゴ

ニコニコ大百科のイメージ

公式略称は「ニコペ」、「ニコ百」である。非公式略称は「」、「百」など。

ニコニコで「大百科」と言うと本項をす事が多い。

運営会社はniconico全体の運営会社ドワンゴではなく、「株式会社大百科ニュース社」である。大百科ニュース社ドワンゴと同様に、株式会社カドカワ子会社。かつては「有限会社未来検索ブラジル」が運営していたが、2017年7月3日ニコニコ大百科事業が大百科ニュース社に承継された。

 切り替える   いっこ戻る 

ニコニコ大百科(-だいひゃっか、Nico Nico Pedianicopedia)とは、『あらゆる言葉について定義や意味、元ネタを解説する辞書・辞典』である。ニコニコ大百科TOPページにそう書かれてあるので間違いない。

また、一般の辞書や百科事典とは異なり利用者が自由に記述できるWikipediaと類似したUGCuser-generated contentWeb百科事典でもある。

 切り替える 


スクロールバーを動かすと仕組みがよくわかりますね。構造が分かれば色々な応用ができるし複雑なようで意外と簡単だったりします。

注意点

ちょっと面倒です。ごめんなさい。

floatの特性を利用しているので右側にはみ出して隠れている部分から先に書きます。
ソースでの記述順序は以下の通り


(4)


(3)


(2)


(1)

表示されるレイアウトは以下の通りの順序になります。


(1)


(2)


(3)


(4)

記事の幅(width)が最大768px(スマホ版ipadサイズへの対応 ※ニコニコ大百科:HTML各要素のデフォルトCSSの該当部分参照)になるのでfloat: right;で右側に寄せたboxに付与するmargin-rightは-768px以上じゃないといけません。
また、大百科仕様で使える値の最大値が999.9999までに制限されているため単位はinを使用します。
上記のスマホ版ipadサイズの最大幅が768px(9in)なのでmargin-rightに付与する値は余裕を持たせて-10in; -20in;と10in刻みがいいでしょう。

ある程度のテンプレ



<div style="width: 100%; overflow: hidden;">
  <!--▼2番に表示する部分▼-->

  <div style="width: 100%; float: right; margin-right: -10in;">
    <a  name="hoge2" style="display: block; width: 100%; height: 1px;" id="hoge2"></a>
      

  内容

  </div><!--2番に表示する部分-->

<!--▼最初に表示する部分▼-->

  <div style="width: 100%; float: left;">
   <a  name="hoge" style="display: block; width: 100%; height: 1px;" id="hoge"></a>

  内容

  </div>
</div>
<div style="clear: both;"></div>

非表示の項を増やしたい場合は▼2番に表示する部分▼から2番に表示する部分の間の部分をコピペして項を追加してmargin-rightを適宜変更して使用して下さい。

同一ページリンク<a href="#hoge">とoverflow: hidden;を組み合わせた非表示部分を使って記述内容が変化する記事について従来の方法では不具合が発生しているため記述が未完成ながら暫定的に

使用例

など

 

この記事を編集する

掲示板

おすすめトレンド

急上昇ワード改

最終更新:2021/09/20(月) 09:00

ほめられた記事

最終更新:2021/09/20(月) 09:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP