LoginSignup
frswataru
@frswataru (本石 渉)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

HTML CSS　見切れの調整

Q&AClosed
HTMLCSS

解決したいこと

下図の通り縦長のディスプレイだと見切れてしまいます。
ディスプレイに応してコンテストレイアウトを整列させたいです。
例）縦長ディスプレイなら縦一列または縦2列でディスプレイの真ん中に整列
image.png

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">

</head>

<body>
    <script src="script.js"></script>


    <div class="header">
        <div class="header-logo" font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
            C<span style="font-size:0.3em;font-weight:normal;">heck</span>
            S<span style="font-size:0.3em;font-weight:normal;">heet</span>
            S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

        </div>

        <div id="container">
            <div class="circle icon">
                <span class="bar top"></span>
                <span class="bar middle"></span>
                <span class="bar bottom"></span>
            </div>
        </div>

        <div id="containerLogo">
            <img src="images/TCD_B.jpg">
        </div>




        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $("#container").click(function () {
                $(".icon").toggleClass("close");
            })
        </script>


    </div>

    <div class="main">
        <nav id="nav">
            <ul>
                <!-- <li><a href="#" onclick="window.close(); return false;">Close</a></li> -->
                <li><a href="Create.html">Create</a></li>
            </ul>

        </nav>


        <div class="contents">

            <div class="contents-item">
                <a href="Create.html"><img src="images/Create.png"></a>
                <p>Create</p>
            </div>

            <div class="contents-item">
                <img src="images/Read.png">
                <p>Read</p>
            </div>

            <div class="contents-item">
                <img src="images/Update.png">
                <p>Update</p>
            </div>

            <div class="contents-item">
                <img src="images/Delete.png">
                <p>Delete</p>
            </div>
        </div>
    </div>
</body>

</html>

stylesheet.css

body {
  font-family: "Avenir Next";
  color      : #202124;
}

/* header */
.header {
  background-color: #26d0c9;
  color           : #fff;
  padding         : 20px 40px;
  position        : relative;
}

.header-logo {
  font-size  : 46px;
  text-align : center;
  font-weight: bold;

}

.copy-container span {
  color: #ff4a4a;
}

#container {
  background   : tomato;
  display      : inline-block;
  border-radius: 500px;
  margin       : 10px;
  position     : absolute;
  top          : 10px;
  right        : 0;
  padding      : 18px;
  cursor       : pointer;

}

#containerLogo {
  display      : inline-block;
  border-radius: 500px;
  margin       : 10px;
  position     : fixed;
  top          : 0;
  left         : 0;
  cursor       : pointer;

}

.circle {
  position: relative;
  width   : 24px;
  height  : 24px;
}

.bar {
  position     : absolute;
  height       : 3px;
  width        : 100%;
  background   : white;
  border-radius: 4px;
  transition   : ease 0.3s;
}

.top {
  top: 18%;
}

.middle {
  top: 48%;
}

.bottom {
  top: 78%;
}

.close .top {
  transform: rotate(45deg);
  top      : 48%;
}

.close .middle {
  opacity: 0;
}

.close .bottom {
  transform: rotate(-45deg);
  top      : 48%;
}

/* nav */
nav {
  opacity   : 0;
  visibility: hidden;
  transition: 0.3s;
  height    : 0;
}

nav.active {
  opacity   : 1;
  visibility: visible;
  float     : right;
}

ul {
  display        : flex;
  justify-content: center;
}


li {
  list-style: none;
  padding   : 8px;
}

/* main */

.main {
  padding: 25px 40px;
}

/* contents */

.contents {
  display        : flex;
  justify-content: center;
}

#container2 {
  display        : flex;
  justify-content: center;
}

.contents-item {
  height    : auto;
  float     : left;
  margin    : 50px 50px 0px 50px;
  text-align: center;
}

.contents-item img {
  width: 100%;
}

.contents-item p {
  font-size: 46px;
  margin   : 0px;

}

/* SDkEP */

.SDkEP {
  display       : flex;
  align-items   : center;
  flex-direction: column;
  margin        : 10px 0px 10px 0px;
}

.contents-item:nth-of-type(2) {
  margin-left: 50px;
}




.contents-item_Camera p {
  font-size: 46px;
  margin   : 0px;

}

.contents-item_Create p {
  font-size: 46px;
  margin   : 0px;

}

.inputTextBox {
  border       : 1px solid #000;
  border-radius: 50px;
  padding      : 8px 40px;
  width        : 300px;
}

.inputSubmitBox {
  border       : 1px solid #000;
  border-radius: 50px;
  padding      : 8px 40px;
  width        : 200px;
  margin: auto;
}
.inputTextBox:nth-of-type(2) {
  margin: 16px 0px 16px 0px;
}




input {
  background-color    : var(--search-box-bg, white);
  border              : none;
  border-radius       : calc(0.5 * var(--ntp-realbox-height));
  color               : var(--search-box-text);
  font-size           : 16px;
  height              : 100%;

  padding: auto;
  position            : relative;
  width               : 100%;
  text-align: center;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing        : inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  font-size         : 62.5%;
}
0

1Answer

amiya-se
@amiya-se

画面からはみ出るときは折り返して下へというCSSの記述があります。
下記コードを足してみて下さい。

.contents {
  flex-wrap: wrap
}

もしくは下向きに並べるとか。
この際中央揃えが縦横入れ替わりますのでご注意ください。
justify-content: center;とalign-items: center;のことです。

.contents {
  flex-flow: column;
  align-items: center;
}
0

Comments

  1. @frswataru

    Questioner
    思った通りにレイアウトになりました
    奥深いCSSの世界

Your answer might help someone💌

LoginSign Up

Popular Questions