4.Front End Development‐CSS - YukaKoshiba/MyknowledgeDocs GitHub Wiki

Front End Development_CSS @English Version
Create Date：2025/07/09
Last Update Date：2025/07/09

Color Models　 Units in CSS　 Functions Used in CSS

Font Settings　 Element Borders　 Elements　 Backgrounds　 Adjusting Layout　 Horizontal Alignment

Adding Gradients　 Images　 Adding Blur/Color Change　 Adding Shadows　 Rotate/Scale/Skew/Translate

Bullet Points　 Navigation Menu Links (=Anchor Links)　 Inserting Text Before/After String

Preventing Layout Collapse　 Changing Scroll Behavior　 Screen Reader　 Creating Animations

Bootstrap

Sass
Variable Declaration and Usage・ Basic Syntax・ Nesting・ Mixin
Style Inheritance・ Importing Styles from Other Sass Files

An acronym for Cascading Style Sheets, it's a computer language used to arrange the layout of web pages (HTML/XML).
* Although CSS is a language, it is not a programming language because it does not have variables or functions.

The W3C (World Wide Web Consortium) is an international non-profit organization that promotes the standardization of web technologies. By using jigsaw.w3.org/css-validator/, you can check whether your web page's CSS code complies with W3C's standard specifications.
You can also check HTML and XHTML on the W3C site (validator.w3.org).

Described with properties containing key-value pairs.

target_element or .class_name or #id_name {
property: value;
property: value;
}

• CSS Pseudo-elements
  A mechanism for treating elements that do not exist in HTML as if they do.
  It expands design possibilities without directly modifying the HTML structure.
  ::before, ::after, ::first-line, etc.
　
• CSS Pseudo-classes
  A mechanism for applying styles when an element is in a specific state.
  :hover, :active, :focus, etc.

Applies flexible CSS based on user environment (such as device, color inversion, scrolling settings, etc.).

/* Apply only to users who prefer smooth motion */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }

/* For screen sizes below smartphone */
@media (max-width: 480px) {
     nav ul {
        display: none;
    }
}

/* For tablet and larger screen sizes */
@media (min-width: 768px) {
    .container {
        width: 70%;
    }
}

/* 縦向き(portrait)/横向き(landscape)で表示を変更する */
@media (orientation: landscape) {
    .image {
        width: 100%;
    }
}

/* For non-handheld devices */
@media (not handheld) {
    .sidebar {
        width: 20%;
    }
}

/* Process for users who prefer dark mode */
@media (prefers-color-scheme: dark) {
  html {
    class: "dark-mode";
  }
}

/* What you want to comment out */

To prevent unintended style overrides or to extremely boost the priority of a specific style during an urgent fix, use !important.

.example {
  color: red !important;
}

Utilize the pseudo-class :root.
Property values used repeatedly can be set as custom properties, which makes redundant declarations easier to manage.
Additionally, by not directly specifying property values multiple times, it helps ensure layout consistency.

The custom properties you create can be used with var().

:root {
  --background-color: #f0f0f0;
  --font-color: #000000:
}
/* Use the created custom properties */
main {
  backfround-color: var(--background-color);
  color: var(----font-color);
}

background-color: red;			  /* Specified by color name */
background-color: rgb(255, 0, 0);	  /* Specified by rgb function */
background-color: #00FF00;		  /* Specified by hexadecimal/hexadecimal value */
background-color: hsl(240, 100%, 50%);	  /* Specified by hsl function */
background-color: rgba(0, 255, 255, 0.5); /* rgba function + opacity */

Use the border property.
In addition to the below, you can also specify only certain lines for the top, bottom, right, or left borders, such as border-top/bottom/right/left.

You can specify padding and margin for only a few sides, such as top, bottom, right, or left.

For example: padding or margin-top/bottom/right/left, etc.

Specified with the background property.

There are two methods for adjusting spacing with CSS:

