HTML - Mise en page avec CSS

Modèle de boîte CSS

Pour créer des mises en page avec CSS, vous devez comprendre le modèle de boîte CSS. Chaque élément HTML est traité comme une boîte par le navigateur, et le modèle de boîte décrit comment ces boîtes sont dimensionnées et espacées.

Le modèle de boîte comporte quatre parties principales : le contenu, le remplissage, la bordure et la marge. La zone de contenu est l'endroit où le contenu réel de l'élément, tel que du texte ou des images, est affiché. Autour de la zone de contenu se trouve le remplissage, qui ajoute de l'espace entre le contenu et la bordure. La bordure est une ligne qui entoure le remplissage et le contenu, et elle peut avoir une épaisseur, un style et une couleur. La marge est l'espace à l'extérieur de la bordure qui sépare l'élément des autres éléments de la page.

Par défaut, la taille d'un élément est calculée en fonction de la boîte de contenu, ce qui signifie que la largeur et la hauteur spécifiées d'un élément ne s'appliquent qu'à la zone de contenu. Cependant, vous pouvez modifier ce comportement en utilisant la propriété box-sizing. Définir box-sizing: border-box; inclut le remplissage et la bordure dans la largeur et la hauteur spécifiées, ce qui facilite le contrôle de la taille globale d'un élément.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

L'élément .box a une zone de contenu de 200 pixels de large et 100 pixels de haut. Il a également 20 pixels de remplissage de tous les côtés, une bordure noire solide de 1 pixel et une marge de 10 pixels de tous les côtés. La largeur totale de l'élément serait de 242 pixels (200px de contenu + 20px de remplissage gauche + 20px de remplissage droit + 1px de bordure gauche + 1px de bordure droite), et la hauteur totale serait de 142 pixels (100px de contenu + 20px de remplissage supérieur + 20px de remplissage inférieur + 1px de bordure supérieure + 1px de bordure inférieure).

En modifiant les valeurs du contenu, du remplissage, de la bordure et de la marge, vous pouvez contrôler l'espacement et la mise en page des éléments sur votre page web. Le modèle de boîte CSS est un concept de base en conception web et sa compréhension est nécessaire pour créer des mises en page avec CSS.

Propriété Display

La propriété display en CSS contrôle la façon dont un élément est affiché sur la page web. Elle détermine le type de boîte qu'un élément crée, comment il est disposé par rapport aux autres éléments, et comment son contenu est affiché. Les valeurs les plus couramment utilisées pour la propriété display sont block, inline, inline-block, flex, et grid.

Les éléments de niveau bloc, tels que <div>, <p>, <h1> à <h6>, et <ul>, génèrent une boîte de niveau bloc. Ces éléments commencent sur une nouvelle ligne, occupent toute la largeur disponible par défaut, et s'empilent verticalement les uns après les autres. Vous pouvez définir la largeur, la hauteur, le remplissage, la marge et les propriétés de bordure pour les éléments de niveau bloc.

Les éléments en ligne, tels que <span>, <a>, <strong>, et <em>, génèrent une boîte de niveau en ligne. Ces éléments ne commencent pas sur une nouvelle ligne et n'occupent que la largeur nécessaire pour afficher leur contenu. Les éléments en ligne s'écoulent dans le texte et ne perturbent pas la mise en page du contenu environnant. Vous ne pouvez pas définir la largeur, la hauteur, les marges supérieures ou inférieures, ou le remplissage vertical pour les éléments en ligne.

Les éléments inline-block ont des caractéristiques des éléments de niveau bloc et en ligne. Ils s'écoulent en ligne comme les éléments en ligne mais peuvent avoir une largeur, une hauteur, des marges et un remplissage spécifiés comme les éléments de niveau bloc. Les éléments inline-block sont utiles lorsque vous voulez placer des éléments côte à côte tout en pouvant contrôler leurs dimensions.

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

Flexbox et Grid sont deux systèmes de mise en page puissants en CSS qui offrent des moyens plus avancés pour créer des designs flexibles et réactifs.

Flexbox, ou Flexible Box Layout, est un système de mise en page unidimensionnel qui vous permet de créer des layouts où les éléments peuvent grandir, rétrécir et se réorganiser en fonction de l'espace disponible. Il est bien adapté pour créer des menus de navigation, des layouts de cartes et d'autres composants flexibles.

CSS Grid est un système de mise en page bidimensionnel qui vous permet de créer des layouts complexes basés sur une grille avec des lignes et des colonnes. Il fournit un moyen de définir la taille et la position des éléments dans un conteneur de grille, facilitant ainsi la création de layouts réactifs sans dépendre des flottants ou du positionnement.

Flexbox et Grid seront traités plus en détail plus tard dans ce tutoriel.

