Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

MEDIA QUERIES ET RESPONSIVE DESIGN

Présentation des media queries

Les media queries correspondent à une technique introduite en CSS3 et qui va se servir de la règle CSS @media.

Grâce aux media queries, nous allons pouvoir appliquer différentes propriétés ou différentes valeurs à des éléments HTML selon la taille de l’écran et le type de media utilisé (écran, imprimante, etc.) par vos visiteurs.

Cela va nous permettre par exemple de ne pas afficher certains éléments pour des tailles d’écran trop petites ou de réorganiser nos pages web grâce aux propriétés CSS.

Utilisation de @media en CSS

Nous allons obligatoirement devoir préciser une chose avec @media : le type de media pour lequel les déclarations CSS doivent s’appliquer.

Dans l’immense majorité des cas, nous utiliserons @media screen, afin d’appliquer nos propriétés à tous les medias dotés d’un écran (téléphone portable, tablette, ordinateur de bureau, etc.).

Cependant, sachez que l’on peut également utiliser @media print, par exemple, afin de n’appliquer certaines règles que pour les imprimantes ou encore @media speech, pour les ordinateurs spéciaux qui vont « lire à haute voix » une page.

Finalement, on peut également utiliser @media all pour appliquer des déclarations à tous les types de media.

Avec @media screen, nous préciserons également une taille ou un intervalle de tailles d’écran au sein duquel les propriétés vont s’appliquer. C’est cette fonctionnalité qui va nous permettre de créer un site responsive en soi.

Voyons immédiatement un premier exemple d’utilisation des media queries et de @media.

Les media queries

On utilise @media pour changer le style de nos éléments selon la taille de l’écran

Grace à @media, notre fond est orange

Grace à @media, notre fond est bleu

Grace à @media, notre fond est vert

Essayer ce code

Utiliser les media queries pour changer l’agencement des éléments HTML

Les media queries vont être particulièrement intéressants pour masquer certains éléments ou pour modifier leur agencement selon la taille de l’écran de vos visiteurs.

Pour faire cela, nous allons pouvoir utiliser les propriétés display, position et les valeurs relatives en pourcentages de façon générale.

Imaginons par exemple une page web composée de trois div côte à côte et d’un pied de page.

Page HTML non responsive

Mise en page de notre page HTML

Notre page HTML contient trois div côte à côte

Essayer ce code

Remarquez que l’on a déjà commencé à préparer le terrain : nous avons utilisé des valeurs en pourcentages pour nos éléments div afin que ceux-ci grandissent ou rapetissent en même temps que la page web.

Notez également qu’on a effectué un reset CSS des marges intérieures et extérieures sur notre élément body afin d’être sûr de tous travailler sur les mêmes bases.

Pour l’affichage sur mobile, nous désirons maintenant afficher la page sur une seule colonne et enlever le pied de page afin de faciliter la lisibilité des visiteurs.

Admettons qu’on considère tous les écrans de mobiles d’une taille intérieure à 780px.

Nous allons utiliser @media avec les bonnes propriétés CSS afin d’avoir l’affichage souhaité sur téléphone portable :

Utilisation de @media

On modifie le layout de notre page avec @media

Essayer ce code

Comme vous le voyez, nous avons pu modifier complètement notre page grâce à @media. En effet, les règles définies dans @media vont être prioritaires sur les règles « générales » dès que la taille de l’écran va passer sous les 780px.

@media et orientation

On peut également définir des règles spécifiques selon l’orientation de l’écran de vos visiteurs (utile pour l’affichage sur tablette ou iPhone entre autres).

Pour cela, on peut utiliser « orientation : landscape » pour définir des règles spécifiques pour les écrans tournés en mode « paysage ».

@media et orientation : landscape

Chapitre précédent

Chapitre suivant