DummyImagesURIs
日本語の母語話者により校閲必要
恐れ入りますが、当ページは未だ日本語の母語話者に依り校閲されていません。
（※自動翻訳は利用されませんでした）
あらゆる大小と幅・高の比率の Base64エンコード された簡易な画像（事実上単調な背景と幅・高の表記）を含めている連想配列系のオブジェクト。 エンコードの御蔭で、インターネット接続が無くても画像が表示されます。 こう言った画像をアダプティブレイアウトのテストとして使えば便利で、若しくは直ぐ使える実画像が無い事が多い開発の初期段階に使えば良い。
初期的に、DummyImagesURIsは下記のキーを持っている。
aspectRatio19x6- 19 x 6比率の画像
aspectRatio4x3- 4 x 3比率の画像
wideAndLow- 非常に長いがとても低い画像
highAndNarrow- 非常に高いがとても短い画像
small- 小さな画像
DummyImagesURIsオブジェクトの望ましいプロパティへのアクセス表現をクリップボードへコピー
するには該当している画像をクリックして下さい。
問題学
ウェブ開発者達にとっては、同様な画像（例えば何れかの商品の写真からなりたっているミニギャラリー）は同じ大小か、少なくとも同じ幅・高比率であれば便利だが、 事実が異なる事が多い。 依頼側は異なる大小・比率の写真を用意してはいるが、受注側から「高度な専門家だから何と上手く表示させてくれる」と期待している。
レイアウトは本当に様々な画像に対応されているとある程度安心するには、異なる大小と幅・高さ比率の画像（幅が数倍の高さに成っていると言った極端な場合を含めて）
が何枚か直ぐ使える様にしなければいけない。
こう言った揃いが用意してあれば、使えば良い。
然し十中八九、こう言った直ぐ使える揃いが無くて、用意する事も時間が無い。
此の様な状況の為こそDummyImagesURIsが用意してある。
例
上記のクリック可能な画像カードが下記の様に作ってあります。
ul.DummyImagesURIsGallery
each imageURI, key in DummyImagesURIs
li
button(
aria-label=`オブジェクト「DummyImagesURIs」の「${ key }」プロパティへのアクセス表現をコピーする`
)
span(
role="presentation"
style=`background-image: url("${ imageURI }");`
)
@require "../../../../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
.DummyImagesURIsGallery
display grid
grid-template-columns repeat(auto-fit, minmax(7rem, 1fr));
gap 0.5rem
margin-top 0.9rem
pushTargetFromSelf({ targetElementSelector: ".Article-Heading2", y: 1.6rem })
li
display flex
flex-direction column
button
ButtonLikeElementsPrimer()
display flex
justify-items center
align-items center
flex-direction column
row-gap 0.8rem
cursor pointer
background-image linear-gradient(lightgoldenrodyellow, aliceblue)
&:hover
transform scale(1.05)
transition transform 1s ease-in-out
span
width 100%
aspect-ratio 1 / 1
margin-left auto
margin-right auto
align-self center
background-size contain
background-position center
background-repeat no-repeat
code
font-family Consolas, monaco, monospace
Paddings({
horizontalSymmetric: 0.5rem,
bottom: 0.3rem
})
applyTextGeometryWithoutExtraSpaceCausedByLineHeight({
fontSize: 1rem,
lineSpacing: 0.4,
mustAllowWordsBreakingAnywhere: true
})
font-weight bold
color: ShadesOfGray__39ColorsW3C_Palette[12]
通信販売ストア専用のミニギャラリーの様なものを作らなければいけないなら、上記のコードを基本にし、上に選択中の写真の表示の為大きい区域を用意すれば良い。