(1) margin-bottom
(2) specifying pre with white-space

Method (2) is deprecated, so method (1) should be used.

Utilize the linear-gradient function.

/* Gradient from left to right, red to green */
background: linear-gradient(90deg, rgb(255, 0, 0),rgb(0, 255, 0));
/* Gradient from top to bottom, red to green, with red covering 75% */
background: linear-gradient(180deg, rgb(255,0,0) 75%, rgb(0, 255, 0));

gradientDirection: The direction of the gradient (90deg: left → right, 180deg: top → bottom *default)
color-stop: Specifies the position where the gradient should end (0% to 100%)

To repeat a gradient, use repeating-linear-gradient.

Utilize `filter`.

Utilize `box-shadow`.

/* Adds a 5px red shadow to the right and top */
box-shadow: 5px -5px  5px　red;
/* Emits a 20px red glow */
box-shadow: 0 0 20px 0 red;　/* 0 can be omitted */

offsetX: + right - left
offsetY: + down - up
blurRadius: excessive roundness (none/0: square, other values: rounded corners) spreadRadius: degree of shadow spread (0/none: original shadow size, number + px: specifies spread range, +: outward -: inward)

Utilize `transform`.

You can remove bullets or change their shape.

nav > ul {
  /* Removes bullet points */
  list-style: none;
}

Color/Alignment Adjustment

