폭속으로 무난한 홈페이지를 만들어 보자
일반적인 절차
홈페이지를 제작할 때 일반적으로
1. 와이어프레임(레이아웃) 만들기
2. 디자이너가 디자인을 작성
3. 마크업(HTML, CSS)
라고 하는 흐름이 되는 것이 많다고 생각합니다만, 간이적인 홈페이지라면 그 순서를 밟을 필요는 없다고 생각합니다.
구체적으로 말하면 「2. 디자이너가 디자인을 작성」을 생략합니다.
준비하는 것
와이어 프레임
이제 가겠습니다.
HTML 및 scss 준비
이번에는 scss를 css로 컴파일하면서 작업을 하려고 합니다.
마크 어퍼씨로부터 프런트 엔드 엔지니어씨에게 파일을 건네줄 때도 처음부터 scss로 쓰여져 있으면 편리합니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>爆速で無難なホームページを作ってみる</title>
<meta charset="utf-8">
<meta name="description" content="爆速で無難なホームページを作ってみる">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bakusoku.css">
</head>
<body>
<header>
</header>
<article>
</article>
</body>
</html>
bakusoku.scss
@import "_header.scss";
@import "_content.scss";
scss를 헤더와 콘텐츠로 나누었습니다.
터미널에서 scss를 css로 컴파일합니다.
sass --watch sass/bakusoku.scss:css/bakusoku.css
파일을 감시해 변경이 있으면 자동으로 컴파일해 주기 때문에
--watch 를 기술해 두면 좋은 느낌.헤더 장식
index.html
<header>
<div class="site_title">BAKUSOKU</div>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="work.html">WORK</a></li>
</ul>
</nav>
</header>
우선 영어 사용하고 있으면 멋지다고 생각하기 때문에 영어로 했습니다.
_header.scss
header {
width: 100%;
height: 60px;
position: fixed;
font-size: 0;
.site_title {
padding: 0 20px;
line-height: 60px;
font-size: 20px;
display: inline-block;
}
nav {
display: inline-block;
vertical-align: top;
ul {
li {
display: inline-block;
a {
margin-left: -1px;
padding: 0 20px;
line-height: 60px;
display: inline-block;
text-decoration: none;
font-size: 14px;
color: #000;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
}
}
}
}
display: inline-bolock 를 사용하여 수평으로 정렬하고 싶습니다. HTML 줄 바꿈을 반각 공백으로 인식하기 때문에 부모 요소에 font-size: 0를 작성하여 반각 공백을 지 웁니다.또
display: inline-bolock 를 사용하면 아래로 미묘하게 어긋나므로, 그것을 해소하기 위해서 vertical-align: top; 로 위 정렬하고 있습니다.
이런 느낌의 외형이 되었습니다.
영어를 사용하면 우선 멋집니다.
메인 이미지
index.html
<article>
<section class="main_visual">
<p>
NO BAKUSOKU<br>
NO LIFE
</p>
</section>
</article>
_content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
}
}
}
}
background 의 cover 는 이미지의 종횡비는 유지한 채로 요소를 모두 메워 주기 때문에, 레시폰시브 디자인의 경우에 편리.
원래 이미지는 여기.
무료 사진 소재의 「사진 AC」씨로부터 받았습니다.
현재의 외형이 이쪽.
이대로는 문자를 전혀 읽을 수 없으므로 문자를 읽을 수 있도록 합시다.
그리고 좀 더 분위기를 내자.
_content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
filter: brightness(50%);
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
color: #fff;
}
}
}
}
오야?
filter: brightness(50%); 로 이미지를 어둡게 하려고 생각했지만, 아이 요소의 문자까지 어두워져 버렸습니다._content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
&::after {
content: "";
width: 100%;
height: 400px;
position: absolute;
left: 0;
top: 0;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
filter: brightness(50%);
z-index: -1;
}
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
color: #fff;
}
}
}
}
조금 까다롭지만, 배경은 의사 요소로 지정하여
z-index: -1; 로 요소 뒤에 주위를 돌렸습니다.
오, 잘 갔어.
이미지가 희미해지면 왠지 멋지게 되는 신기.
끝에
보시다시피, 이미지 편집 소프트웨어가 없어도 거의 마크 업만으로 디자인을 할 수있게되었습니다.
Font Awesome 등을 이용하면, 폰트의 지정을 하는 것만으로 아이콘을 사용할 수 있거나.팀 등 전체에 공유가 필요가 없는 경우는, 와이어 프레임은 푹신푹신 머리 속에서 상상해, 곧바로 마크 업으로부터 들어가도 좋은 것이라고 생각하고 있습니다. 나는 갑자기 마크 업에서 들어갑니다 (포토쇼에서 디자인에서 때도 있지만 ...).
또, 홈페이지는 화상의 이미지가 굉장히 강하기 때문에, 화면의 대부분을 멋진 화상이 차지하고 있으면, 유저에게 좋은 인상을 주는 것이 아닐까 생각합니다. 요컨대, 중간에 어딘가 좋은 이미지를 실면 나름대로 보인다는 치수.
Reference
이 문제에 관하여(폭속으로 무난한 홈페이지를 만들어 보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nagamasa_azai/items/e82ef2ae939048298cfa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
