지난번까지의 개요

저번 현재 111InputForm.css 설정 내용의 확인과 개조 도구를 소개했다.
이제 우리 다음 실제 상태를 개조합시다.

텍스트 상자의 글꼴 설정 수정

우선, 게임에 적응하기 위해 텍스트 상자의 글꼴 설정을 수정합니다.
글꼴 크기를 24px로 변경하고 다음과 같은 글꼴 정의를 추가하십시오.

#_111_input{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999;
    /*フォントサイズ*/
    font-size: 24px;
    /*幅*/
    width : 20em;
    /*高さ*/
    height : 1.5em;

    /*ここからフォント定義追加*/
    font-weight:bold; 
    color: #f8f8f8;
    text-shadow: black 1px 1px 0px, black -1px 1px 0px,
                 black 1px -1px 0px, black -1px -1px 0px;
    font-family: GameFont;
  }

먼저 글꼴 스타일 font-weight를 bold(굵게)로 설정합니다.
그런 다음 텍스트의 색상을 RGB 형식으로 지정합니다.
RGB란?이런 분들은 이쪽색상 코드 리스트 사이트 등을 참조하세요.
그나저나 Visial stdio code 등은 일부 편집기에서 색상 샘플을 즉석에서 볼 수 있다.
이번에는 상당히 흰색에 가까운 회색입니다.
그리고 텍스트에 음영을 넣는text-shoadow를 지정합니다.
black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px; 상자의 텍스트 주위는 검은색 픽셀 선으로 둘러싸여 있습니다.
그런 다음 font-family(글꼴 유형)를 GameFont으로 설정합니다.
참고로 GameFont의 지정은 프로젝트 폴더 안에 있습니다.css 지정.

@font-face {
    font-family: GameFont;
    src: url("mplus-1m-regular.ttf");
}

그럼 지금까지의 상태를 살펴봅시다.
아직 게임 같지는 않지만 글이 바뀌었어!

텍스트 상자 정의 추가

그리고 상자 부분의 설정을 변경해서 게임에 적응하도록 하세요.
다음 추가 상자 정의와 같이 너비를 15em으로 변경하십시오.

#_111_input{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999;
    /*フォントサイズ*/
    font-size: 24px;
    /*幅*/
    width : 15em;
    /*高さ*/
    height : 1.5em;

    /*ここからフォント定義追加*/
    font-weight:bold; 
    color: #f8f8f8;
    text-shadow: black 1px 1px 0px, black -1px 1px 0px,
                 black 1px -1px 0px, black -1px -1px 0px;
    font-family: GameFont;

    /*ここからボックス定義追加*/
    border:none;
    outline: 0;
    background: rgba(0,0,0, 0.5);
  }

먼저 경계선 border를 none(없음)으로 설정하고 오목해 보이는 부분을 수정합니다.
다음에 outline을 0으로 설정하고 입력에 나타난 대강을 삭제합니다.
마지막으로 rgba로 백그라운드를 지정합니다.
0, 0, 0 섹션은 RGB 색상 지정이지만 색상과 달리 10진수로 지정됩니다.
0.5의 부분은 투사율로 0에 가까울수록 투과된다.
그럼 지금까지의 상태를 살펴봅시다.
여기까지의 지정은 게임에서도 잘 적응할 수 있을 것 같은데, 어때요?

참고로 border는 solid(한 줄)로 선의 굵기와 선의 색깔을 각각 지정하고 border-radius(각의 원도)를 지정하면 된다.

/*ここからボックス定義追加*/
  border:solid 3px #f8f8f8;
  border-radius:5px;
  background: rgba(0,0,0, 0.5);

게임 창과 비슷한 테두리를 만들 수 있습니다.

버튼 정의 변경

마지막으로 버튼을 바꾸어 보세요.
어렵기 때문에 단추를 누르면 그림을 사용합니다.
중첩 우선 순위 다음에 단추 정의를 추가하십시오.

#_111_submit{
  /*位置指定*/
  position: absolute;
  /*重なり優先度*/
  z-index:999; 

  /*ここからボタン定義追加*/
  width : 66px;
  height :66px;
  font-size: 0px;
  color: rgba(0,0,0,0);
  outline: 0;
  border:none;
  background: url(../img/sv_actors/Actor1_1.png) 0px 0px no-repeat;
}

설명한 것은 생략되었지만 글꼴을 사용하지 않기 때문에 글꼴 크기를 0으로 바꾸고 더욱 투명하게 합니다.
원래는 플러그인 측면에서 단추의 텍스트를 변경하려고 했지만, 먼저 CSS 측에서 강제로 지정했습니다.
배경에 이미지를 지정합니다.
url(./sv actors/Actor1 1.pg) 섹션에 사용된 이미지는 111InputForm.css에서 상대 경로를 지정했습니다.
../img/sv_actors/Actor1_1. png의.는 프로젝트 폴더의 맨 위에 있는 이전 계층 폴더입니다.
/img/sv_actors/는 프로젝트 폴더 내의 하위 폴더입니다.
Actor1_1.png은 파일 이름입니다.
0px0px의 지정은 단추의 위쪽과 왼쪽에서 그림을 얼마나 오래 보이는지, 붙어있기 때문에 모두 0입니다.
no-repet은 반복 디스플레이 (순환) 이미지를 지정하지만, 순환이 필요하지 않기 때문에 no-repeat을 지정합니다.
완성!좀 귀여워요?

그래서 이번에 CSS 리모델링에 관한 기사를 제작했습니다.
111씨의 허가를 받았기 때문에 다음에는 플러그인 부분을 조금 개조해 봅시다.