개시하다

도쿄이과대학 Advent Calendar 2017 20일째 보도다.
19일째@motoakim 기사다.21일째@fujitora 보도입니다.
2016년 8월에 저는 HTML/CSS의 초보자로 어떤 HP의 설치를 맡았습니다.
그때 설치된 페이지는 여기.입니다.
HTML/CSS에 대한 경험치를 쌓았기 때문에 이번에는 이전에 자신이 쓴 코드에 대한 평론을 시도해 보겠습니다.

가장 큰 오류

당시 "position relative/absolute가 요소를 자유롭게 배치할 수 있다는 것은 정말 대단하다!!"포지션의 대단한 감동을 받았던 시기였다.
나는 포지션이 이것만 있으면 무엇이든 실현할 수 있다고 믿는다
포지션을 사용하여 대부분의 요소를 설정했습니다.
(그리고 처음에는 스펀지 스펀지 문제를 전혀 고려하지 않고 실시했기 때문에 스펀지 사이트를 사용하려다가 죽었다.)
포지션을 과도하게 사용하지 마세요.매사에 적당한 것이 매우 중요하다.

댓글 1 단위와 css 지정 방법이 좋지 않습니다.

우선 헤더 아래 사진 부분입니다.
슬라이드 쇼를 jquery로 진행합니다.
smike 레벨을 넣은 요소를 사용하여 흰색을 칠한다

코드 여기 있어요.
about.html

<div class="photo">
    <div class="smoke"></div>
    <h1>大学に新しい文化を作る</h1>
</div>

about.css

#about .photo{
    position: relative;
    width: 100%;
    height: 60vh;//(1)
    background-color: white;
    background-image: url("../img/about/01.jpg");//(2)
    background-position: 50% -134px;//(3)
    background-size: cover;
    background-attachment: fixed;
    transition: background-image 1s linear;
  }

  #about .smoke{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.4;
  }

@media screen and (max-width: 999px) {
  #about .photo{
    padding-top: 45%;//(1)
  }

  #about .photo h1{
    position: absolute;
    top: 68%;
    right: 5%;
    font-size: 250%;
    color: #594e52;
    z-index: 1;
  }
}

(1) padding-top과 Height의 중복을 지정합니다.그중 하나는 사라져야 한다.
(2) jQuery에서

$(".photo").css("background-image","(次の画像のurl)")

HTML에 직접 쓰는 것이 좋습니다.
(3) px로 높이를 높이지 않았기 때문height: 60vh;//(1) px를 사용하지 않는 것이 좋다.

여기서 리뷰 2 포지션을 사용하는 것은 좋지 않습니다.

여기서 말할 수 있는 건 딱 하나야.
제목 "About Units"의 CSS를 보면...

#about .title{
    position: absolute;//※
    font-size: 25px;
    border-radius: 3%;
    top: 9%;//※
    width: 100%;
    text-align: center;
  }

위치 조정에 ※ 를 사용했습니다.가장 좋은 것은 Margin을 쓰는 것이다.
문장의 위치 조정도 같은 일을 하고 있기 때문에 생략한다.

평론 3 가운데죠...

여기는bootstrap3로 팩스를 진행했습니다.괜찮아 보여요.
다만, 세로로 중앙으로 기울지는 않았다.그때였으면.

display: table-cell;
vertical-align: middle;

이거 쓰면 될 것 같은데 왜 포기했냐면...
지금은 Flexbox,bootstrap4도 세로로 정렬할 수 있어 더욱 간단하게 실현할 수 있습니다!

심사 4col,position,padding이 혼합되어 디자인이 붕괴되었다

화면이 크면 그렇게 신경 안 써서...

화면이 작아지면 내용이 오른쪽으로 치우친 인상을 준다.(아래 사진은 폭을 줄일 때의 모습)

전선 좀 봐.
about.html

<div class="container" style="margin-bottom: 8%;"><!-- (1) -->
  <div style="font-size: 35px; margin: 10% 0 10%; text-align: center; overflow: hidden;"><span class="i">M</span>embers</div>
  <div class="col-xs-6 hidden-xs">
    <div class = "box">
      (六角形に関するコード)
    </div>
  </div>
  <div class="col-xs-3 sm-xs-content">
      <ul>
        <li class="lititle">学部生</li>
        <li>2年　　26人</li><!-- (2) --> 
        <li>3年　　3人</li>
        <li>4年　　2人</li>
        <li class="lititle">卒業生</li>
        <li>11人</li>
      </ul>
  </div>
  <div class="col-xs-3 sm-xs-content">
      <ul>
        <li class="lititle">所属学部</li>
        <li>理学部</li>
        <li>工学部</li>
        <li>理工学部</li>
        <li>経営学部</li>
        <li>経営学部(立命館大学)</li>
      </ul>
    </div>
</div>

먼저 나쁜 짓을 하는 스타일이 바로 이런 스타일이다.

#about .box{
    position: absolute;//※はみ出し
    overflow: hidden;
    width: 26vw;
    padding-top: 28.36vw;
    top: 24%;
    left: 28%;
}

Bootstrap3의 col로 겨우 위치를 맞췄어요.
또한 top,left를 사용하여 위치 조정을 진행합니다.
좀 더 오른쪽으로 내려갔으면 좋겠어요...이런 마음이 전해졌다.
이 방법을 지정하면 원소의 위치가 비뚤어집니다.

margin: 0 auto;

썼으면 됐지?
나쁜 짓을 하는 두 번째 이유는 표준적인 'l 라벨' 의padding이다.
분명히 중간에 가까운 디자인인데 l 라벨이 달린 패딩이 이상해요.
종합적으로 말하면 대체로 이런 느낌이다.

(col 자체 패딩 등 생략)container에서 노출.box된 css의 (※ 노출)처럼 육각형을

position: absolute;

위치 조정이 원인이다.
이 영향으로 .col-sm-6 원소의 높이가 사라졌다.
지금까지 반영된 수정점은 이런 느낌이다.

끝맺다

왜냐하면 제가 처음에 포지션을 과도하게 쓰면 안 된다고 했거든요.
나는 포지션을 언제 사용하는 것이 좋을지 쓰고 싶지만, 나는 이미 기진맥진했다.
언제 쓰고 싶으세요?
예전에 쓴 코드를 돌이켜보면 그때 어떻게 생각했는지, 자신의 성장을 느낄 수 있다.
여러분도 예전에 썼던 코드를 한번 볼까요?