Asemointi CSS:n avulla

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla.

Aihe on käsitelty hyvin myös MDN:n dokumentissa CSS layout.

1. CSS Flow Layout

HTML:n elementit voidaan ryhmitellä kahteen kategoriaan: block-tason elementteihin ja inline-elementteihin. Block-tason elementeillä, joita ovat esimerkiksi div ja p, merkitään osioita tai isompia kokonaisuuksia. Inline-tason elementit, kuten a ja img, ovat pienempi osa joko toista inline-elementtiä tai block-elementtiä.

1.1 Block (lohko) -tason elementti

• Voi sisältää block-elementtejä (esimerkiksi div toisen div-elementin sisällä) ja inline-elementtejä (esimerkiksi img p-elementin sisällä).
• Oletuksena alkaa ja päättyy rivinvaihtoon, eli lohkot tulevat pystysuunnassa peräkkäin.
• Käytetään rakennuspalikkana isompien layout-rakenteiden luomiseen, toisin kuin inline-elementtejä.
• Vie vaakasuunnassa kaiken käytettävissä olevan tilan.
• Yhdistelee pystysuunnassa peräkkäisiä marginaaleja. Jos dokumentissa on peräkkäin kaksi p-elementtiä, joista ensimmäisellä on 1 em alamarginaalia ja toisella 2 em ylämarginaalia, väliin jää 2 em eikä 3 em. Katso Mastering margin collapsing.
• vertical-align-ominaisuus ei vaikuta block-elementteihin vaan ainoastaan inline-elementteihin.

1.2 Inline (teksti) -tason elementti

• Sisältää dataa (esimerkiksi a sisältää linkin tekstin) ja muita inline-elementtejä (esimerkiksi span voi sisältää em-merkittyä tekstiä).
• Ei oletuksena ala eikä pääty rivinvaihtoon. Tulee vaakasuunnassa peräkkäin samalle riville, ja jatkuu seuraavalle riville jos tila ei riitä.
• Ylä- ja alamarginaalilla ei ole vaikutusta, ellei kyseessä ole inline-block-tyyppinen elementti.
• width- ja height-ominaisuuksilla ei ole vaikutusta.
• text-align-ominaisuudella ei ole vaikutusta itse inline-elementtiin. Se asetetaan sen sisältävään lohkoon.

Normaalisti block-tason elementit järjestyvät allekkain äitilohkon vasempaan laitaan ja inline-elementit vierekkäin, kunnes äitilohkon leveys on täyttynyt. CSS-ominaisuuksilla voidaan kuitenkin irrottaa tietyt elementit perusjärjestyksestä ja asemoida ne sivulle uuteen paikkaan. Katso Visual formatting model.

2. display-ominaisuus

CSS:n display-ominaisuudella voi vaihtaa elementin käyttäytymistapaa. Yksinkertaisimmillaan muutetaan lohko tekstitason elementiksi tai toisin päin.

2.1 Esimerkki block- ja inline-elementeistä

Lisätietoa: Inline formatting context (MDN).

3. Laatikkomallin koko

Asemoinnin yhteydessä on tärkeä ymmärtää, miten CSS laskee elementin koon. Katso CSS box model sekä CSS-luennon luku 9.

• width- ja height-ominaisuudet asettavat elementin sisältölaatikon koon. Tämän päälle lisätään vielä mahdollinen täyte (padding) ja raja (border).
• box-sizing: content-box on oletustoimintamalli.
• box-sizing: border-box sisällyttää rajan ja täytteen elementin kokoon, jolloin width tarkoittaa koko laatikon leveyttä.
• Marginaali lisätään aina elementin koon päälle box-sizing-arvosta riippumatta.

3.1 Box-sizing-esimerkki

4. Listojen muotoilu

Listat eli ul- tai ol-elementti ja niihin liittyvä li-elementti ovat joskus kinkkisiä muotoilla.

• Listan listamerkki määrätään list-style-type-ominaisuudella. Arvo none poistaa merkin kokonaan.
• Listamerkin sijaintipaikka määrätään list-style-position-ominaisuudella. Oletusarvo outside sijoittaa merkin listan alkion sisältölaatikon ulkopuolelle, arvo inside sen sisään osaksi tekstiä.
• Kun merkki on ulkopuolella, se piirtyy ul- tai ol-elementin täytteen tai marginaalin alueelle. Jos molemmat ovat nollia, merkki jää elementin alueen ulkopuolelle ja voi leikkautua pois näkyvistä. Varmista siis, että listalla on riittävästi vasenta täytettä.
• Listamerkin ulkoasua voi muotoilla ::marker-pseudoelementillä, esimerkiksi li::marker { color: red; }.

