ç³ãèš³ãããŸããããCSSã³ãŒããæµæ¢ã§èªç¶ãªè±èªã«æžãæããããšã¯ã§ããŸãããCSSã¯æè¡çãªã¹ã¿ã€ã«ã·ãŒãèšèªã§ãããæ£æã®æžãæããç®çãšããããã¹ãã§ã¯ãªãããã§ããããå¥ã®ããã¹ãããããŸãããããæäŒãã§ããŸãã®ã§ããæäŸãã ããã
ãã®ããã¹ãã¯èªç¶èšèªã§ã¯ãªãããŠã§ããã©ã³ããå®çŸ©ããããã®CSSã³ãŒãã§ãããããæžãæããããšã¯ã§ããŸããããµãŒããŒãããã©ã³ããã¡ã€ã«ïŒGuardian HeadlineãGuardian Titlepieceãªã©ïŒãèªã¿èŸŒãããã®æè¡çãªæžåŒã«ãŒã«ãå«ãŸããŠããŸãããããããã°ããã®ã³ãŒããäœããããã®ããå¹³æãªè±èªã§èª¬æããããšã¯ã§ããŸãã
ããã¯ãGuardian Headline Fullããã©ã³ããã¡ããªãŒã®font-faceã«ãŒã«ãå®çŸ©ããCSSã³ãŒãã®æçã§ããæ§ã
ãªãã©ã³ãã®å€ªããšã¹ã¿ã€ã«ãæå®ããããããã«ç°ãªããã¡ã€ã«åœ¢åŒïŒwoff2ãwoffãtruetypeïŒã®ãœãŒã¹URLãèšå®ãããŠããŸãããã©ã³ããã¡ã€ã«ã¯ã¬ãŒãã£ã¢ã³ã®ã¢ã»ãããµãŒããŒã§ãã¹ããããŠããŸãããã®ã³ãŒãã«ã¯ãã¬ã®ã¥ã©ãŒãã€ã¿ãªãã¯ãããã£ã¢ã ãã»ãããŒã«ããããŒã«ãããã©ãã¯ã®åããªãšãŒã·ã§ã³ãå«ãŸãã察å¿ããfont-weightå€ã¯400ãã900ã®ç¯å²ã§ãã
ãã®ããã¹ãã¯CSSã³ãŒãã§ãããèªç¶èšèªã§ã¯ãããŸããããŠã§ããµã€ãã®ãã©ã³ãã¹ã¿ã€ã«ãšã¬ã¹ãã³ã·ãã°ãªããã¬ã€ã¢ãŠããå®çŸ©ããŠããŸããæè¡çãªã³ãŒããªã®ã§ãæµæ¢ãªè±èªã«æžãæããå¿
èŠã¯ãããŸãããããå¥ã®ããã¹ããå
±æããããšããŠãããªããããäžåºŠè²Œãä»ããŠãã ãããåãã§ãæäŒãããŸãã
没å
¥åãã£ãã·ã§ã³ä»ãã®ã€ã³ã¿ã©ã¯ãã£ããªã°ãªããå³ã®å Žåããã£ãã·ã§ã³ã®ã¹ã¿ã€ã«ã¯äžéšã«4pxã®ããã£ã³ã°ãé©çšããå·Šå³ãšäžéšã¯0ã«ããŸããã¡ã€ã³ã®èšäºæ¬æãã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ãã»ã¯ã·ã§ã³ãã³ã¡ã³ãã»ã¯ã·ã§ã³ããã£ãŒãã£ãŒæ¬æãšãªã¢ã§ã¯ãã©ã€ã³ãšã¡ã¿æ
å ±ã®ã°ãªããèŠçŽ ã¯ãã°ãªããã®è¡2ã»å1ããè¡5ã»å2ã«ãŸãããã°ãªããé åã«é
眮ãããŸããã©ã€ã³èŠçŽ ã®é«ãã¯ã³ã³ãã³ãã«åãããŠèšå®ãããäžéšããŒãžã³ã¯5pxã§ããã¡ã¿èŠçŽ ã®äžéšããŒãžã³ã¯18pxã§ããç»é¢å¹
ã81.25em以äžã®å Žåããããã®ã»ã¯ã·ã§ã³ã®ã°ãªããã¬ã€ã¢ãŠãã¯219pxã1pxã620pxã80pxã300pxã®åã䜿çšããŸããiOSããã³Androidããã€ã¹ã§ã¯ãèšäºããããŒã®ã¹ã¿ã³ããã¡ãŒã¹ãããã¹ãã¯Guardian Headlineãã©ã³ããã¡ããªãŒã®ããã£ã¢ã ãŠã§ã€ãã䜿çšããŸããèšäºã®ããã«ãŒã»ã¯ã·ã§ã³ã¯ãããã¯ãšããŠè¡šç€ºããããã®æåã®æåã¯å€§æåã«ãªããŸããkeyline-4èŠçŽ ã«ã¯äžéšã«12pxã®è¿œå ããã£ã³ã°ããããŸããã¡ã¿ã»ã¯ã·ã§ã³ã®èè
åã¯Guardian Headlineãã©ã³ãã®ããŒã«ããŠã§ã€ãã䜿çšãããã®äžã®ãªã³ã¯ãããŒã«ãã«ãªããŸããèšäºå
ã®ç»åãã£ã®ã¥ã¢ã¯ãå
éšã³ã³ããã®é«ããautoã«èšå®ãããŠããŸãããšã¬ã¡ã³ãã¢ãã ã«ç¶ã段èœã«ã¯äžéšããŒãžã³ããããŸãããã«ã¹ã¿ã ãã©ã³ãã¯Guardian Headline Fullçšã«å®çŸ©ãããŠãããã©ã€ããšã©ã€ãã€ã¿ãªãã¯ã¹ã¿ã€ã«ãã¬ãŒãã£ã¢ã³ã®ã¢ã»ãããµãŒããŒããæäŸãããŠããŸãã
ãã®ããã¹ãã¯ãŠã§ããã©ã³ããå®çŸ©ããCSSã³ãŒãã®ããã«èŠãããããæžãæããããšã¯ã§ããŸãããèªç¶èšèªã®ã³ã³ãã³ãã§ã¯ãªããæè¡çãªæžåŒã«ãŒã«ïŒURLããã©ã³ããŠã§ã€ããå«ãfont-face宣èšãªã©ïŒãå«ãŸããŠãããæµæ¢ãªè±èªã®æ£æã«å€æããããšãæå³ãããã®ã§ã¯ãããŸããã
ããèšäºã段èœãæç« ãªã©ãå¥ã®ããã¹ããèªç¶ã§æµæ¢ãªè±èªã«æžãæããŠã»ããå Žåã¯ãå
±æããŠããã ããã°åãã§ãæäŒãããŸãã
以äžã¯ãæµæ¢ã§èªç¶ãªè±èªã«æžãæããããã¹ãã§ãïŒ
```css
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Guardian Titlepiece';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
[data-gu-name="media"]:has(figure.loop) figure.loop figcaption:not(.hidden) {
z-index: 6;
}
[data-gu-name="media"]:has(figure.loop) figure.loop button[data-link-name*="gu-video-loop"] {
align-self: flex-end;
margin-bottom: 40px;
margin-right: 3px;
}
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="unmute-icon"]),
[data-gu-name="media"]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid="mute-icon"]) {
/ å¿
èŠã«å¿ããŠç¹å®ã®ã¹ã¿ã€ã«ãããã«è¿œå /
}
```
ãã©ãŒããããæŽçããé©åãªã¹ããŒã·ã³ã°ã远å ããå
ã®CSSã«ãŒã«ãšå€ããã¹ãŠä¿æãããŸãŸãã³ãŒããããèªã¿ãããããŸããã.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ ããã§ã¯ç¹å®ã®ã¹ã¿ã€ã«ã¯å®çŸ©ãããŠããŸãããããããããã£ããã¹ã¿ã€ã«ã®å¯èœæ§ã®ããã«ã»ã¬ã¯ã¿ã¯ä¿æãããŠããŸã /
}ããã¯CSSã³ãŒãã®ãããã¯ã§ãããèªç¶ãªè±èªã«æžãæããããã¹ãã®äžç¯ã§ã¯ãããŸããããŠã§ãããŒãžçšã®ã»ã¬ã¯ã¿ãšã¹ã¿ã€ã«ã«ãŒã«ãå«ãŸããŠãããããããã¬ãŒãã£ã¢ã³ã®ãããªãã¥ãŒã¹ãµã€ãã®ãã®ã§ããããæžãæãçšã®å¥ã®ããã¹ããæäŸããããšããŠãããªãããããå
±æããŠãã ãããæµæ¢ã§èªç¶ãªè±èªã«ãããæäŒããããŸããfigure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniturããã¯CSSã³ãŒãã®ãããã¯ã§ãããèªç¶ãªè±èªã«æžãæããããã¹ãã§ã¯ãããŸããããŠã§ãããŒãžã®ã¬ã€ã¢ãŠãçšã®ã¹ã¿ã€ã«ã«ãŒã«ãå«ãŸããŠãããã»ã¬ã¯ã¿ãããããã£ãã¡ãã£ã¢ã¯ãšãªãå«ãŸããŠããŸããããæžãæãçšã®å¥ã®ããã¹ããæäŸããããšããŠãããªãããããå
±æããŠãã ãããæµæ¢ã§èªç¶ãªè±èªã«ãããæäŒããããŸãããã®ããã¹ãã¯æè¡çãªCSSã³ãŒãã®æçã®ããã«èŠããæ£æã®äžç¯ã§ã¯ãããŸããããŠã§ããµã€ãïŒããããã¬ãŒãã£ã¢ã³ã®èšäºããŒãžïŒã®ã»ã¬ã¯ã¿ãšã¹ã¿ã€ã«ã«ãŒã«ãå«ãŸããŠãããã¢ãã€ã«ããã€ã¹ïŒiOSããã³AndroidïŒãã¿ãŒã²ããã«ããŠããŸããã³ãŒãã§ããããããæµæ¢ã§èªç¶ãªè±èªãã«æžãæãããšããã®ã¯éåžžã®æå³ã§ã¯é©çšã§ããŸããããã ãããã®ã³ãŒããäœããããã®ããå¹³æãªè±èªã§èª¬æããããšã¯ã§ããŸãã
---
CSSã³ãŒãã®èª¬æïŒ
ãã®ã³ãŒãã¯ãã¢ãã€ã«ããã€ã¹ïŒiOSããã³AndroidïŒã®èšäºããŒãžã«ç¹å®ã®ã¹ã¿ã€ã«ã«ãŒã«ãé©çšããŸãã以äžããã®å
容ã§ãïŒ
1. æåã®æåã®ã¹ã¿ã€ã«ïŒ ãã£ãŒãã£ãŒãã¹ã¿ã³ããŒãããŸãã¯ã³ã¡ã³ãèšäºå
ã®ç¹å®ã®èŠçŽ ïŒç»åããµã€ã³ã€ã³ããã³ãããªã©ïŒã®åŸã®æåã®æ®µèœã§ã¯ãæåã®æåãé»ïŒãŸãã¯ãã©ãŒã«ããã¯ã«ã©ãŒïŒã«è²ä»ããããŸããããã¯ãããããã£ããã匷調ã®ããã®äžè¬çãªãã¶ã€ã³éžæã§ãã
2. ããããŒã®é«ãïŒ ã¢ãã€ã«ã§ã¯ãèšäºããããŒã»ã¯ã·ã§ã³ã®é«ãããŒãã«èšå®ãããé衚瀺ãŸãã¯æããããŸããŸãã
3. ãã¡ããã£ãŒã©ãããŒã®ããã£ã³ã°ïŒ èšäºã©ãã«ãšèŠåºããå«ãé åã«ã¯ãå°ããªããã£ã³ã°ïŒäžäž4pxãå·Šå³10pxïŒãé©çšãããŸãã
4. ã©ãã«ã®ã¹ã¿ã€ã«ïŒ èšäºã©ãã«ïŒããã¥ãŒã¹ãããã¹ããŒãããªã©ïŒã¯ãã»ãªããã©ã³ãïŒãžã§ãŒãžã¢ãªã©ïŒã䜿çšããŠããŒã«ãã§è¡šç€ºãããã«ã¹ã¿ã 倿°ïŒããããã»ã¯ã·ã§ã³ã®è²ïŒã䜿çšããŠè²ä»ããããŸããããã¹ãã¯å€§æåã«ãªããŸãã
5. èŠåºãã®ã¹ã¿ã€ã«ïŒ ã¡ã€ã³ã®èŠåºãïŒh1ïŒã¯ããã©ã³ããµã€ãº32ãã¯ã»ã«ãããŒã«ããäžéšã«ããã£ã³ã°ãã»ãŒé»ã«è¿ãããŒã¯ã«ã©ãŒã«èšå®ãããŸãã
6. ç»åã®åŠçïŒ ãã¡ããã£ãŒã©ãããŒå
ã®ç»åãã£ã®ã¥ã¢ã«ã¯ãããã§ã¯ç¹å®ã®ã¹ã¿ã€ã«ã¯é©çšãããŠããŸããããã»ã¬ã¯ã¿ã¯ä»ã®å Žæã§ã¿ãŒã²ããã«ãããå¯èœæ§ã瀺åããŠããŸãã
èŠããã«ããã®ã³ãŒãã¯ã¢ãã€ã«ããã€ã¹ã§èšäºã®èŠåºããšã©ãã«ãäžè²«ããŠã¹ã¿ã€ã«èšå®ãããããããŒãé衚瀺ã«ãªããæåã®æ®µèœã®æåã®æåã匷調衚瀺ãããäžæ¹ã§ããµã€ãã®èŠèŠçã¢ã€ãã³ãã£ãã£ãç¶æããããšãä¿èšŒããŸããfigure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOSããã³Androidã§ãèšäºã³ã³ããå
ã®ãã¡ããã£ãŒã©ãããŒå
ã®ç»åèŠçŽ ã«å¯Ÿã㊠/
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ iOSããã³Androidã§ãèšäºã³ã³ããå
ã®ã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³ã«å¯Ÿã㊠/
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ iOSããã³Androidã§ãã¹ã¿ã³ããã¡ãŒã¹ãå
éšã»ã¯ã·ã§ã³å
ã®æ®µèœã«å¯Ÿã㊠/
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ iOSããã³Androidã§ãã¹ã¿ã³ããã¡ãŒã¹ãå
éšã»ã¯ã·ã§ã³å
ã®ãªã³ã¯ïŒãªã¹ãé
ç®ãå«ãïŒã«å¯Ÿã㊠/
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ iOSããã³Androidã§ãã¹ã¿ã³ããã¡ãŒã¹ãå
éšã»ã¯ã·ã§ã³å
ã®ãªã³ã¯ã®ãããŒç¶æ
ã«å¯Ÿã㊠/
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
/ ããã§ã¯ç¹å®ã®ã¹ã¿ã€ã«ã¯å®çŸ©ãããŠããŸãããäžè²«æ§ã®ããã«ä¿æãããŠããŸã /
}iOSããã³Androidããã€ã¹ã§ããã£ãŒãã£ãŒãã¹ã¿ã³ããŒãããŸãã¯ã³ã¡ã³ãèšäºã®ã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³å
ã®ãªã³ã¯ã«ãããŒãããšãäžç·ã®è²ãæ°ãããã©ãŒã®è²ã«äžèŽããå¿
èŠããããŸãã
ãããã®ããã€ã¹ã§ã¯ããã¡ããã£ãŒã©ãããŒå
ã®ã¡ã¿ã»ã¯ã·ã§ã³ã«ããŒãžã³ããã£ãŠã¯ãªããŸããã
ãŸããiOSããã³Androidã§ã¯ããã€ã©ã€ã³ã®ããã¹ããèè
åãããã³ãã€ã©ã€ã³ãŸãã¯ã¡ã¿ãã€ã©ã€ã³å
ã®ãªã³ã¯ã¯ãæ°ãããã©ãŒã®è²ã䜿çšããå¿
èŠããããŸãã
meta__miscã»ã¯ã·ã§ã³ã«ã¯ããã£ã³ã°ããªãããã®äžã®SVGã¢ã€ã³ã³ã¯å€æŽãããªããŸãŸã«ããå¿
èŠããããŸããper .meta__misc svg {
stroke: var(--new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element--showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element--showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element--show