ブラウザの表示領域が横長の場合のレイアウトで、スマホやタブレットを横に回転させた場合、またPCディスプレイでもブラウザのウインドウを横長にした場合で、利き手の設定が「右利き(デフォルト)」の場合に適用される。
横長画面右利きレイアウトの概要（PDF 別画面で開きます）
横長画面右利きレイアウトのBOX構造（PDF 別画面で開きます）
以下、ポイントとなる事項を列記する。
（１）全体構成
・body はブラウザ表示領域すべてとする。背景色は「18%グレー」、すなわち 16 進数カラーコードで「#767676」、RGB では「rgb(128, 128, 128)」となる。
・container は body の中に左上を基準として配置し、サイズは写真のサイズ（画素数）を基準にするものの、フル HD（1920px×1080px）サイズを上限とする。container 内に上下左右 5px の padding を確保した上で、要素を container の右下を基準に配置する。
・container の背景色は body の背景色と一致させる。つまり body と container の領域は一体のものとして見える。
・container の内容は全体として２段組み構成（2カラム構成）とする。
・左カラムには写真を配置、右カラムには「タイトル」、「撮影データ」、「アイコン」、「フッター」の４要素を上から順に配置する。
・CSS では最上位のブロック構成を Grid レイアウトで定義している。その Grid レイアウトは4行2列からなり、各アイテムの配置は次のようになっている。
図－1 Grid構成
（２）左カラム
・写真は左カラム全体を占有して表示する。CSS における Grid の表記では、「grid-row:1/5;grid-column:1/2」となる。
・写真はネイティブな画素数以上に拡大表示しない。しかし、ブラウザ表示領域が狭い場合には領域に合わせてその中で写真を最大に表示できるように写真のアスペクト比を維持しながら縮小表示する。
・写真の外周は 5px 幅の枠で囲んでいる。枠の色は #939393 で、18% グレーより約 15% 明るい色としている。枠を設ける理由は、額縁でいうところの「面金」とか「ライナー」の存在感を模したもので、これがあると実際の額縁感が少しは出ると思う。写真は mount ブロックに収め、枠は padding で実現している。
・mount ブロックの外側に仮想 mount ブロックがあり、mount ブロックは仮想 mount ブロックの中に上下左右センタリングで収容する。
・仮想 mount ブロック（pseudo_mount）は mount ブロックを包含する aspect 比3:2のボックスで、左カラムの中で右寄せ、上下中央で配置する。仮想 mount ブロックは写真を連続的に鑑賞する場合、大小、縦長・横長の写真が混在しても写真の中心点を移動しないようにするために採用する。
（３）右カラム
（ａ）右カラム全体として幅 154px 固定で、上から次の４つのボックスが並ぶ。
－タイトル：高さ auto
－撮影データ：高さ 1fr
－アイコン：高さ 80px
－フッター：高さ 15px
・ここで auto とは、タイトルの行数で変動することを意味する。また、1fr とは、右カラム全体に与えられた高さから auto と、他の要素の高さを引いた残りすべてという意味。つまり可変高。
（ｂ）タイトル
・右カラムの一番上に位置するので、CSS における Grid の表記では、grid-row:1/2;grid-column:2/3 となるところだが、実際は grid-row:1/2;grid-column:1/3 としている。図－１でいう 1-1 と 1-2 の領域を合わせて占有していることになる。これだと写真と重なってしまうのだが、ブラウザ表示領域のサイズに合わせて javascript で動的に title 要素に対して padding-left の設定を行い、タイトルの表示領域の左側にスペースを作り出している。そのスペースの幅(①)を写真の幅を考慮した値とすることによって、写真とタイトルが重なることはなく、かつ写真とタイトルの隙間を自由にコントロールすることができる。
・高さは固定で、折り返し行を含めて最大３行を想定している。３行を越えても Gridのauto 設定により、行高が調整される。
（ｃ）撮影データ
・右カラムの上から二番目に位置するので、CSS における Grid の表記では、grid-row:2/3;grid-column:2/3 となるところだが、実際は grid-row:2/3;grid-column:1/3 としている。図－１でいう 2-1 と 2-2の 領域を合わせて占有していることになる。これだと写真と重なってしまうのだが、タイトルの場合と同様にブラウザ表示領域のサイズに合わせて javascript で動的に撮影データボックスに対して padding-left の設定を行い、タイトルの表示領域の左側にスペースを作りだしている。そのスペースの幅(①)を写真の幅を考慮した値とすることによって、写真と撮影データが重なることはなく、かつ写真と撮影データの隙間を自由にコントロールすることができる。
・撮影データの中は、上にタイトルがあり、その下にテキスト行が収容される。この部分は少し複雑な構造になっている。
・撮影データは次の仕様で表示する。
－右カラムの二番目の段落の中で下詰めで表示する。
－撮影データは上下二段組みになっており、上段は"表題"で、「撮影DATA」と表示する。下段はデータを格納する s_data ボックスと、その子要素としての s1_data ボックスの二重構造からなる。撮影データのテキストは s_data の子要素として記述するものと、s_data の子要素である s1_data の子要素として記述するものの２つの構成からなる。この２つは画面表示上は同一ボックス内に記述されたように連続的に表示される。このように構造上のみ別々にし、スマホ横画面に置いて s1_data の表示を動的に非表示とすることによって、データのオーバーフローによる画面の乱れを防止する。
図－2 data_BOXの構造
－s_data ボックスの子要素として記述するテキストはスマホ横画面でも表示できる最低限の行数として、折り返し行を含めて４行までに運用規制する。
－s1_data ボックスは記述する行数に制限はない。行数が多くなって表示可能なエリアから溢れる場合は、下の行から非表示とするオーバーフローの処理を行う。
－オーバーフローの処理に際しては、行の上半分というような途中まで表示される状態を避けるため、行高単位で要素の高さを管理し、行単位でオーバーフローさせる。
－この仕様を実現させるため、javascript で写真のサイズやスクリーンのサイズから決まる条件を演算して、動的に要素の高さ（height）を設定している。要素の高さは Grid によって自動的に付与されるのであるが、s_dataを下揃え(align-self:end)としているため、オーバーフロー処理が行われず、s_datは上方向にオーバーフローし、かつheightはs_dataの子要素のheightの合計となり、結果としてオーバーフロー処理は行われない。
－そのため、containerのheightから逆算して、s_dataに与えることができる最大のheight値を算出し、それを動的にs_dataのheight値として設定する。その際、行単位でオーバーフロー処理させるために、行高刻みの数値にして設定する。
－s1_data ボックスはブラウザの表示領域縦幅が 329px 未満となった場合は、display:none で非表示とする。329px の根拠は、スマホ横画面の最低 height として 320px を想定し、その付近で、行の上下途中で表示が欠けることのない数値をブロック構造から算出したもの。
横長画面右利きレイアウトdataボックスのオーバーフロー処理（PDF 別画面で開きます）
（ｄ）アイコン
・右カラムの上から３番目のボックスで、ページを次に進める、前に戻す、あるいは上階層のインデックスに戻るといった操作を行うアイコンを表示する。
・アイコンは写真のサイズがどのように変わっても body すなわちブラウザ表示領域の固定ポジションから動かさない。操作性を確保する上で重要なポイントと考えている。
（ｅ）フッター
・著作権マークを表示する。