4.1 Listamuotoiluesimerkki

5. Liu'utus (float)

float-ominaisuudella voidaan irrottaa lohko normaalista dokumenttivirrasta ja liu'uttaa se vasempaan tai oikeaan laitaan. Muu sisältö kiertää liu'utetun lohkon rinnalle, ellei tätä kielletä clear-ominaisuudella.

.sisaltaa-floatin {
  display: flow-root;
}

5.1 Esimerkki float-ominaisuudesta

Lisätietoa: float ja clear (MDN).

6. Flexbox-asemointi

Flexbox on yksi kätevimpiä ja skaalautuvimpia tapoja tehdä asemointia. Perusongelma asemoinnin kanssa on saada aikaan monisarakkeinen sivusommittelu, ja flexbox tekee sen helpoksi.

• Flexbox sijoittaa elementit peräkkäin samalle akselille, pystyyn tai vaakaan, ja kutistaa niitä tarvittaessa.
• flex-direction-ominaisuudella asetetaan akselin suunta. Arvot ovat row, row-reverse, column ja column-reverse.
• Oletuksena kaikki tungetaan samalle akselille. Rivityksen saa käyttöön flex-wrap-ominaisuudella.
• gap-ominaisuudella asetetaan alkioiden väli.
• order-ominaisuudella voi määrätä alkioille eri järjestyksen kuin dokumentissa oleva.

6.1 Flexbox-esimerkki 0

6.2 Flexbox-esimerkki 1

6.3 Alkioiden koko: flex-grow, flex-shrink ja flex-basis

Yksittäisen alkion laajenemiseen ja kutistumiseen vaikutetaan kolmella ominaisuudella.

Useimmiten nämä kolme kirjoitetaan yhteen flex-lyhennemerkinnällä, jonka arvot ovat järjestyksessä flex-grow, flex-shrink ja flex-basis:

.alkio {
  flex: 0 1 auto;   /* oletus: ei laajene, kutistuu, perusleveys width-arvosta */
  flex: initial;    /* sama kuin 0 1 auto */
  flex: auto;       /* sama kuin 1 1 auto: laajenee ja kutistuu */
  flex: none;       /* sama kuin 0 0 auto: ei laajene eikä kutistu */
  flex: 1;          /* sama kuin 1 1 0: kaikki alkiot jakavat tilan tasan */
}

.container {
  display: flex;
  gap: 1em;
}

.sivupalkki { flex: 1; }
.sisalto    { flex: 3; }

.alkio {
  flex: 1;
  min-width: 0;
}

6.4 Flexbox-esimerkki 2

6.5 Flexbox-esimerkki 3

6.6 Tasaus ja keskitys flexboxissa

Alkioiden tasaus poikkiakselin suunnassa tapahtuu align-items-ominaisuudella:

Yksittäinen alkio voi ylimääritellä oman tasauksensa poikkiakselin suunnassa align-self-ominaisuudella. Sen arvot ovat samat kuin align-items-ominaisuudella, ja lisäksi auto, joka on oletus ja tarkoittaa säiliön arvon perimistä.

Alkioiden tasaus pääakselin suunnassa tapahtuu justify-content-ominaisuudella. Käytettävissä ovat samat flex-start, flex-end ja center kuin edellä, sekä lisäksi kolme tilanjakoarvoa:

6.7 Flexbox-esimerkki 4

Lisätietoa: Aligning items in a flex container (MDN).

6.8 Flexboxiin liittyvät CSS-ominaisuudet

Voit harjoitella flexboxia Flexbox Froggy -pelillä.

7. CSS-ruudukko (grid)

Gridillä voi määritellä sivulle tai sen osaan ruudukon, jonka eri ruutuihin voi sijoittaa haluttuja lohkoja. Ruudukko koostuu riveistä ja sarakkeista.

• grid-template-columns asettaa sarakkeiden lukumäärän ja leveyden, grid-template-rows vastaavasti rivit.
• Grid tuntee oman fr-yksikön. 1fr tarkoittaa yhtä joustavaa osuutta käytettävissä olevasta tilasta, ja 2fr on kaksi kertaa leveämpi kuin 1fr.
• gap asettaa ruutujen välit. Erikseen column-gap ja row-gap.
• Grid säätää rivien ja sarakkeiden koon automaattisesti sisällön mukaan. Koon voi määrätä itse ominaisuuksilla grid-auto-rows ja grid-auto-columns.

.ruudukko {
  display: grid;
  grid-template-columns: 1fr 3fr;   /* kaksi saraketta suhteessa 1:3 */
  gap: 1em;
}

7.1 Itsestään mukautuva ruudukko

