Summary
CSS (Cascading Style Sheets) is a language for configuring the appearance and layout of HTML, XML, and other documents. CSS enables the centralized management of styles and layouts for websites and applications. To improve the efficiency of CSS development, CSS frameworks such as Bootstrap, Foundation, Materialize, and Bulma, as well as preprocessors such as Sass, Less, and Stylus, are provided as tools.
Adjusting web layouts (CSS)(2)
Following the aforementioned, reference books for CSS will be introduced.
The first one is “HTML5/CSS3 Modern Coding: Three Full-fledged Layouts Taught by Front-End Engineers: How to Create Standard, Grid, and Single Page Layouts.
Since you can learn based on the image of a concrete site, it is the best book for engineers who have only worked on the back-end to learn the first step of front-end CSS technology.The contents are as follows
PART0 Introduction
A Site to be created in this manual
Part1 Standard Layout
Examples
Part2 Grid Layout
Blocks automatically move when browser width changes
Example
Part3 Single page layout
Example
Supported Browsers
B Coding Procedure
Download
Coding Precautions and Precautions
C How to use the Developer Tools
Launching the Developer Tools
Element Validation
Confirmation of laundered elements
D How to read this manual
Acknowledgements
PART1 Standard Layout
01 Sites to be created with this PART
Standard Layout
Features of this layout
Has header, footer, side menu, and main screen
Elements that make up a site
02 Base Coding
File Structure
Check elements and sizes
HTML Coding
CSS Coding
03 Header Coding
Element and size check
Site Logo
Global Navigation
04 Coding of main area
Check elements and size
HOT TOPIC (featured content)
NEWS(updated list)
ARTICLES (article blocks)
05 Coding of side menu
Element and size check
Ranking
Document List
Search form
06 Footer Coding
Check Elements and Sizes
Footer Menu
Copywrite
Self-Coding Challenge
How to show rankings
PART2 Grid Layout
07 Sites created with this PART
Grid Layout
Features of this layout
Features that make up the site
08 Base Coding
File Structure
Element and size check
HTML Coding
CSS Coding
09 Box Coding
Checking elements and sizes
HTML Coding
CSS No Coding
Introducing Masonry
Changing colors by category
10 Coding for medium and large boxes
Element and size checks
HTML Coding
CSS Coding
Consider the time it takes for images to load
11 Navigation Coding
Check elements and sizes
HTML Coding
CSS Coding
Site Coding
Coding of navigation links
★Self-coding Challenge
MORE” display on hover
PART3 Single page layout
12 Sites to be created with this PART
Single Page Layout
Features of this layout
Elements that make up a site
13 Base Coding
File Structure
Element and size check
HTML Coding
CSS Coding
Using Web Fonts
14 Header Coding
Element and size check
Site Title
DISPRESSION
Buttons
15 Section 1 (ABOUT ME) Coding
Element and size check
Heading Coding
Coding for self-introduction
16 Coding for Section 2 (WORKS)
Check elements and size
Coding of the work introduction section
17 Coding for Section 3 (MY SKILLS)
Check elements and size
Coding of skill introduction section
Using Icon Fonts
Coding of the icon section
18 Section 4 (CONTACT) and footer coding
Check elements and sizes
Coding of contact form
Footer Coding
19 Preparation for smartphone compatibility
Check the display at this time
Using media queries to achieve responsive web design
20 Coding for Smartphone
Confirmation of display at this time
Coding of hessadas
Section 1 (ABOUT ME) coding
Section 2 (WORKS) coding
Section 3 (MY SKILLS) no coding
Section 4 (CONTACT) no coding
★★★Self-Coding Challenge
Headline design variations
Interaction of WORKS
APPENDIX Self-Coding Challenge Coding Examples
PART1 Self-Coding Challenge Coding Example
How to show ranking
PART2 Coding examples for self-coding challenge
MORE” display when hovering
PART3 Coding examples for self-coding challenge
Headline Design Variations
WORKS Interaction
Translated with www.DeepL.com/Translator (free version)
A good book to read in parallel is Impress’s “Reviewing CSS Now (Future Programming in the Internet Age). The table of contents is as follows: Chapter 1: Considering the Role of CSS, Chapter 2: CSS Basics, and Chapter 3: For the Next Step. It is an easy-to-read book that describes the basics of the CSS language in a simple way, with simple exercises.
For something a little more advanced, there is “Textbook of CSS Design for Web Creators: Design Methods for “Easy-to-Correct CSS” Essential for Modern Web Development.
The table of contents is as follows: Chapter 1: What is design in CSS (1-1 Importance of CSS design, 1-2 CSS that is easy to break), Chapter 2: Reviewing the basics of CSS (2-1 CSS selectors and level of detail, 2-2 Selector refactoring), Chapter 3: Component design ideas (3-1 Component Design in CSS, 3-2 OOCSS, 3-3 SMACSS, 3-4 BEM, 3-5 MCSS, 3-6 FLOCSS), Chapter 4 Component Design in Practice (4-1 How to Create Components, 4-2 Common Component Design and Implementation Patterns), Chapter 5 CSS Preprocessor (5-1 Managing Components Individually), Chapter 6 Tools Necessary for Component Operation (6-1 Operation of Components, 6-2 How to Create Style Guide), Chapter 7 Possibilities of Web Components (7-1 Componentization of HTML/CSS, 7-2 Creating Your Own Creating Your Own Components), which describes the know-how to build a large-scale front-end.
As CSS preprocessors (meta-language), there are Sass (Syntactically Awesome Style Sheets) and Less (The Dynamic Stylesheet Language). For writing a simple validation UI, you can use the web browser’s dev tool introduced in the first book to write the CSS, but if the code is long and complex, you will need to use a preprocessor to make the whole structure optimal.
Some reference sites include CSS Preprocessor (CSS Meta Language) Study, Difference between Sass and LESS – Introduction to CSS Preprocessor, and books such as Less Web Development Essentials,
Sass and Compass for Designers Sass
and Compass in Action”.
In the next article, I would like to give an overview of web technologies.
コメント