Pour vous exercer à créer une mise en page simple utilisant CSS + Flexbox, je vous propose de reprendre vos fiches recettes réalisées lors des précédents TP.
Maquettage rapide
Avant de plonger dans le code, prenons un moment pour réfléchir à la manière dont nous voulons organiser notre recette. Une recette de cuisine est généralement composée de plusieurs parties clés :
- Le titre et une brève description : Ce sont les premières informations que vos visiteurs verront, il est donc important qu’elles soient claires et accrocheuses.
- Les ingrédients nécessaires : Ces éléments doivent être faciles à identifier afin que l’utilisateur puisse rapidement vérifier s’il a tout ce dont il a besoin.
- Les instructions de préparation : Il s’agit de la partie la plus détaillée, où chaque étape doit être clairement définie pour guider l’utilisateur à travers le processus de cuisson.
- Une image illustrative : Une bonne image peut rendre la recette plus attrayante et donner aux utilisateurs une idée du résultat final.
- Les informations de contact ou de référence : Par exemple, un lien vers votre site web ou d’autres recettes.
En somme, en faisant un rapide wireframe, j’aimerais que ma fiche recette ressemble à ça (pro tip pour faire des maquettes / mockups / wireframe, je vous recommande l’excellent outil Whimsical) :
Première étape : on commence par créer le squelette html de la page
Maintenant que nous avons une idée de ce que nous voulons faire, commençons à coder. Ouvrez votre éditeur de texte préféré pour débuter la rédaction de votre page HTML.
- Déclaration et structure de base:
- Commencez par écrire la ligne
<!DOCTYPE html>pour spécifier la version de HTML. - Ajoutez l’élément racine
<html lang="fr">pour débuter le document et spécifier la langue. - Créez deux sections principales à l’intérieur de
<html>:<head>et<body>.
- Commencez par écrire la ligne
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma recette de cuisine</title>
<meta name="description" content="Une délicieuse recette de cuisine.">
<meta name="author" content="Votre Nom">
<link rel="stylesheet" href="style.css">
</head>
<body>
2. Le corps de la page:
- À l’intérieur de
<body>, commencez par un<header>contenant le titre principal et une brève description. - Ajoutez deux sections
<section>, une pour les ingrédients et une pour les instructions, chacune avec un titre<h2>et une liste appropriée (ordonnée pour les instructions, non-ordonnée pour les ingrédients). - Insérez une
<figure>avec une image et une légende pour illustrer la recette. - Terminez avec un
<footer>contenant des liens ou des informations supplémentaires.
<header>
<h1>Ma recette de cuisine</h1>
<p>Une délicieuse recette de cuisine.</p>
</header>
<section>
<h2>Ingrédients</h2>
<ul>
<!-- Liste des ingrédients ici -->
</ul>
</section>
<section>
<h2>Instructions</h2>
<ol>
<!-- Liste des étapes ici -->
</ol>
</section>
<figure>
<img src="/img/tarte-aux-pommes.webp" alt="Une délicieuse tarte aux pommes" />
<figcaption>Illustration de la recette terminée</figcaption>
</figure>
<footer>
<p>Recette proposée par <a href="https://votresite.fr">Votre Site Web</a>.</p>
</footer>
</body>
</html>
3. Un peu de remplissage
Maintenant que la structure générale est prête, on peut remplir un peu la page avec, par exemple, la liste des ingrédients et les instructions.
<section>
<h2>Ingrédients</h2>
<ul>
<li>2 oeufs</li>
<li>100g de sucre</li>
<li>50g de farine</li>
<li>50g de beurre fondu</li>
<li>1 pincée de sel</li>
<li>1 sachet de sucre vanillé</li>
</ul>
</section>
<section>
<h2>Instructions</h2>
<ol>
<li>Dans un bol, mélangez les oeufs, le sucre et la pincée de sel.</li>
<li>Ajoutez la farine tamisée et mélangez bien.</li>
<li>Ajoutez le beurre fondu et le sucre vanillé, puis mélangez à nouveau.</li>
<li>Versez la préparation dans un moule beurré et fariné.</li>
<li>Enfournez pendant environ 20 minutes.</li>
<li>Laissez refroidir avant de servir.</li>
</ol>
</section>Deuxième étape : on habille le squelette pour lui donner du style
Après avoir structuré votre document HTML, il est temps de lui donner du style pour rendre la recette visuellement attrayante et facile à lire. Cette partie du tutoriel vous guidera à travers le processus de création d’une feuille de style CSS.
Étape 1 : Comprendre et planifier votre CSS
Avant de commencer à écrire votre CSS, réfléchissez à l’apparence générale que vous souhaitez donner à votre page. Pensez aux couleurs, aux polices et à l’espacement. Il est également important de planifier la répartition du style entre les différentes sections pour maintenir une cohérence visuelle.
Pour réaliser ce tutoriel, j’ai décidé d’utiliser quelques touches ponctuelles de couleur rouge, de donner une allure de « carte » à mes encarts en leur appliquant des coins arrondis et une légère ombre portée.
Étape 2 : Écriture et organisation de votre CSS
- Réinitialisation de base (Reset CSS)
- Commencez par réinitialiser les marges, les paddings et le box-sizing pour assurer une cohérence entre tous les navigateurs.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}2. Stylisation du body
- Définissez la police, la couleur de fond, la couleur du texte, l’espacement des lignes et le padding pour le corps de la page.
body {
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
padding: 20px;
}
3. Header et Footer
- Appliquez un fond, des marges, du padding, un rayon de bordure et une ombre pour distinguer visuellement l’en-tête et le pied de page.
header, footer {
background-color: #fff;
margin: 10px 10px 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}4. Stylisation des titres et sous-titres
- Modifiez la couleur et la taille du texte pour les titres dans l’en-tête et ajoutez une bordure décorative sous les titres de section.
header h1 {
color: #e53935;
font-size: 24px;
}
h2 {
color: #333;
border-bottom: 2px solid #e53935;
padding-bottom: 10px;
margin-bottom: 20px;
}5. Sections
- Définissez le fond, le padding, les marges et les ombres pour les sections de contenu.
section {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: 10px 0;
}6. Listes et éléments de liste
- Améliorez la lisibilité des listes en ajoutant des marges.
ul, ol {
margin-left: 20px;
}
li {
margin-bottom: 10px;
}7. Images et légendes
- Centrez les images, ajustez leur taille, et stylisez les légendes pour une meilleure présentation visuelle :
figure {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-top: 20px;
}
figure img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
figcaption {
margin-top: 8px;
color: #666;
}8. Liens dans le footer
- Enfin, vous pouvez personnaliser les liens pour qu’ils se démarquent et ajoutent un effet au survol.
footer a {
color: #e53935;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
Premier rendu :
A priori, à cette étape, vous devriez avoir une page html un peu plus « jolie » :
Néanmoins elle ne respecte pas tout à fait l’objectif fixé au début, à savoir de mettre la liste des ingrédients et les instructions cote à cote. C’est là que Flexbox entre en jeu !
Etape 3 : maintenant que le squelette a du style, on va lui ajouter du flex !
Si vous avez bien lu le cours précédent , vous avez compris que Flexbox, ou la boîte flexible, est un outil puissant en CSS qui permet de créer des mises en page complexes de manière plus intuitive et prévisible.
Il est particulièrement utile pour aligner des éléments de manière horizontale ou verticale, et pour distribuer l’espace entre les éléments d’un conteneur. Flexbox rend la création de grilles réactives beaucoup plus simple et est une alternative aux techniques plus traditionnelles comme les flottants ou les positionnements.
Modifications à apporter au HTML
Il va d’abord falloir ajuster votre HTML pour inclure un conteneur qui enveloppera les sections des ingrédients et des instructions.
Comme il s’agit du contenu principal de la page, on peut d’ailleurs utiliser la balise <main> pour englober les 2 sections des « ingrédients » et « instructions » ainsi que l’image :
<main> <!-- Diviseur pour les sections avec flexbox -->
<section>
<h2>Ingrédients</h2>
<ul>
<li>2 oeufs</li>
<li>100g de sucre</li>
<li>50g de farine</li>
<li>50g de beurre fondu</li>
<li>1 pincée de sel</li>
<li>1 sachet de sucre vanillé</li>
</ul>
</section>
<section>
<h2>Instructions</h2>
<ol>
<li>Dans un bol, mélangez les oeufs, le sucre et la pincée de sel.</li>
<li>Ajoutez la farine tamisée et mélangez bien.</li>
<li>Ajoutez le beurre fondu et le sucre vanillé, puis mélangez à nouveau.</li>
<li>Versez la préparation dans un moule beurré et fariné.</li>
<li>Enfournez pendant environ 20 minutes.</li>
<li>Laissez refroidir avant de servir.</li>
</ol>
</section>
<figure>
<img src="/img/tarte-aux-pommes.jpg" alt="Une délicieuse tarte aux pommes" />
<figcaption>Illustration de la recette terminée</figcaption>
</figure>
</main>Modifications côté CSS
Du côté de ses propriétés CSS, vous devez configurer cette balise <main> – qui contient les sections – comme un conteneur flexbox avec la propriété « display : flex » – et lui attribuer quelques propriété supplémentaire comme l’espace entre les différents blocs qui le contiennent.
Ajoutez simplement ce sélecteur à votre feuille de styles :
main {
display: flex;
justify-content: space-between;
gap: 20px; /* Espace entre les sections contenues dans main */
flex-wrap:wrap; /* fait en sorte que les sections qui dépassent de l'écran reviennent à la ligne */
}
Enfin, comme les <sections> et l’image contenue dans <figure> sont contenues dans une balise qui est une « flexbox », il faut faire quelques petits ajustements :
- Ajouter l’attribut flex : 1 aux sections, de façon à leur assigner la même proportion de l’espace disponible dans le conteneur <main>, pour qu’elles puissent s’étendre de manière équilibrée.
section {
flex: 1;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: 10px 0;
}- Puis ajouter l’attribut flex-basis:100% pour que l’image prenne toute la largeur de l’écran. Comme ces 3 éléments sont dans un conteneur qui a la propriété flex-wrap:wrap, elle passera automatiquement à la ligne pour remplir toute la largeur disponible.
figure {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-top: 20px;
flex-basis:100%;
}Résultat
Si vous avez bien tout respecté vous devriez voir cette mise en page désormais :
Parfait, la page s’affiche comme on le voulait sur un écran de bureau !
… Mais il y a un hic : essayez de changer la résolution de votre écran en passant sur une interface mobile (vous pouvez le faire très simplement via un clic droit -> Inspecter, puis cliquer sur l’icône qui permet de passer en résolution mobile). Là, le résultat n’est pas terrible :
Il va donc falloir adapter cette interface pour les résolutions d’écrans plus petites, et donc faire du « responsive ».
La suite au prochain épisode !
Ressource complémentaire :
Je vous recommande chaudement de suivre ce tuto vidéo réalisé par Grafikart, 30 minutes pour apprendre l’essentiel des propriétés Flexbox : https://www.youtube.com/watch?v=LNqBKTeeiWo