아무래도 7note입니다. 검증 툴은 편리합니다만 모르면 함정에 빠져 버립니다.

검증 툴은 편리하고 다기능이므로 그만 소식이지만, 의지하지 않고 절도 있는 거리감으로 교제해 가고 싶은 것입니다.

아직도 WEB 개발자 초보자의 방향에 검증 툴로 주의해야 할 점을 정리했습니다.

주의점①: 폰트는 디바이스에 의존한다

WEB 폰트를 넣고 있으면 괜찮습니다만, 디폴트 규정의 폰트의 경우 PC와 스마트폰에서는 폰트가 다른 것이 많습니다.

폰트에 의해, 폭이나 문자의 크기가 다르기 때문에 생각하고 있던 개행이 되지 않거나.
개행 상태를 깨끗이 보여주고 싶다면, 미리 여유를 가진 곳에서 개행시키거나 실제로 스마트 폰으로 체크하도록합시다!

주의점②：검증 툴로 딱 있으면, 실기에서는 1문자 어긋나는 일이 있다.

이것은 체험담입니다만, 검증 툴상에서 375px의 디바이스로 보고 있어도, 실제로 375px의 디바이스로 보면 1문자분 어긋나고 있거나 합니다.

(예 : 검증 툴에서는 ↓)


(예 : 실제 장치에서 보면 ↓)

이런 일이 있습니다.

원인은 아마 WEB 폰트로, 필요한 폰트 사이즈를 읽어내고 있지 않으면 PC와 스마트폰에서는 폰트의 굵기의 지정이 다르고, 껄끄러움이 생겨 1문자 어긋나 버리는 것이. .
역시 개발자 툴은 어디까지나 검증용이므로, 반드시 실제의 디바이스로 체크가 필요하네요.

주의점③：ios의 input나 button은 ios 디폴트의 CSS가 효과가 있어 외형이 무너진다

ios의 디바이스를 가지고 있지 않으면 절대로 눈치채지 못합니다만, ios에는 디폴트로 input등에 css가 맞춰져 있습니다.
사용하지 않으려면 reset.css 등에서 다음 설정을 반드시 유지하십시오.

reset.css

input, button, select, textarea {
  -webkit-appearance: none;
}

주의점④：그 밖에도 ios라면 왠지 효과가 없는 CSS이거나, 스크립트가 존재한다

이것은 드물게 일어나지만, 그물의 소스를 가져오거나 하면 실은 ios만 효과가 없는 것 같은 일이 있습니다.
그렇다면 google 선생님에게 "○○○○ ios 효과가 없다"라든지 검색하여 도움을 요청합시다.
그래도 원인이 불분명한 경우는, 쓰는 방법이 잘못되었거나, 정말로 원인이 불분명하므로, 다른 방법을 찾아 봅시다.

주의점 ⑤：고정 헤더나 꼬리말이 있으면 본문의 링크나 버튼이 숨어 눌릴 수 없게 될지도

고정 헤더나 바닥글은 유저의 유도에 매우 편리합니다만, 그것이 있는 탓에 문장의 끝에 있는 유도 버튼등이 누르기 어렵거나, 누르지 않거나, 보이지 않거나 해 버릴지도 모릅니다.
실제로 스마트폰으로 확인해 고정한 요소 때문에 보이지 않는 것이 있는지 확인해 둡시다.

덤으로주의

스마트 폰은 현금 지우기가 어렵습니다. 따라서 CSS를 변경할 계획으로 다시 로드해도 캐시가 남아 있는 상태에서 최신 CSS가 작동하지 않는 경우가 있습니다.
스마트 폰 캐시 클리어를 잊지 마세요.

도움이 될지도

실기의 스마트 폰 디바이스로 검증하는 방법에 대해 쓴 Qiita의 기사가 있었으므로 소개.
htps : // 이 m/아q l_1132/아니 ms/4789bc12아 511136d8b후아

스마트 폰에서도 view-source:를 사용하는 방법은 나도 처음 알았으므로 참고로하고 싶습니다.

오마마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임