초보자 수준

이것은 내가 처음으로 사이트를 만든 것이다.
HTML, CSS는 거의 쓰지 않았습니다.
JavaScript는 Alexa 기술을 제작할 때 Lambda가 쓴 정도입니다.

겸사겸사 말씀드리다

배경이야, 만든 거야.

웹 사이트를 만든 이유

제8대 신데렐라 소녀 총선거에서 맡은 호리유자를 지지하기 위해서다.
보리 유코가 총선거에서 본선에 진출한 것은 2번, 7번 가운데 본선에 진출했지만 결국 결과는 권역 밖이어서 아쉽다.
지금까지는 투표만 했는데 이번에는 어떤 형태로든 이런 걸 지원해보고 싶어서 만들었어요.
결과는 권역 밖이어서 매우 유감스럽지만, 개인적으로 맡은 지원은 참가할 수 있다!이런 기쁨은 매우 크다.
처음 만든 사이트지만 간단한 것이라면 바로 만들 수 있을 만큼 문턱이 낮아졌다.
그래서 사이트 초보자들이 열중하는 일을 비망록으로 남겨 두었다.

만든 물건

버튼 연계 게임일 뿐입니다.

솔직히 완성된 사이트는 중학생도 할 수 있는 수준이다.
하지만 라이브러리를 사용하지 않고 처음부터 만들었기 때문에 이런 느낌은 기초를 배울 수 있다고 생각합니다.
나는 더 재미있는 게임을 만들고 싶다.

사이트 만들다가 꽂힌 거.

어떻게 사이트를 발표해야 할지 모르겠어요.

게시 방법은 GitHub 페이지를 선택했습니다.
공공 저장소에서 코드를 관리하고 저장소 설정을 변경하기만 하면 사이트를 발표할 수 있다.
서버가 필요 없어 쉽습니다.
참고로 GitHub를 사용하여 웹 사이트 게시 시원하게 공개했습니다.

구현하려는 UI 요소의 이름을 알 수 없어 인기 없음

웹 디자인에서 자주 사용하는 UI 요소의 이름, 용어 요약.

버튼과 좋은 디자인을 참고하고 싶어요.

수달

copypet

cman.jp(생성된 소스 코드를 자유롭게 사용할 수 있음)

참고하도록 허락해 주세요.

id 속성과class 속성의 차이를 몰라요.

id와class의 차이와 구분 방법의 기본
id 속성은 특성의 요소를 지정하고 싶은 경우,class 속성은 스타일을 맞추고 싶은 경우에 사용하는 것이 좋습니다.
class 속성은 한 요소에 여러 개가 있기 때문에 스타일을 맞추기가 쉬워집니다.진작 알고 싶었어요.

이미지에 단추 겹치기

내 경우, 그림(스푼과 돌의 손)에 단추를 겹치려면

Salkawa 이미지에 텍스트와 버튼을 세련되게 배치하는 방법(CSS)
이미지의 div 요소는 position: relative;, 단추의 div 요소는 position: absolute;로 지정되어 이미지에 단추를 중첩할 수 있습니다.

이미지 배율을 유지한 상태에서 확대/축소하려면

이미지를 원래 크기 이상으로 확대하지 않고 비율을 유지하려는 경우

img {
  max-width: 100%;
  height: auto;
}

에서 설명한 대로 해당 매개변수의 값을 수정합니다.max-width: 100%; 그림의width 최대 값을 부모 요소width의 100% 값으로 설정합니다.
이 때 height: auto; 을 지정하지 않으면height는 축소되지 않기 때문에 이미지 비율을 유지할 수 없습니다.
자세한 내용은 이미지 크기 최적화max-width: 100%; 을 참조하십시오.
기타 모델 등 상세한 내용은 teratail 응답에 기재되어 있으니 참고하십시오.

파비콘을 쓰고 싶어요.

탐색 사이트 만들기
https://ao-system.net/favicon/

[HTML] 마이크로 컨트롤러 설정 정보

참고하도록 허락해 주세요.

다른 JS 파일의 함수를 사용하고 싶습니다.

만약 네가 좀 간단하게 쓰고 싶다면, teratail 응답 에서 말한 것처럼

        <script type="text/javascript" src="関数を定義しているファイル.js"></script>
        <script type="text/javascript" src="関数を呼び出したいファイル.js"></script>

될 것 같습니다.(파일의 읽기 순서가 중요)
그러나 기타 teratail 응답에서도 읽기 순서의 편차와 IE에 대한 대응을 고려해야 한다.
이곳은 꼬르륵거릴 때 의외로 나오지 않아 매우 힘들다.

핸드폰으로 연결 버튼을 누르면 눌어붙습니다.

공개 후 게임을 해 본 친구는 "핸드폰에서 하면 눌려서 버튼 연결이 어려워요. 이거 고칠 수 있어요?"라고 말했다.얘기 들었어.
기준 MDN Web Docs touch-action

html{
    touch-action: manipulation;
}

터치-action 속성에 manipulation을 지정하면 더블 클릭 줌 등 비표준 동작을 사용할 수 있습니다.
none이 지정한 경우, 두 번 눌러서 눌렸기 때문에manipulation이어야 합니다.

또한 제작 시 참조하는 URL

디스플레이:none과visibility:hidden의 차이
잊다.

제가 생각한 오늘의 CSS만 해도 2px의 테두리 문자가 있습니다 [2017/28 추기]
나는 지홍씨와 함께 콩을 뿌리는 보존 화면을 만들고 싶다.

감상

그림의 가로 배열을 실현하기 위해float를 지정해도 가로 배열을 할 수 없기 때문에 포기하고 그림을 테이블에 넣고 배열했습니다.
재구성할 시간이 없으니 나중에 돌아보면 큰일이지만 경계로 남고 싶어요.
class와 id의 차이점은 인코딩을 시작하기 전에 코드의 용이성, 수정의 용이성을 알고 모르면 알 수 있기 때문에 인코딩하기 전에 알고 싶습니다.최소한 알아야 할 정보를 모으면 돼.