li > a {
  /* Makes the anchor link text color the same as the parent element's (list item's) text color */
  color: inherit;
  /* Removes the default underline for anchor links */
  text-decoration: none;
  /* Prevents overflow */
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}
```

Change the color when the user hovers over the menu.

nav > ul > li:hover {
  background-color: #dfdfe2;  /* Change background color */
  color: #1b1b32;            /* Change text color */
  cursor: pointer;           /* Change cursor to a hand shape */
}

Used when you want to arrange menus or other elements horizontally.

Specifies the display format of elements, such as block-level elements, inline elements, and flex items.

nav > ul
{
    display: flex;
    padding: 0;
}
/* Add space as needed */

/* Add ★ before and ! after all text within 
 tags */
p::before {
  content: "★ ";
}
p::after {
  content: "！";
}

When adapting to various screen sizes, such as in responsive design, properly setting the box-sizing property can prevent layout collapse.

/* For all elements, adjust width and height to their content's width and height */
*{
  box-sizing: content-box; /* Element's width and height do not include padding or border size */
  box-sizing: border-box;  /* Element's width and height include padding and border size */
}

When adapting to various screen sizes, such as in responsive design, properly setting the box-sizing property can prevent layout collapse.

scroll-behavior:smooth;
/* For all elements, adjust width and height to their content's width and height */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

You can create animations with CSS by using @keyframes.
While you can't create complex animations like with JavaScript,
it offers high performance as it doesn't require changing the HTML structure.
It's processed separately from JavaScript's main thread, allowing for parallel processing.

Basic syntax: @keyframes rule-name { specify animation movement }

You can specify the animation's behavior at 0% (from) for the start, 100% (to) for the end, and numerical percentages for intermediate actions.

/* Create an animation named 'wheel' */
@keyframes wheel {
   /* Rotate 360 degrees */
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}

/* Use the created animation */
Target element {
  /* Animation to apply */
  animation-name: wheel;
  /* Animation duration */
  animation-duration: 10s;
  /* Specify animation speed */
  animation-timing-function: linear;  /* Proceeds at the same speed from start to finish */
  animation-timing-function: ease-in-out;  /* Slows down the animation at the beginning and end */
  /* Repeat animation infinitely */
  animation-iteration-count: infinite;
} 

/* The above specifications can be combined into one line */
.wheel {
　　animation:　wheel 10s linear infinite;
}

A CSS framework used for front-end development to create responsive web pages and applications.
It includes frequently used features, allowing for the rapid development of visually appealing websites.

Originally developed by Twitter, it was called Twitter Bootstrap, but
it became open-source and independent from Twitter, and its name was changed to Bootstrap.

Official Web Site in English
Example

Background of its Birth
・The expansion of app usage led to a demand for rapid development.
・There was a growing need for responsive web design compatible with mobile devices, not just PCs.

By specifying the class names pre-defined in Bootstrap for elements,
you can arrange the layout without having to write CSS yourself.
= Can be used even without prior knowledge

You can customize Bootstrap's styles by using Sass variables.

Various templates are available, ranging from free to paid options.

To implement Bootstrap, use a CDN (Content Delivery Network) and specify the CSS file with an HTML `` tag.

-- HTML
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </head>

Styles are applied immediately by simply applying predefined CSS classes to HTML elements like <div> according to the format.

<footer>
    <div class="text-bg-secondary p-3">Copyright © 2025 Yuka Koshiba</div>
</footer>

Text Color
text-primary: Changes to primary color (usually blue)
text-secondary: Secondary color (usually gray)
text-success: Color indicating success (usually green)
text-danger: Color indicating danger (usually red)
text-warning: Color indicating warning (usually yellow)
text-info: Color for information display (usually a bluish hue)
text-light: Light color
text-dark: Dark color

Text Alignment
text-center: Centers the text

Object Arrangement
row: Arranges elements horizontally on a web page
col-screen-size-column-width: Specifies the width of columns to be placed within a row
　・Screen size: sm, md, lg, xl
　・Column width: Integer from 1 to 12 = occupies n/12ths of the screen width

<div class="row">
  <div class="col-xs-6"></div>
  <div class="col-xs-4"></div>
</div>

well: Provides visual depth
btn: Default button style
btn-default: Extends the btn class; used with the btn class to give buttons a standard appearance
btn-primary: Emphasized button used for primary action buttons
btn-secondary: Button used for secondary action buttons
btn-success: Button used for success action buttons
btn-danger: Button used for dangerous action buttons
btn-warning: Button used for action buttons requiring caution
btn-info: Button used for informational buttons
btn-light: Light-colored button
btn-dark: Dark-colored button

An extension language for CSS.

It allows you to write reusable functions, nesting, and conditional statements, which improves code readability compared to regular CSS.

The method for importing Sass varies depending on the development environment, such as VS Code or CodePen.

Variable declaration differs from regular CSS; you declare them using $variable-name: value;.

// Variable declaration
$main-fonts: Arial, sans-serif;
$headings-color: green;
// Use variables to change the style of target elements
h1 {
font-family: $main-fonts;
color: $headings-color;
}

Nesting can improve code readability.

// Regular CSS
article {
  height: 200px;
}
article p {
color: white;
}
article ul {
color: blue;
}

// When using Sass nesting
article {
  height: 200px;

  p {
    color: white;
  }

  ul {
    color: blue;
  }
}

A group of CSS declarations that can be reused throughout the style sheet.

Mixin definitions are written using `@mixin` + a custom name.
If there are arguments, specify them, and write the style settings within `{ }`.

To apply a mixin, write `@include` + custom name.

// mixin definition
@mixin reset-list($parm1, $parm2) {
  margin: 0;
  padding: 0;
  list-style: none;
}
// mixin application
nav ul {
  @include reset-list(10px, 10px);
}

// if statement
@mixin border-stroke($val) {
  @if $val == light {
    border: 1px solid black;
  }
  @else if $val == medium {
    border: 3px solid black;
  }
  @else if $val == heavy {
    border: 6px solid black;
  }
  @else {
    border: none;
  }
}

// for loop
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

// for each loop
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

You can inherit already specified styles using `@extend` + the name of the element to inherit from.

// Inherit styles specified for .info-important to .info
.info-important {
  background-color: magenta;
  @extend .info;
}

A feature useful for code reuse and modularization.

// Import the Sass file "_mixins.scss"
@import 'mixins'