In quest’articolo studieremo come realizzare il nostro CSS responsive per il template in HTML5 che abbiamo preparato in questo articolo: https://www.codingcreativo.it/template-responsive-con-html/
Il template finito è visibile al seguente link: https://www.codingcreativo.it/coding_creativo_modello/
Apriamo un nuovo file con notepad++ o con il blocco note e cominciamo a creare il nostro CSS responsive.
Creazione del CSS responsive
Innanzitutto per creare il nostro CSS responsive, occorre creare il file. Nominiamo il file style.css e lo salviamo nella stessa cartella del file .html, in futuro per progetti più complessi ci organizzeremo con delle cartelle.
Per creare il nostro CSS responsive, il primo passo da fare, come vi dicevo nell’articolo sui ‘CSS e valori di default del browser‘, è inserire il reset CSS, quindi appena apriamo il nuovo foglio inseriamo questo codice:
/*reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Dopo aver inserito il reset procediamo ad impostare i vari elementi che ho progettato nella precedente struttura in HTML5.
Banner Pubblicitario
Partiamo da quelli essenziali che commenteremo con main style per un facile riconoscimento.
Main style
Chiaramente io li ho impostati in questo modo, ma voi potete anche variare.
Cominciamo dal body, che rappresenta il corpo della pagina, a cui assegno un colore di sfondo #d8e8f5 che corrisponde all’azzurrino che vedete nell’esempio, un colore di testo #303030 che corrisponde al grigio scuro, font-family scelgo la famiglia di caratteri senza grazie Helvetica e Arial con dimensione di 14 pixel.
Dopo imposto i valori di default dei collegamenti ipertestuali (<a>), sia quando sono ‘a riposo’ sia quando si passa con il mouse sopra il collegamento (hover).
Faccio lo stesso per i tag dei titoli da h1 ad h6 a cui assegno le dimensioni in pixel.
Per il tag p imposto un’altezza della riga pari a 16 px, per facilitare la lettura dei testi.
Ad hr imposto un colore di linea #d8e8f5 che corrisponde ad un azzurro.
Al tag semantico figure dò una distanza dal margine dal basso di 10 pixel, per creare un pò di spazio tra le immagini e il testo.
Banner pubblicitario
Imposto un margine di 20 pixel per p, hr, h1, h2, h3, h4, h5, h6, ol, ul; è sempre un buon consiglio quello di non scrivere tutto attaccato ma creare appositi spazi vuoti.
/* Main style*/
body {
background-color:#d8e8f5;
color:#303030;
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
}
a {color: #3e75b9;text-decoration: none;}
a:hover {color: #416695;}
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 26px;}
h4 {font-size: 21px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
p {line-height:16px;}
hr {color:#d8e8f5}
figure {margin-bottom:10px;}
p, hr, h1, h2, h3, h4, h5, h6, ol, ul {margin-bottom: 20px;}Sezione header
Imposto la sezione header con larghezza 920px, allineamento a sinistra, sfondo bianco e padding uguale a 20. Il padding è la distanza degli elementi attorno al box che li contiene, serve a creare il giusto spazio per dare armonia alla pagina.
/*** Header ***/
header {width: 920px;float:left;padding:20px;background:#fff;} Sezione nav
Adesso pensiamo alla barra di navigazione nav. Imposto la barra al 100% della larghezza del suo contenitore con allineamento a sinistra e sfondo azzurro (#197dd1).
Imposto per l’elenco <ul> sempre la disposizione a sinistra, ma con allineamento del testo centrale (text-align:center), senza punto elenco (list-style: none) e imposto overflow: hidden ovvero gli indico con questa proprietà che il contenuto eccedente deve essere ritagliato, cioè nascosto.
/*nav*/
nav {width: 100%;float:left;background: #197dd1;}
nav ul {margin: 0px;float:left;width:100%; list-style: none;overflow:hidden;padding:10px;text-align:center;}
nav ul li {float: left;margin: 0px;position: relative;}
nav a {color: #fff; display: block;font-size:0.9em;padding: 14px 20px;text-transform:uppercase;}
nav a:hover {background:#d8e8f5;}Struttura
Adesso inseriamo gli id assegnati ai tag div che compongono la struttura.
Al wrapper che è assegnato al primo tag div che apro sotto body, dò una larghezza di 960 px, sfondo bianco e margin sopra e sotto pari a 0 e a destra e sinistra auto, questa proprietà è importante per visualizzare la struttura di tutto il sito al centro della finestra del browser.
Al container dò una larghezza di 920 px perchè se notate sto dando un padding di 20 px, cioè una distanza dal box di 20px per ciascun lato. Infatti (920+20+20)px=960 px. Con float:left gli sto dicendo di posizionarsi sulla sinistra.
Al content, che rappresenta la parte a sinistra della pagina (sotto l’immagine grande), dò una larghezza di 620px lasciando così gli altri 300 per la sidebar, cioè per il menù laterale (meno un pò di padding) .
/* Struttura */
#wrapper {width: 960px;margin:0 auto;background:#fff;}
#container {width: 920px;float:left;padding:20px;}
#content {width: 620px;float:left;}Post
Ai post assegno le seguenti proprietà: il padding lo metto a zero perché non mi interessa creare altro spazio. Al titolo dò un margine dal basso di 20 pixel e a entry-title a dò il grassetto e una distanza tra le lettere di -1, tanto per creare un effetto diverso.
.post {padding:0px;}
.post .entry-title {margin-bottom: 20px;}
.post .entry-title a {font-weight:bold;letter-spacing:-1px;}
.post .entry-content {line-height:24px;}Barra laterale
Adesso pensiamo alla barra laterale, che indico usando il tag semantico aside. La larghezza che imposto è 270px e imposto chiaramente float a destra in quanto la barra laterale in genere và a destra.
Per i widget laterali imposto per ciascuna voce dell’elenco nessun punto elenco e una distanza tra le linee di 35 pixel.
/*barra laterale */
aside {width: 270px;float:right;}
.widget li {line-height:35px;list-style-type:none}Altre classi utili
Innanzitutto ho impostato un classe clear con la proprietà clear:both per ripulire da altri posizionamenti a destra o a sinistra.
Dopo ho creato anche una classe per le immagini di nome img in modo tale da avere la larghezza al 100%, altezza automatica e margine dal basso di 10 pixel, questo è importantissimo per visualizzarle scalate su tutti i dispositivi.
Poi ho impostato l’id sitemap che serve a visualizzare il menù in basso con una distanza dal bordo sinistro di 10px.
.clear {clear:both;}
.img {width:100%;height:auto;margin-bottom:10px;}
#sitemap {padding-left:10px;}Footer
Il piede della pagina, indicato dal tag semantico footer, ha una larghezza di 920 pixel; infatti ho impostato il padding di 20 pixel. Il colore di sfondo è grigio scuro #676767, mentre il carattere è bianco.
Ho impostato i collegamenti con una dimensione di 14 pixel, di colore bianco e altezza della linea di 30 pixel per creare un effetto gradevole.
I collegamenti diventano azzurrini quando si passa sopra con il mouse.
footer {width:920px;float:left;padding:20px;background:#676767;color:#fff;}
footer a {font:14px;color:#fff; line-height:30px;}
footer a:hover {color:#d8e8f5;}
footer p {padding-left:10px;}Media query
Continuiamo la creazione del nostro CSS responsive.
Per rendere una pagina web responsive uno dei possibili metodi è utilizzare le media queries. Le media queries sono nate con la versione 3 dei CSS e consentono di riconoscere il dispositivo con cui si sta navigando, sia per la risoluzione sia per l’orientamento.
Così basterà programmare la nostra pagina seguendo la sintassi:
@media (max-width: risoluzione) { ... }Oppure:
@media (min-width: risoluzione) { ... }Ed è possibile anche usare gli operatori logici, ad esempio:
@media (min-width: risoluzione) and (max-width: risoluzione) { ... }Dove risoluzione è il valore che di volta in volta vado a cambiare.
Per strutture che hanno una larghezza massima di 767 pixel allora imposto la mia pagina web con questi valori:
@media (max-width: 767px) {
body {padding:10px;background:#fff;}
header {width:100%;padding:20px 0 20px 0px;}
nav {width:100%;float:left;}
#content {width:100%;float:left;}
aside {width:100%;float:right;padding:20px 0 0 0px;}
footer {width:100%;padding:20px 0 20px 0px;}
#wrapper {width:100%;margin: 0 auto;}
#container {width:100%;float:left;padding:20px 0 0 0;}
#site-title a {font-size:25px;margin-left:10px;}
}Noterete che ho impostato molti valori al 100% per far in modo che prendono tutto lo schermo.
Per i dispositivi che hanno una risoluzione da 768px a 980px imposto questi valori:
@media (min-width: 768px) and (max-width: 980px) {
header {width:708px;float:left;padding:20px;}
nav {width:100%;float:left;}
aside {width:210px;float:right;}
#wrapper {width:748px;margin: 0 auto;}
#container {width:708px;float:left;padding:20px;}
#content {width:470px;float:left;}
footer {width:708px;float:left;padding:20px;}
}Per i dispositivi che hanno una risoluzione maggiore di 1200px imposto questi valori:
@media (min-width: 1200px) {
header {width:1130px;float:left;padding:20px;}
nav {width:100%;float:left;display:block;}
aside {width:420px;float:right;}
footer {width:1130px;float:left;padding:20px;}
#wrapper {width:1170px;margin:0 auto;}
#container {width:1130px;float:left;padding:20px;}
#content {width:670px;float:left;}
}Chiaramente è possibile impostare anche altre risoluzioni, ma vi parlerò ancora delle media queries più avanti in dettaglio.
In questo modo avete creato il vostro CSS responsive. Salvatelo e provate, il risultato dovrà essere come questo:
https://www.codingcreativo.it/coding_creativo_modello/
Le immagini le potete prendere aprendo la pagina dal link sopra, cliccando con il tasto destro e scegliendo salva con nome. Per un corretto funzionamento dovete creare una sotto-cartella di nome images dove le andrete ad inserire, perché ho inserito il percorso nella pagina html.
In pratica dovreste avere questa situazione, dove dentro images inserirete le immagini.
Chiaramente questo vuole essere solo un semplice esempio di struttura realizzata con HTML5 e CSS3 responsive.
Se provate i collegamenti non porteranno a niente, programmate voi le altre pagine come meglio credete e realizzate i collegamenti.
Questo è solo un esempio di possibile realizzazione di un CSS responsive.
Alcuni link utili:
Collegamenti interni ad una pagina web
Tag img e attributo alt per la SEO
Come trovare immagini per il sito web
Molto interessante e ben siegato, la parte del menù non mi fa impazzire a livello personale. Posso fare una domanda sul summary e details?
Grazie, Si certo