En utilisant la propriété display et ses différentes valeurs, vous pouvez contrôler comment les éléments sont affichés et disposés sur votre page web. Comprendre les différences entre les éléments block, inline et inline-block, ainsi que les bases de Flexbox et Grid, vous aidera à créer des layouts plus flexibles et réactifs en utilisant CSS.

Positionnement

Le positionnement CSS vous permet de contrôler le placement des éléments sur une page web. Il existe cinq types principaux de positionnement : statique, relatif, absolu, fixe et collant.

Le positionnement statique est le positionnement par défaut pour tous les éléments. Un élément avec position: static; n'est pas positionné de manière spéciale et suit le flux normal du document. Les éléments statiques ne sont pas affectés par les propriétés top, right, bottom, ou left.

Le positionnement relatif vous permet de déplacer un élément par rapport à sa position normale dans le flux du document. Lorsque vous définissez position: relative; sur un élément, vous pouvez utiliser les propriétés top, right, bottom, et left pour déplacer l'élément par rapport à sa position normale. L'espace initialement utilisé par l'élément reste dans le flux du document, et les autres éléments ne sont pas affectés par le repositionnement.

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

Le positionnement absolu retire un élément du flux normal du document et le positionne par rapport à son ancêtre positionné le plus proche ou au bloc conteneur initial s'il n'existe pas d'ancêtre positionné. Un élément avec position: absolute; peut être positionné en utilisant les propriétés top, right, bottom, et left. Les autres éléments agiront comme si l'élément positionné de manière absolue n'existait pas dans le flux du document.

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

Le positionnement fixe est similaire au positionnement absolu, mais l'élément est positionné par rapport à la fenêtre du navigateur plutôt qu'à un élément conteneur. Un élément avec position: fixed; restera à la même position même si la page est défilée. Cela est souvent utilisé pour créer des en-têtes, des pieds de page ou des menus de navigation fixes.

