ãã®CSSã³ãŒãã¯ãLenisãšããã¹ã ãŒãºã¹ã¯ããŒã«ã©ã€ãã©ãªã®ã¹ã¿ã€ã«ãèšå®ããŠããŸããããŒãžã®é«ããèªåçã«èª¿æŽãããã¹ã¯ããŒã«åæ¢æã®ãªãŒããŒãããŒåäœãå¶åŸ¡ããŸãããŸãããGuardian Headline Fullããã©ã³ããã¡ããªãŒã®ã«ã¹ã¿ã ãã©ã³ããã§ãŒã¹ãå®çŸ©ããæ§ã
ãªãŠã§ã€ããšã¹ã¿ã€ã«ïŒã©ã€ããã¬ã®ã¥ã©ãŒãããã£ã¢ã ãã»ãããŒã«ããªã©ãããããéåžžçãšã€ã¿ãªãã¯çãå«ãïŒãç¹å®ã®ãŠã§ãã¢ãã¬ã¹ããç°ãªããã¡ã€ã«åœ¢åŒã§èªã¿èŸŒã¿ãŸãã
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
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-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@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;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
Guardian Headline Fullãã©ã³ããã¡ããªãŒã«ã¯ããã€ãã®ã¹ã¿ã€ã«ãå«ãŸããŠããããããããè€æ°ã®ãã©ãŒãããã§å©çšå¯èœã§ããã¬ã®ã¥ã©ãŒã¹ã¿ã€ã«ã¯ãã©ã³ããŠã§ã€ã400ãéåžžã®ãã©ã³ãã¹ã¿ã€ã«ã§ãWOFFãWOFF2ãTrueType圢åŒã®ãã¡ã€ã«ããããŸããã€ã¿ãªãã¯çããŠã§ã€ãã¯400ã§ãããã€ã¿ãªãã¯ã¹ã¿ã€ã«ã§ããããã£ã¢ã ãŠã§ã€ãïŒ500ïŒã¯éåžžã¹ã¿ã€ã«ãšã€ã¿ãªãã¯ã¹ã¿ã€ã«ã®äž¡æ¹ããããŸããåæ§ã«ãã»ãããŒã«ãïŒ600ïŒãšããŒã«ãïŒ700ïŒã®ãŠã§ã€ããéåžžçãšã€ã¿ãªãã¯çãçšæãããŠããŸãããã©ãã¯ãŠã§ã€ãã¯WOFF2圢åŒã§æäŸãããŠããŸãã
@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;
}
#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 {
/ ã«ãŒã«ã¯ããã«ç¶ããŸã /
}
}
ãã®CSSã³ãŒãã¯æ§ã
ãªèŠçŽ ã«ç¹å®ã®ã¹ã¿ã€ã«ãèšå®ããŸããã€ã³ã¿ã©ã¯ãã£ãã°ãªããã³ã³ãã³ãã§ã¯ãã¹ã¿ã³ããã¡ãŒã¹ãã»ã¯ã·ã§ã³ã®äžéšããã£ã³ã°ãåé€ããæ²¡å
¥åå³ã®ãã£ãã·ã§ã³ããã£ã³ã°ã調æŽããŸãããŸããã°ãªããã¬ã€ã¢ãŠãå
ã§ã©ã€ã³ãšã¡ã¿ããŒã¿ã®äœçœ®ãèšå®ããé«ããšããŒãžã³ãå®çŸ©ããŸãã
倧ããªç»é¢ã§ã¯ãã°ãªããã¯å®çŸ©ãããåå¹
ã䜿çšããŸããã¢ãã€ã«ããã€ã¹ã§ã¯ãèšäºããããŒã®ã¿ã€ãã°ã©ãã£ã倿Žããã»ã¯ã·ã§ã³åã倧æååããèè
åã®ã¹ã¿ã€ã«ã調æŽããŸãããŸããç»åãæ£ãã衚瀺ãããããã«ããåã蟌ã¿èŠçŽ åšèŸºã®ã¹ããŒã¹ã管çããŸãã
ã¹ã¯ããŒã«ããŒã«ãããã¯ã°ã©ããŒã·ã§ã³èæ¯ã§ã¹ã¿ã€ã«èšå®ããããã¥ãŒããŒãã®äžéšã«é
眮ãããŸããäžæ¹ãã¹ãã£ãããŒãã£ãã·ã§ã³ã«ã¯åºå®é«ããšçµ¶å¯Ÿäœçœ®ãäžããããŸãã
ã¹ãã£ãããŒãã£ãã·ã§ã³ããŒã¯ç»é¢å·Šäžã«é
眮ãããæãèæ¯è²ãæã¡ãŸãããã®å
容ãééã空ããŠé
眮ããããã«ãã¬ãã·ãã«ã¬ã€ã¢ãŠãã䜿çšããããã£ã³ã°ãå«ã¿ãŸãã倧ããªç»é¢ã§ã¯ãå·ŠããŒããŒã远å ããå·ŠããŒãžã³ã調æŽããŸãã
å
éšã«ã¯ããã£ãã·ã§ã³ãå«ããã£ãã·ã§ã³ã©ãããŒããããŸããåãã£ãã·ã§ã³ã¯ãã¬ãã¯ã¹è¡šç€ºã䜿çšããã¢ã€ãã éã«å°ããªã®ã£ããããããŸãããã£ãã·ã§ã³å
ã®ã¢ã€ã³ã³ã¯åºå®å¯žæ³ãšç¹å®ã®å¡ãã€ã¶ãè²ãæã¡ãŸãããã£ãã·ã§ã³ããã¹ãã¯ç¹å®ã®ãã©ã³ãã䜿çšããå¿
èŠã«å¿ããŠçç¥èšå·ã§åãè©°ããããèšäºã®ããã¹ãã«ã©ãŒãšäžèŽããŸãã
ãã£ãã·ã§ã³ã®ãã°ã«ãã¿ã³ã¯éæã§ããŒããŒã¬ã¹ã§ãããŒã®äžéšã«é
眮ãããŸãããã®ã¢ã€ã³ã³ã¯ãããŒæã«æ»ããã«å転ããæ¡å€§çž®å°ããŸããå±éæã«ã¯ããã£ãã·ã§ã³ããŒã®é«ãã調æŽããããã£ãã·ã§ã³ã¯åãè©°ããªãã§é垞衚瀺ããããã°ã«ã¢ã€ã³ã³ã®å転ãå€ãããŸãã
iOSããã³Androidããã€ã¹ã§ã¯ããã£ãã·ã§ã³æ®µèœã®ããŒãžã³ãåé€ãããç¹å®ã®ã¹ãã³èŠçŽ ã衚瀺ãŸãã¯é衚瀺ã«ãªããŸãããããã®ããã€ã¹ã§å±éæã«ã¯ãæåã®ãã£ãã·ã§ã³æ®µèœãå·Šã«ãããŒããã2çªç®ããããã¯è¡šç€ºãããŸããiOSã§ã¯ãã¹ãã£ãããŒããŒã®äžéšäœçœ®ã調æŽãããŸãã
CSSã«ã¹ã¿ã ããããã£ïŒCSS倿°ïŒã¯ãèæ¯ãããã¹ãããªã³ã¯ãã¢ã¯ã»ã³ããªã©ãæ§ã
ãªèšäºèŠçŽ ã®ããŒã¯ã«ã©ãŒã¹ããŒã ãå®çŸ©ããŸãããããã®å€æ°ã¯ã«ãŒãèŠçŽ ãšèšäºèŠçŽ ã«å¯ŸããŠèšå®ããããããŒç¶æ
ã«å¯ŸããŠäžéšèª¿æŽãå ããããŸãã
ã¡ãã£ã¢ã¯ãšãªã¯ããŒã¯ã«ã©ãŒã¹ããŒã ã®èšå®ãé©çšããæç€ºçã«ã©ã€ãã¹ããŒã ãéžæãããŠããªãéãããããã¯ã¯ã©ãŒããèæ¯ãªã©ã®èŠçŽ ã«ç¹å®ã®è²ãèšå®ããŸãã
èšäºããããŒã¯ãã¡ãã£ã¢ãã¿ã€ãã«ãæ¬æãªã©ã®ãšãªã¢ãé
眮ããããã«ã°ãªããã¬ã€ã¢ãŠãã䜿çšããŸããæ°Žå¹³ã¯ã©ã¹ã¯äžéšããŒãžã³ãšäžéšããã£ã³ã°ã远å ããŸããã¡ã€ã³æ¬æã³ã³ãã³ãã¯ãå°ããªç»é¢ã§ã¯è² ã®ãµã€ã