소개

본 기사는

"progate나 닷 설치등에서 html, css의 문법적인 인풋은 했지만, 막상 웹사이트를 작성하는 경우에 어느 순서를 밟으면 좋을까??"

라고 하는 사람을 초학자를 대상으로 html, css를 사용해 web사이트를 만들 때의 순서와, 그 때에 염두에 두어야 할 일을 정리한 것입니다.

망설임 내용이라고는 생각합니다만, 참고가 되면 다행입니다!

※본 기사는 디자인이 이미 되어 있는 경우의 순서가 됩니다.①~③の過程は実際にデザインツールか紙を使って書く事を強くお勧めします！！

① 디자인의 모든 요소를 ​​틈이 없는 □로 메운다!

포인트

・모두를 □로 틈없이 매장하는 것이 중요!

예 적선으로 구분

↓

② ①로 구분한 □을 한층 더 하나를 세세한 파트로 나눕니다

②-1 우선은 큰 파트로부터 나누어 간다(파란 선)

②-2 큰 파트 속을 더욱 세분화할 수 있는 곳까지 나누어 간다(녹선)

포인트

・큰□안에 작은□가 깔려 있는 상태가 된다
·이 □ 중 하나가 div 요소라고 생각합니다! ! (정확하게는 div 이외의 태그도 사용하지만,,)

③ 　□의 1개 1개에 이름(class명)을 붙인다! !

③-1 빨간 선으로 둘러싼 □에 이름을 붙인다

③-2 청선으로 구분한 □에 이름을 붙인다

③-3 녹색으로 구분한 □에 이름을 붙인다

포인트

・큰 부분에서 이름을 붙여 간다(적선→청선→녹선)
・이름은 기본적으로 중복없이 붙인다
· 정확히 같은 부품을 여러 번 사용할 때는 같은 이름을 붙인다.
・이름의 붙이는 방법(명명 규칙)은 프로젝트 단위로 실시한다→혼자의 프로젝트가 아니라면, 이름을 붙인 단계로 리뷰를 넣으면 좋다! !

참고용: 대표적인 명명 규칙에 대해서

④ html로 □를 중첩 구조(중첩 구조)로 써 간다

예: 위의 body1 부분

<div class="body1">//赤線
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
    <div class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </div>青線//
</div>//赤線

의미론 웹 정보

시멘틱스 web는 현대적인 html의 작성법으로서, html5로부터 도입된 「 より要素の内容に沿ったhtmlタグ使おうとする考え方 」입니다! !
구조의 깨끗한 html을 쓸 수 있고, SEO 등의 대책이 됩니다! !

방금 전의 html은 알기 쉬움 중시를 위해서, 모든 요소를 ​​div 태그로 둘러쌌습니다만, 시멘틱스 web를 도입하면 div 대신에 다양한 html 태그를 사용해 가게 됩니다.

예

<main class="body1">//赤線
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
    <article class="contents">//青線
      //緑線 <div class="img"><img src="" alt=""></div>緑線//
      //緑線 <div class="text"><p>説明文説明文</p></div>緑線//
     </article>青線//
</main>//赤線

html을 작성할 때는 의미론 웹을 의식하고 html 태그를 고안하는 것이 좋습니다! !

참고용: 의미론 웹에 대해 자세히 알아보기

포인트

・「적선의 요소→청선의 요소→녹선의 요소」가 중첩이 되도록 html을 쓴다
· html을 먼저 내보내고 필요한 요소가 모두 출력되었는지 브라우저에서 확인

⑤　css로 디자인을 정돈한다

HTML에서 브라우저에 각 요소가 출력되므로 css로 디자인에 따라 잘 스타일링하십시오.

요약

이 절차는 "とにかくブラウザ上で成果物が目で見える状態にする。その上で細かいスタイリングを行なっていく！"라는 생각을 기반으로합니다.

이렇게 하는 것으로 제삼자에 대해서, 초기 단계로부터 성과물의 진척을 공유하기 쉬워지거나, css등의 거동을 브라우저로, 일일이 확인할 수 있다고 하는 혜택을 받을 수 있습니다.