.fixed {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

Le positionnement collant est une combinaison du positionnement relatif et fixe. Un élément avec position: sticky; se comporte comme un élément positionné de manière relative jusqu'à ce qu'il atteigne un décalage spécifié par rapport à la fenêtre d'affichage, à partir duquel il "colle" en place comme un élément fixe. Cela est utile pour créer des éléments qui collent en haut de l'écran lorsque l'utilisateur fait défiler la page au-delà d'un certain point.

.sticky {
  position: sticky;
  top: 20px;
}

En utilisant les différentes techniques de positionnement, vous pouvez créer des mises en page complexes et positionner précisément les éléments sur votre page web. Il est important de comprendre comment chaque type de positionnement fonctionne et comment il affecte le flux du document pour choisir la méthode la plus appropriée à votre cas d'utilisation spécifique.

Flottants

Les flottants étaient l'une des principales méthodes pour créer des mises en page en CSS avant l'introduction de Flexbox et Grid. La propriété float vous permet de positionner des éléments à gauche ou à droite de leur élément contenant, tandis que le contenu environnant s'enroule autour d'eux.

Pour faire flotter un élément, vous pouvez utiliser la propriété float avec une valeur de left ou right. Lorsqu'un élément est flottant, il est retiré du flux normal du document, et le contenu environnant s'écoule autour de lui.

.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

Dans l'exemple ci-dessus, l'élément .float-left sera positionné à gauche de son conteneur, et l'élément .float-right sera positionné à droite. Les propriétés margin-right et margin-left ajoutent un espace entre les éléments flottants et le contenu environnant.

Lors de l'utilisation de flottants, il est important de les nettoyer correctement pour éviter les problèmes de mise en page. Si un élément contenant n'a que des enfants flottants, sa hauteur s'effondrera à zéro car les éléments flottants sont retirés du flux normal du document. Pour résoudre ce problème, vous pouvez utiliser la propriété clear sur un élément après les éléments flottants pour réinitialiser le flux.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

La classe .clearfix est appliquée à l'élément contenant. Le pseudo-élément ::after est utilisé pour ajouter un espace vide après le contenu du conteneur, et la propriété clear: both; est appliquée pour réinitialiser le flux et faire en sorte que la hauteur du conteneur s'étende pour englober les éléments flottants.

Bien que les flottants aient été largement utilisés dans le passé, ils présentent certains défis et limitations :

En raison de ces défis, les techniques de mise en page modernes comme Flexbox et Grid sont devenues plus populaires ces dernières années. Elles offrent plus de flexibilité, de meilleures capacités d'alignement et une meilleure réactivité par rapport aux mises en page basées sur les flottants.

Cependant, comprendre le fonctionnement des flottants reste important pour maintenir les sites web plus anciens et travailler avec du code hérité qui repose sur des mises en page basées sur les flottants.

Flexbox

Flexbox, abréviation de Flexible Box Layout, est un puissant système de mise en page CSS qui vous permet de créer des designs flexibles et réactifs. Il offre un moyen d'organiser, d'aligner et de distribuer l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue ou dynamique.

L'idée principale derrière Flexbox est le concept de conteneur flex et d'éléments flex. Un conteneur flex est un élément auquel on applique display: flex;, et ses enfants directs deviennent automatiquement des éléments flex. En définissant display: flex;, vous créez un nouveau contexte de formatage flex pour le conteneur et ses éléments.

<div class="flex-container">
  <div class="flex-item">Élément 1</div>
  <div class="flex-item">Élément 2</div>
  <div class="flex-item">Élément 3</div>
</div>

.flex-container {
  display: flex;
}

Flexbox introduit le concept d'axe principal et d'axe secondaire. L'axe principal est l'axe primaire le long duquel les éléments flex sont disposés, et il peut être horizontal (par défaut) ou vertical. L'axe secondaire est perpendiculaire à l'axe principal. Vous pouvez contrôler la direction de l'axe principal en utilisant la propriété flex-direction, qui peut avoir des valeurs comme row (par défaut), row-reverse, column, ou column-reverse.

L'une des principales caractéristiques de Flexbox est la capacité de justifier et d'aligner le contenu dans le conteneur flex. La propriété justify-content contrôle l'alignement et la distribution des éléments flex le long de l'axe principal, tandis que la propriété align-items contrôle l'alignement le long de l'axe secondaire.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Dans l'exemple ci-dessus, justify-content: space-between; distribue les éléments flex uniformément le long de l'axe principal, avec le premier élément au début et le dernier élément à la fin. La propriété align-items: center; centre les éléments flex verticalement le long de l'axe secondaire.

Flexbox fournit également des propriétés pour contrôler l'ordre et le dimensionnement des éléments flex. La propriété order vous permet de changer l'ordre visuel des éléments flex sans modifier la structure HTML. Les propriétés flex-grow, flex-shrink, et flex-basis vous permettent de contrôler comment les éléments flex grandissent, rétrécissent et définissent leur taille initiale dans le conteneur flex.

.flex-item:first-child {
  order: 2;
}

.flex-item:nth-child(2) {
  flex-grow: 2;
}

Dans cet exemple, le premier élément flex est visuellement déplacé à la fin en utilisant order: 2;, et le deuxième élément flex est configuré pour grandir deux fois plus que les autres éléments en utilisant flex-grow: 2;.

Flexbox est un outil polyvalent pour créer des mises en page flexibles et réactives. Il simplifie de nombreuses tâches courantes de mise en page, telles que le centrage vertical et horizontal, les colonnes de hauteur égale et le redimensionnement dynamique des éléments. En utilisant Flexbox, vous pouvez créer des mises en page plus adaptables et maintenables qui fonctionnent bien sur différentes tailles d'écran et appareils.

Grille CSS

La grille CSS est un système de mise en page bidimensionnel qui vous permet de créer des designs complexes et réactifs basés sur une grille. Elle offre un moyen de définir des lignes et des colonnes au sein d'un conteneur de grille et de contrôler le placement et le dimensionnement des éléments de la grille.

Pour créer une mise en page en grille, vous définissez la propriété display d'un élément conteneur sur grid ou inline-grid. Le conteneur devient un conteneur de grille, et ses enfants directs deviennent automatiquement des éléments de grille.

<div class="grid-container">
  <div class="grid-item">Élément 1</div>
  <div class="grid-item">Élément 2</div>
  <div class="grid-item">Élément 3</div>
  <div class="grid-item">Élément 4</div>
</div>

.grid-container {
  display: grid;
}

Une fois que vous avez un conteneur de grille, vous pouvez définir les lignes et les colonnes en utilisant les propriétés grid-template-rows et grid-template-columns. Ces propriétés acceptent une liste de valeurs séparées par des espaces qui représentent la taille de chaque ligne ou colonne. Vous pouvez utiliser des tailles fixes (par exemple, des pixels), des tailles flexibles (par exemple, des pourcentages ou des unités fr), ou une combinaison des deux.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr 1fr;
}

Ce code définit un conteneur de grille avec deux lignes de hauteurs de 100 pixels et 200 pixels. Il a également trois colonnes, où la première et la troisième colonnes occupent chacune une unité de fraction de l'espace disponible, et la deuxième colonne en occupe deux.

Pour placer des éléments de grille dans les lignes et colonnes définies, vous pouvez utiliser les propriétés grid-row et grid-column. Ces propriétés vous permettent de spécifier les lignes de début et de fin d'un élément de grille en utilisant des numéros de ligne ou des lignes nommées.

.grid-item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