Yhdistelmä repeat(), auto-fit ja minmax() on gridin hyödyllisin yksittäinen rakenne. Se sovittaa sarakkeiden määrän tilan mukaan ilman yhtäkään mediakyselyä:

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  gap: 1em;
}

Sääntö tarkoittaa: tee niin monta saraketta kuin mahtuu, kunkin vähimmäisleveys on 15 em, ja jaa ylijäävä tila sarakkeiden kesken tasan. Kapealla näytöllä sarakkeita on yksi, leveällä niitä on useita.

7.2 Ruutujen nimeäminen

Suositeltavin tapa sijoittaa lohkot ruudukkoon on nimetä alueet grid-template-areas-ominaisuudella ja sijoittaa lohkot nimien perusteella. Näin tyylitiedostosta näkee yhdellä silmäyksellä, miltä sivu näyttää.

.sivu {
  display: grid;
  grid-template-columns: 12em 1fr;
  grid-template-areas:
    "otsake  otsake"
    "valikko sisalto"
    "alatunniste alatunniste";
  gap: 1em;
}

header { grid-area: otsake; }
nav    { grid-area: valikko; }
main   { grid-area: sisalto; }
footer { grid-area: alatunniste; }

Yksittäisiä lohkoja voi sijoittaa myös ruutunumeroilla ominaisuuksilla grid-column ja grid-row, esimerkiksi grid-column: 1 / 3 ulottaa lohkon ensimmäisestä viivasta kolmanteen eli kahden sarakkeen yli.

Alkioiden tasaus ruuduissaan tapahtuu ominaisuuksilla justify-items ja align-items, tai molemmat kerralla lyhenteellä place-items.

7.3 Grid-esimerkki

Voit harjoitella gridiä Grid Garden -pelillä.

8. Keskittäminen

Keskittäminen vaatii erilaisia toteutustapoja sen mukaan, millaista sisältöä keskitetään. Yleisimmät tavat on käyty läpi MDN:n dokumentissa Box alignment.

8.1 Yleiskäyttöiset tavat

Nämä kaksi keskittävät sisällön sekä vaaka- että pystysuunnassa:

.keskitys {
  display: grid;
  place-items: center;
}

.keskitys2 {
  display: flex;
  align-items: center;      /* pystysuunnassa */
  justify-content: center;  /* vaakasuunnassa */
}

Pelkkä vaakakeskitys onnistuu yksinkertaisemmin, kun lohkolla on leveys:

.lohko {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

8.2 Sisällön mittainen lohko

Tavallinen ongelma on saada keskitettyä kuvateksti tai muu sisältö, joka ei täytä koko lohkon leveyttä. Lohkon, jonka display-tyyppi on block, leveys on oletuksena kaikki käytettävissä oleva tila. Jos elementin esitystavaksi vaihdetaan display: inline-block, se käyttäytyy sisäisesti kuin lohko mutta asemoituu kuten tekstitason elementti, jolloin sen koko määräytyy sisällön mukaan.

<figure class="inlineblock">
  <img src="hamahakki.jpg" alt="Hämähäkki rinkan kankaalla" />
  <figcaption>Hämähäkki</figcaption>
</figure>

.inlineblock {
  display: inline-block;
  text-align: center;
}

Sama onnistuu nykyään myös arvolla width: fit-content, jolloin elementti pysyy lohkona.

8.3 Keskitysesimerkki

Lisätietoa: Center an element (MDN) ja Centering in CSS: A Complete Guide.

9. Transformointi

transform-ominaisuudella elementtiä voi siirtää, kääntää, vääntää, suurentaa ja pienentää. transform-origin asettaa pisteen, jonka suhteen muunnokset tehdään; oletus on elementin keskipiste.

9.1 Transform-esimerkki

Lisätietoa: Using CSS transforms (MDN).

10. CSS-sarakkeet (columns)

CSS:llä on erittäin helppo toteuttaa sanomalehtityyppisiä sarakkeita, joissa teksti jatkuu sarakkeesta toiseen. Käytä column-count-ominaisuutta, jos tiedät montako saraketta haluat, tai column-width-ominaisuutta, jos tiedät kuinka leveitä sarakkeita haluat. Selain tekee automaattisesti sopivan määrän tai sopivan levyisiä sarakkeita.

Tällä tavalla ei voi määrätä, mikä elementti tulee mihinkin sarakkeeseen. Jos tarvitset sitä, käytä gridiä.

10.1 Sarake-esimerkki

11. Asemointi position-ominaisuudella

position-ominaisuudella määritellään, kuinka elementti sijoittuu sivulle. Käytä sitä vain erikoistapauksissa. Useimmiten on parempi käyttää flexboxia, gridiä tai floatia.

Sijainti annetaan ominaisuuksilla top, bottom, left ja right, jotka kertovat etäisyyden kustakin reunasta. z-index-ominaisuudella määritellään, mikä elementti on päällimmäisenä.

11.1 Absoluuttinen asemointi (absolute)

Absoluuttisessa asemoinnissa elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla välittämättä normaalista sijainnistaan. Se ei myöskään vie tilaa muilta elementeiltä. Elementti vierii dokumentin sisällön mukana.

.aitilohko {
  position: relative;   /* tekee ankkurin, ei siirrä mitään */
}

.vasenylanurkka {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
}

11.2 Kiinnitetty asemointi (fixed)

Kiinnitetyssä asemoinnissa elementti sijoitetaan suhteessa näkymäikkunaan, eikä se vieri dokumentin sisällön mukana. Paljon tilaa vieviä lohkoja ei yleensä kannata kiinnittää, koska ne vievät tilaa sivun muulta sisällöltä — erityisesti kapealla näytöllä.

.vasenylanurkka {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 30%;
}

11.3 Suhteellinen asemointi (relative)

Suhteellisessa asemoinnissa elementti siirretään top-, left-, right- ja bottom-ominaisuuksilla suhteessa sen omaan normaaliin sijaintiin. Elementti vie edelleen alkuperäisen tilansa, eivätkä muut elementit siirry sen tieltä.

.ylos {
  position: relative;
  top: -1em;
}

11.4 Tarttuva asemointi (sticky)

sticky yhdistää kaksi edellistä: elementti on normaalilla paikallaan, kunnes vieritys saavuttaa annetun rajan, jonka jälkeen se jää siihen kiinni. Tavallisin käyttö on kiinnittyvä otsikko tai taulukon otsikkorivi.

thead th {
  position: sticky;
  top: 0;          /* raja on pakollinen, muuten mitään ei tapahdu */
  background-color: #ffffff;
}

Kaksi asiaa kannattaa muistaa. Vähintään yksi rajoista (top, bottom, left tai right) on annettava, muuten elementti käyttäytyy kuin relative. Ja elementti pysyy kiinni vain oman äitielementtinsä alueella: kun äiti vierii pois näkyvistä, myös tarttuva elementti lähtee mukana.

11.5 Asemointi z-suunnassa

z-index-ominaisuudella määritellään elementin taso. Mitä suurempi arvo, sitä lähempänä elementti on käyttäjää. Negatiivinen arvo vie elementin taakse.

11.6 Position-esimerkki

Lisätietoa: position (MDN).

12. Asemoinnin suunnittelu

CSS antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan.

1. Mieti sivun eri osien (navigointi, koristeet, sisältö) paikat tarkkaan.
2. Jaa sivun rakenne loogisiin lohkoihin. Rakenne voi olla esimerkiksi tällainen:
   • yläreunassa lohko perusnavigoinnille ja ylätunnistetiedoille;
   • vasemmassa reunassa tarkempi linkkilista asiakirjan sisältöön;
   • oikeassa reunassa sivun varsinainen sisältö.
3. Sijoita sivun pääsisältö ensimmäiseksi html-tiedostoon, jos suinkin mahdollista. Tämä ratkaisee samalla sen, missä järjestyksessä ruudunlukija lukee sivun ja mihin sarkain siirtyy ensin.
4. Merkitse lohkot header-, nav-, main- ja footer-elementeillä, ja käytä div-elementtiä vasta kun merkityksellistä elementtiä ei löydy. Katso HTML5-luennon luku 7.
5. Tee päälayout gridillä tai flexboxilla, jos layout tarvitsee useita eri osille sivua sijoitettavia alueita.
6. Jollain tavalla asemoidun lohkon sisällön asemointiin voi käyttää mitä tahansa asemointitapaa. Sivun päälayout voidaan esimerkiksi määritellä gridillä, navigointilohkon sisällä käyttää flexboxia ja pääsisällössä floatia.
7. Käytä position-ominaisuutta vain, jos mikään muu tapa ei toimi.
8. Tarkista lopuksi, miten layout käyttäytyy kapealla näytöllä. Katso mediatyyppien ja mediakyselyjen luento.

13. Lisätietoa

• MDN: CSS layout, laaja oppimateriaali harjoituksineen.
• A Complete Guide to Flexbox ja A Complete Guide to Grid.
• Flexbox Froggy ja Grid Garden, harjoituspelit.
• MDN: CSS layout cookbook, valmiita ratkaisuja tavallisiin asetteluihin.
• Kurssin CSS-luento ja mediatyyppien luento.