ハリーと共に：彼のファンたちの機知、スタイル、そして楽しさを、ポラロイド写真に収めて。
以下は、提供されたCSSコードを日本語に翻訳したものです。コードの構造やURL、プロパティ値は変更せず、コメントや説明部分のみを日本語にしています。
```css
/* 記事本文のインタラクティブグリッド */
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name="body"] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body > div .content--interactive-grid .content__standfirst,
.content--interactive > div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name="body"] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/* 元のテキストはここで途切れています */
}
}
/* キャプションのパディング */
figcaption {
padding: 4px 0 0;
}
/* ラインとメタのグリッドエリア設定 */
#article-body > div .content--interactive-grid [data-gu-name="lines"],
#article-body > div .content--interactive-grid [data-gu-name="meta"],
.content--interactive > div .content--interactive-grid [data-gu-name="lines"],
.content--interactive > div .content--interactive-grid [data-gu-name="meta"],
#comment-body .content--interactive-grid [data-gu-name="lines"],
#comment-body .content--interactive-grid [data-gu-name="meta"],
[data-gu-name="body"] .content--interactive-grid [data-gu-name="lines"],
[data-gu-name="body"] .content--interactive-grid [data-gu-name="meta"],
#feature-body .content--interactive-grid [data-gu-name="lines"],
#feature-body .content--interactive-grid [data-gu-name="meta"] {
grid-area: 2 / 1 / 5 / 2;
}
#article-body > div .content--interactive-grid [data-gu-name="lines"],
.content--interactive > div .content--interactive-grid [data-gu-name="lines"],
#comment-body .content--interactive-grid [data-gu-name="lines"],
[data-gu-name="body"] .content--interactive-grid [data-gu-name="lines"],
#feature-body .content--interactive-grid [data-gu-name="lines"] {
height: max-content;
margin-top: 5px;
}
#article-body > div .content--interactive-grid [data-gu-name="meta"],
.content--interactive > div .content--interactive-grid [data-gu-name="meta"],
#comment-body .content--interactive-grid [data-gu-name="meta"],
[data-gu-name="body"] .content--interactive-grid [data-gu-name="meta"],
#feature-body .content--interactive-grid [data-gu-name="meta"] {
margin-top: 18px;
}
@media (min-width: 81.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name="body"] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 219px 1px 620px 80px 300px;
}
}
/* iOS/Android の記事ヘッダー */
body.ios .article__header .standfirst__inner p,
body.android .article__header .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 500;
}
body.ios .article__header .article-kicker__section,
body.android .article__header .article-kicker__section {
display: block;
}
body.ios .article__header .article-kicker__section:first-letter,
body.android .article__header .article-kicker__section:first-letter {
text-transform: uppercase;
}
body.ios .article__header .keyline-4,
body.android .article__header .keyline-4 {
padding-top: 12px !important;
}
body.ios .article__header .meta__misc .byline__author,
body.android .article__header .meta__misc .byline__author {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
font-weight: 700;
}
body.ios .article__header .meta__misc .byline__author a,
body.android .article__header .meta__misc .byline__author a {
font-weight: 700;
}
body.ios .article figure.element-image .figure__inner,
body.android .article figure.element-image .figure__inner {
height: auto !important;
}
body.ios .article figure.element-atom + p,
body.android .article figure.element-atom + p {
margin-top: 0;
}
/* スクリプト有効時のインタラクティブ記事の初期状態 */
@media (scripting: enabled) {
:root article.content--interactive > div,
:root .article {
opacity: 0;
overflow: hidden;
}
:root.interactive-loaded article.content--interactive > div,
:root.interactive-loaded .article {
opacity: 1;
transition: opacity 1s ease;
overflow: unset;
}
}
/* テーマカラー変数 */
[data-article-theme="News"] {
--active-pillar-100: #660505;
--active-pillar-200: #8b0000;
--active-pillar-300: #ab0613;
--active-pillar-400: #c70000;
--active-pillar-500: #ff5943;
--active-pillar-600: #ffbac8;
--furniture-card-gradient-color: rgba(139, 0, 0, 0.6);
}
[data-article-theme="Lifestyle"] {
--active-pillar-100: #510043;
--active-pillar-200: #650054;
--active-pillar-300: #7d0068;
--active-pillar-400: #bb3b80;
--active-pillar-500: #ffabdb;
--active-pillar-600: #fec8d3;
--furniture-card-gradient-color: rgba(101, 0, 84, 0.6);
}
[data-article-theme="Culture"] {
--active-pillar-100: #3e3323;
--active-pillar-200: #574835;
--active-pillar-300: #6b5840;
--active-pillar-400: #866d50;
--active-pillar-500: #eacca0;
--active-pillar-600: #e7d4b9;
--furniture-card-gradient-color: rgba(87, 72, 53, 0.6);
}
[data-article-theme="Sport"] {
--active-pillar-100: #003c60;
--active-pillar-200: #004e7c;
--active-pillar-300: #005689;
--active-pillar-400: #0077b6;
--active-pillar-500: #00b2ff;
--active-pillar-600: #90dcff;
--furniture-card-gradient-color: rgba(0, 78, 124, 0.6);
}
/* ツールバーの高さと表示領域 */
:root {
--top-toolbar-height: 58px;
--bottom-toolbar-height: 56px;
--visible-height: calc(100vh - var(--top-toolbar-height));
}
[data-app-os="ios"] {
--top-toolbar-height: 44px;
--bottom-toolbar-height: 50px;
--top-toolbar-small: 20px;
--visible-height: calc(100vh - var(--bottom-toolbar-height));
}
@media (min-height: 670px) {
[data-app-os="ios"] {
--bottom-toolbar-height: 84px;
--top-toolbar-height: 44px;
}
}
@media (min-height: 800px) {
[data-app-os="ios"] {
--top-toolbar-height: 94px;
}
}
/* トップバナー広告 */
.top-banner-ad-container {
display: none;
}
/* インタラクティブ記事の内側 */
.content--interactive > div {
padding: 0;
}
/* 中画面以上でのグリッド調整 */
@media (min-width: 61.25em) {
.content--interactive-grid {
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body"
".";
}
}
@media (min-width: 71.25em) {
.content--interactive-grid {
grid-template-columns: 79px 1px auto 79px;
grid-column-gap: 10px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
}
@media (min-width: 81.25em) {
.content--interactive-grid {
grid-template-columns: 159px 1px auto 159px;
}
}
/* タイトルセクション */
[data-gu-name="title"] {
height: 0;
overflow: hidden;
}
/* メインコンテンツ */
#maincontent {
margin-top: 0;
}
@media (min-width: 46.25em) {
#maincontent {
padding-right: 0;
}
}
/* インタラクティブメインカラム */
.content__main-column--interactive {
position: relative;
}
.content__main-column--interactive .element-atom {
height: 0;
margin: 0;
padding: 0;
}
/* メディアセクション */
[data-gu-name="media"] {
position: sticky;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
[data-gu-name="media"]::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
[data-gu-name="media"].text-expanded::after {
opacity: 1;
}
@media (min-width: 46.25em) {
[data-gu-name="media"] {
width: 740px;
margin-left: 0;
}
}
@media (min-width: 61.25em) {
[data-gu-name="media"] {
width: 630px;
margin-left: auto;
}
}
/* メディア内のキャプション */
[data-gu-name="media"] figcaption {
padding-top: 40px;
}
/* 画像とライトボックス */
[data-gu-name="media"] img,
[data-gu-name="media"] gu-island[name="AppsLightboxImage"] {
position: absolute;
opacity: 0;
transition: opacity 0.5s ease;
}
[data-gu-name="media"] img span,
[data-gu-name="media"] gu-island[name="AppsLightboxImage"] span {
display: none;
}
[data-gu-name="media"] img div,
[data-gu-name="media"] gu-island[name="AppsLightboxImage"] div {
height: 100%;
}
[data-gu-name="media"] .checkbox-label {
display: none;
}
@media (min-width: 46.25em) {
[data-gu-name="media"] a button {
opacity: 1;
z-index: 1000;
}
}
/* 画像の配置