Le premier élément de grille s'étend de la ligne de grille 1 à la ligne de grille 3 et de la colonne 1 à la colonne 2. Le deuxième élément de grille s'étend de la ligne de grille 1 à la ligne de grille 2 et de la colonne 2 à la colonne 4.

CSS Grid introduit également le concept de zones de modèle de grille, qui vous permet de définir des zones nommées dans la grille et d'attribuer des éléments de grille à ces zones en utilisant la propriété grid-area. Cela peut rendre votre code plus lisible et plus facile à maintenir.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Le conteneur de grille définit des zones nommées en utilisant la propriété grid-template-areas. Chaque chaîne représente une ligne, et chaque mot dans la chaîne représente une zone nommée. Les éléments de grille sont ensuite attribués à ces zones en utilisant la propriété grid-area.

L'un des principaux avantages de CSS Grid est sa capacité à créer facilement des mises en page réactives. En utilisant des media queries et en ajustant les lignes, colonnes et zones du modèle de grille, vous pouvez adapter votre mise en page en grille à différentes tailles d'écran et appareils.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

La fonction repeat() est utilisée avec le mot-clé auto-fit pour créer une mise en page de grille réactive. La fonction minmax() spécifie une taille minimale et maximale pour les colonnes, leur permettant de s'adapter automatiquement à l'espace disponible. La propriété gap ajoute un espacement entre les éléments de la grille.

Design réactif

Le design réactif est une approche de conception web qui vise à créer des sites offrant une expérience de visualisation et d'interaction optimale sur une large gamme d'appareils, des ordinateurs de bureau aux téléphones mobiles. Avec l'utilisation croissante des smartphones et des tablettes pour accéder au web, il est important de s'assurer que votre site s'adapte et s'affiche correctement sur tous les formats d'écran. Le design réactif repose sur plusieurs techniques clés, notamment les requêtes média, les mises en page fluides, les images réactives et la typographie réactive.

Les requêtes média sont un outil fondamental du design réactif. Elles permettent d'appliquer différents styles à votre site en fonction des caractéristiques de l'appareil, comme la largeur d'écran, la hauteur, l'orientation ou la résolution. En utilisant des requêtes média, vous pouvez créer des points de rupture qui définissent différentes mises en page pour différentes tailles d'écran.

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Lorsque la largeur d'écran est de 768 pixels ou moins, l'élément .container aura une largeur de 100% et un rembourrage de 10 pixels. Cela vous permet d'ajuster la mise en page et le style de votre site pour les écrans plus petits, comme les tablettes ou les téléphones mobiles.

Les mises en page fluides sont un autre aspect clé du design réactif. Au lieu d'utiliser des valeurs fixes en pixels pour les largeurs et les hauteurs, les mises en page fluides utilisent des unités relatives comme les pourcentages ou les unités em. Cela permet à la mise en page de s'adapter et de se redimensionner proportionnellement en fonction de la taille de l'écran.

.container {
  width: 80%;
  margin: 0 auto;
}

L'élément .container a une largeur de 80% de son élément parent, et margin: 0 auto; le centre horizontalement. Lorsque la taille de l'écran change, le conteneur se redimensionnera proportionnellement, maintenant sa largeur relative.

Les images réactives sont importantes pour optimiser les performances et l'expérience utilisateur de votre site sur différents appareils. En utilisant des techniques comme l'attribut srcset ou l'élément <picture>, vous pouvez servir différentes tailles et résolutions d'images en fonction des capacités de l'appareil.

<img src="image.jpg" srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w" alt="Image réactive">

L'attribut srcset spécifie plusieurs sources d'images et leurs largeurs correspondantes. Le navigateur choisira l'image la plus appropriée en fonction de la taille et de la résolution de l'écran de l'appareil, réduisant ainsi la quantité de données transférées et améliorant les temps de chargement.

La typographie réactive garantit que votre texte reste lisible et bien proportionné sur différentes tailles d'écran. En utilisant des unités relatives comme em ou rem pour les tailles de police et les hauteurs de ligne, vous pouvez créer une typographie qui s'adapte proportionnellement à la taille de l'écran.

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

La taille de police de base est fixée à 16 pixels pour les grands écrans, mais elle se réduit à 14 pixels lorsque la largeur de l'écran est de 768 pixels ou moins. Cela aide à maintenir la lisibilité sur les petits écrans tout en conservant les proportions globales de la typographie.

En combinant les requêtes média, les mises en page fluides, les images réactives et la typographie réactive, vous pouvez créer des sites web qui s'adaptent parfaitement à différents appareils et tailles d'écran. Le design réactif améliore non seulement l'expérience utilisateur, mais rend également votre site plus accessible et pérenne à mesure que de nouveaux appareils et tailles d'écran apparaissent.