-2
ウェブページの特定のセクションをユーザーの表示ウィンドウの領域と正確に一致させるにはどうすればよいですか？
html, body{
height:100%;
}
.fillheight{
display:flex;
flex-direction:column;
min-height:100%;
}
.fillheight-2{
flex:1;
}
/*NAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
VVVVVVVVVVVVV
NAV
NAV
NAV*/
.fixated{
position:fixed;
}
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
.list-style{
list-style-type: none;
}
.a{
text-decoration: none;
font-family: 'Oswald', sans-serif;
color: #938653;
@media (min-width: 100px) {
font-size: 1em;
}
@media (min-width: 600px) {
font-size: 1.6em;
}
@media (min-width: 1000px) {
font-size: 2.1em;
}
}
.flex{
background-color: #212121;
display: flex;
padding: 10px;
justify-content: space-around;
width: 100%;
margin: auto 0;
}
/*HOVERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR
RRRRRRRRRRRRRRRRRRRRRR
RRRRRRRRRRRR
RRRRRRRR*/
a {
text-decoration: none;
}
a:hover,
a:active,
a:link {
color : #938653;
text-decoration: none;
}
.btn-2 {
letter-spacing: 0px;
}
.btn-2:hover,
.btn-2:active {
letter-spacing: 10px;
}
.btn-2:after,
.btn-2:before {
border: 1px solid rgba(#938653, 0);
bottom: 2px;
top: 2px;
content: " ";
display: block;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn-2:hover:after,
.btn-2:hover:before {
backface-visibility: hidden;
border-color: #938653;
transition: width 350ms ease-in-out;
width: 100%;
}
.btn-2:hover:before {
bottom: auto;
top: 0;
width: 100%;
}
/*WELCOMEEEEEEEEEEEEEEEEEEEEEEE
WELCOMEEEEEEEEEEEEEEEEEEEE
WELCOMEEEEEEEEEEEEEE
EEEEEEEEEEEEEE
EEEEEEEEEEEEEE*/
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
html,body{
height: 100%;
background: #4A6556;
}
.box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #4A6556;
padding-top:60px;
height: 100vh;
}
.Hey{
font-family: 'Kumar One', cursive;
color: #938653;
font-size: 38px;
@media (min-width:500px){
font-size: 70px;
}
@media (min-width:800px) {
font-size:100px;
}
@media (min-width:1100px) {
font-size:165px;
}
}
.Hello{
font-family: 'Lato', sans-serif;
color:#212121;
font-size: 16px;
@media (min-width:500px){
font-size: 24px;
}
@media (min-width:800px) {
font-size:40px;
}
@media (min-width:1100px) {
font-size:58px;
}
}
/*ABOUT
ABOUTTTTTTTTTTTTTT
ABOUTTTTTTTTTTTT
ABOUTTTTTTTTTT*/
.parent{
display: flex;
flex-flow: row wrap;
background:#212121;
padding-bottom:50px;
}
.general{
background:#212121;
border-radius: 7px;
margin: 5px;
padding: 20px;
}
.Header{
order: 1;
height: 100px;
flex: 0 1 100%;
color: #4A6556;
font-family: 'Kumar One', cursive;
font-size: 80px;
padding-left: 50px;
padding-top:60px;
}
.Main{
order: 2;
min-height: 250px;
flex: 2.5 1;
@media(max-width: 800px){
flex:1 1 100%;
}
color: #938653;
font-family: 'Lato', sans-serif;
font-size: 22px;
padding: 20px 50px;
}
.Pic{
order: 4;
flex: 1 1;
flex-grow: 1;
padding-right: 55px;
}
.pic{
text-align: center;
}
/*PROJECTTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTTTT
PROJECTTTTTTTTTTTTTT
*/
.Section{
@media (max-width:600px){
zoom:90%;
}
@media (max-width:512px){
zoom:85%;
}
@media (max-width:489px){
zoom:80%;
}
@media (max-width:462px){
zoom:70%;
}
@media (max-width:420px){
zoom:60%;
}
}
.Flexy{
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
background: #4A6556;
padding-bottom:50px;
padding-top:30px;
}
.coloring {
border-radius:7px;
padding: 5px;
margin: 5px
}
.Projects{
order: 1;
flex: 0 1 100%;
font-family: 'Kumar One', cursive;
color: #938653;
font-size: 80px;
padding-left: 50px;
}
.Tribute{
order: 2;
flex: 1 1;
text-align: center;
font-family: 'Kumar One', cursive;
color:#212121;
font-size: 50px;
}
.Portfolio{
order: 3;
flex: 1 1;
text-align:center;
@media (max-width:1120px){
flex:100%;
}
font-family: 'Kumar One', cursive;
color:#212121;
font-size: 50px;
}
.fade{
opacity: 1;
transition: opacity 0.25s ease-in-out;
}
.fade:hover {
opacity: 0.4;
}
.word-1{
position: relative;
left: -62px;
top:26px;
}
.word-2{
position: relative;
left:10px;
top:23px;
}
/*CONTACTTTTTTTTTTTTTTTTTTTTT
CONTACTTTTTTTTTTTTTTTTTTTT
CONTACTTTTTTTTTTTTTT
TTTTTTTTTTTTTT
TTTTTTTTTTTTTTTTT
TTTTTT*/
.marking{
border-radius: 7px;
margin: 5px;
padding:0px;
}
.contener{
display:flex;
align-items: center;
flex-flow: column;
background:#212121;
padding-top:40px;
padding-bottom:40px;
}
.Contact{
order:1;
width: 100%;
padding-left: 1.0em;
margin-bottom:50px;
font-family: 'Kumar One', cursive;
color:#938653;
font-size:75px;
}
.Email{
text-align: center;
order:2;
font-family: 'Raleway', sans-serif;
color:#4A6556;
font-size: 50px;
}
.Linkedin{
text-align: center;
order: 3;
font-family: 'Raleway', sans-serif;
color:#4A6556;
font-size:50px;
}
.email{
background:#4A6556;
color:#938653;
padding-left:9px;
padding-right:9px;
border-radius:6px;
}
//colors
$red: #212121;
$white: red;
//base styles
* {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
.btn-3 {
background: lighten($red, 3%);
border: 0px solid darken($red, 1);
box-shadow: 9px 9px 0 darken($red, 5%), 2px 4px 6px darken($red, 2%);
letter-spacing: 1px;
transition: all 150ms linear;
padding:0px;
}
.btn-3:hover {
background: darken($red, 1.5%);
border: 0px solid rgba(#000, .05);
box-shadow: 0px 0px 0px rgba(#fff, 1);
color: lighten($red, 18%);
text-decoration: none;
text-shadow: 0px 0px 0 darken($red, 9.5%);
transition: all 250ms linear;
opacity:0.8;
}
.zoomout{
@media(max-width:760px){
zoom:80%;
}
@media(max-width:580px){
zoom:70%;
}
@media(max-width:580px){
zoom:60%;
}
@media(max-width:430px){
zoom:50%;
}
@media(max-width:430px){
zoom:50%;
}
@media(max-width:430px){
zoom:40%;
}
}<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
<body class="fillheight">
<div class="fillheight-2">
<ul class="flex fixated list-style">
<li><a href="#" class="btn-2 a">About </a></li>
<li><a href="#" class="btn-2 a">Projects</a></li>
<li><a href="#" class="btn-2 a">Contact</a></li>
</ul>
</div>
<div class="fillheight-2">
<div class="box">
<hey class="Hey">Welcome!</hey>
<hello class="Hello">This is David's portfolio page.</hello>
</div>
</div>
<div class="fillheight-2">
<div class="parent">
<header class="Header general">About</header>
<main class="Main general">I started learning web development the December of 2016 by completing my first ever coding challenge on Free Code Camp. It was that December because that was when the winter recess of my college began, which meant I had abundance of time to assign to whatever activity I would take up.<br><br>The reason I am interested in web development is that I want to make beautiful and easy-to-use websites for people. I chose websites over apps or softwares that you have to download to use, because they are so accessible and widespread.</main>
<pic class="pic Pic general"><img src=""http://imgur.com/kJNhW7r"><img src="http://i.imgur.com/kJNhW7r.jpg" title="source: imgur.com"" class="img-circle" alt="My head shot" width="250" height="250"></pic>
</div>
</div>
<div class="fillheight-2">
<section class="Flexy Section">
<div class="coloring Projects ">Projects</div>
<div class="coloring Tribute">
<div class="word-1">Tribute Page</div>
<a href="https://codepen.io/Hello911/pen/EZYWed"><img src="http://i.imgur.com/ifkpFbR.png" title="source: imgur.com" class="img-rounded fade" alt="Tribute Page" width="500" height="300"></a>
</div>
<div class="coloring Portfolio">
<div class="word-2">My Portfolio Page</div>
<a href="#"><img src="http://i.imgur.com/EnR9gj1.png" title="source: imgur.com" title="source: imgur.com" title="source: imgur.com" class="img-rounded fade" alt="Coming Soon!" width="500" height="300"></a>
</div>
</section>
</div>
<div class="fillheight-2"> <section class="contener">
<div class="marking Contact">Contact</div>
<div class="marking Email">Email me <b class="email zoomout">[email protected]</b></div>
<div class="marking Linkedin">Or connect with me on <a href="https://www.linkedin.com/in/david-c-b8b880101
" class="btn-3 btn" target="_blank"><img src="http://i.imgur.com/7lTSk6J.png" title="source: imgur.com" alt="Linkedin Button" class="img-rounded" height=50px width=50px></a></div></div>
</section>
</body>私は最初のセクション、 "ようこそ！" と言う部分が欲しいです。その緑色の長方形のセクションが、人々が私のWebページを表示しているウィンドウのスペースを正確に占めるようにしたいと思います（もちろん、すでにナビゲーションバーによって占められているエリアは除きます）。
これは意味があるかどうかわかりません。しかし、基本的には、Webページの読み込みが完了した後、最初のものとのみが表示されます。ナビゲーションバーとウェルカムセクションです。次に、ナビゲーションバーのボタンをクリックするか、またはスクロールダウンすることによって、ページの他の部分/セクションに行くことができます。
Go to link. Too many lines of code.
[ウィンドウのサイズに合わせてdivを作成する方法] /stackoverflow.com/questions/37378895/how-to-make-a-div-fit-to-the-size-of-the-window） – BSMP