처음으로 빈 좌석 음식을 만들어 봤어요!

12411 단어 HTMLJavaScriptCSS

처음으로 빈 좌석 음식을 만들어 봤어요!


소설 게임을 혼자 하고 싶어서 동기를 유지하기 위해 Qiita 기사도 냈어요.
브라우저 노벨 게임을 간단하게 만들 수 있는 소프트웨어를 만들고 싶어서 미리 조사한 게 뭐였어요.
Qiita 기사는 초보자이기 때문에 좋은 일이 있으면 알려주세요.
그럼 바로 가요.

Chapter 0.언어 사용

  • HTML
  • CSS
  • JavaScript(JQuery)

    • Chapter 1.아무튼 제목 화면부터 만들자.


    제목 화면이 없으면 시작할 수 없다.

    1.잠시 해보세요.



    html
    <body>
    <h1>ノベルゲーム！</h1>

    <a href="">続きから</a>
    <a href="">最初から</a>
    <a href="">環境設定</a>
</body>
    css
    *{
    text-decoration:none;
    color:black;
}
h1{
    background-color:rgba(255,0,0,.3);
}
a{
    display:block;
    background-color:rgba(0,255,0,.3);
}
    필요한 게 이게 다야?
    이를 바탕으로 CSS로 디자인을 제작하고 그 위에 가로background-color:rgba(??,??,??,.3); 등 배경색을 더하면 어떤 요소가 어디에 있는지 쉽게 알 수 있다.

    2. 제목과 메뉴를 중앙에 놓고 싶다.


    따라서 h1과 a에 지정text-align:center;.
    또한 모든width는 10em로 설정됩니다.

    이때 h1요소와 a요소의 내용은 중앙 접근이 되었지만 a요소 자체는 왼쪽으로 접근한다.이걸 정가운데display:flex;로 가져가기 위해 소환합니다.
    html
        <div id="felxcontainer">
        <h1>ノベルゲーム！</h1>

        <a href="">続きから</a>
        <a href="">最初から</a>
        <a href="">環境設定</a>
    </div>
    css
    #flexcontainer{
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
}
    그래서

    무사히 한가운데로 왔다.

    3. 배경이 좀 쓸쓸한데...


    따라서 네트워크의 자유 이미지를 배경으로 지정합니다.
    css
    body{
    background:url("image/TopImage.jpg");
    margin:0;
    padding:0;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
}

    h1과 a의 부원소(#flexcontainer) css에 justify-content:center;를 추가합니다. 왜냐하면 전체적으로 향상되었기 때문입니다.그리고 아래의 거리 전체가 가운데로 올 것이다.

    4. 이후 세세한 조정을...


    결국 이런 느낌이야.

    html
    <body>

    <div id="flexcontainer">
        <h1>ノベルゲーム！</h1>
        <div>
            <a href="">続きから</a>
            <a href="">最初から</a>
            <a href="">環境設定</a>            
        </div>
    </div>
</body>
    css
    *{
    text-decoration:none;
    color:black;
}
body{
    background:url("image/TopImage.jpg");
    margin:0;
    padding:0;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
}
#flexcontainer{
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    justify-content: center;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
}
#flexcontainer div{
    border:2px solid white;
    border-radius:5px;
}
h1{
    margin:0;
    color:white;
    font-size:11vw;
    text-align: center;
}
a{
    color:white;
    display:block;
    text-align:center;
    font-size:2.5vw;
    line-height:2em;
    width:10em;
}
a:hover{
    background-color:rgba(255,255,255,.5);
}
    인내심이 있다면 다음부터는 게임 콘텐츠를 만들 생각입니다.

    웹 페이지 정보


  • PAKUTASO(이곳의 자유 이미지를 사용했습니다.)
    • HTML CSS Flexbox
    HTML·CSS에서 자주 사용하는 기술

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage