dreamland score 42
2020/08/27 18:46 投稿
| flexboxで画像とテキストを均等に横並べない |
| 現在、練習としてポートフォリオを作っております。テキストと画像をdisplay:flex；、justify-content:space-betweenで横並びにしたのですが、均等に横に並びません。下の画像のようになってしまいます。 |
| また、skill_photo5だけ（wordpressの画像とテキスト）が異様に遠く離れて以下のイメージ図のように表示されます。これはどうしてでしょうか？教えていただけると助かります。 |
| 現在、練習としてポートフォリオを作っております。display:flex;でテキストと画像を横並びにで実装したいですが、上手く動きません。 |
| 横並びにするためにskill_boxをdisplay:flex；、justify-content:space-betweenにしたのですが、均等に横に並びません。下の画像のようになってしまいます。 |
| また、skill_photo5だけ（wordpressの画像とテキスト、1番右の画像とテキスト）が異様に遠く離れて以下のイメージ図のように表示されます。これはどうしてでしょうか？教えていただけると助かります。 |
| もし、display:flex;で実装するのが難しければ他のコードの書き方を伝授していただければ助かります。 |
| 練習中ですので、優しく伝授してもらえればと思います。 |
| よろしくお願いたします。 |
|  |
|  |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link rel="stylesheet" href="stylesheet.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css"> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script> |
| <script src="script.js"></script> |
| <title>My portfolio</title> |
| </head> |
| <body> |
| <div class="wrap"> |
| <header> |
| <div class="header_wrapper"> |
| <!-- グローバルメニュー --> |
| <nav class="drawer_nav"> |
| <ul class="drawer_menu"> |
| <li><a href="#">HOME</a></li> |
| <li><a href="#">ABOUT ME</a></li> |
| <li><a href="#">WORKS</a></li> |
| <li><a href="#">SKILLS</a></li> |
| <li><a href="#">CONTACT</a></li> |
| </ul> |
| </nav> |
| <h1>Welcome to My portfolio</h1> |
| <video id="video" playsinline autoplay loop muted> |
| <source src="img/Computer.mp4" type="video/mp4"> |
| </video> |
| </div> |
| </header> |
| <!-- プロフィール --> |
| <div class="about_me"> |
| <div class="portfolio_box"> |
| <div class="portfolio-right"> |
| <img src="img/profile_img.JPG" alt="プロフィール写真"> |
| </div> |
| <div class="portfolio-left"> |
| <div class="portfolio-text"> |
| <div class="portfolio_title"> |
| <h2>About Me</h2> |
| </div> |
| <div class="text"> |
| <p>xxxxxx</p> |
| <p>xxxxxxxxxxxxx</p> |
| <p>xxxxxxxxxxxxxxxxxxxxxx </p> |
| <p>xxxxxxxxxxxxxxxxxxxxxxxxx</p> |
| <p>xxxxxxxxxxxxxx</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="skills"> |
| <div class="title">Skills</div> |
| <div class="skill_box"> |
| <div class="skill-item"> |
| <h3>HTML</h3> |
| <img src="img/HTML.png" alt="HTML" class="skill_photo1"> |
| </div> |
| <div class="skill-item"> |
| <h3>CSS</h3> |
| <img src="img/CSS.png" alt="CSS" class="skill_photo2"> |
| </div> |
| <div class="skill-item"> |
| <h3>jQuery</h3> |
| <img src="img/jQuery.png" alt="jQuery" class="skill_photo3"> |
| </div> |
| <div class="skill-item"> |
| <h3>Javascript</h3> |
| <img src="img/Javascript.jpg" alt="Javascript" class="skill_photo4"> |
| </div> |
| <div class="skill-item"> |
| <h3>Wordpress</h3> |
| <img src="img/Wordpress.png" alt ="Wordpress" class="skill_photo5"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
| ``` |
| ```CSS |
| *{ |
| box-sizing: border-box; |
| } |
| body{ |
| margin:0; |
| padding:0; |
| font:'Times Roman News','serif','Times' |
| } |
| .header-wrapper{ |
| position: relative; |
| } |
| h1{ |
| position:absolute; |
| color:#fff; |
| text-align: center; |
| top:50%; |
| left:27%; |
| transform:(-50%,-27%); |
| font-size:50px; |
| } |
| .drawer_nav{ |
| width:100%; |
| padding:20px; |
| background-color: rgba(0,0,0,0.80); |
| } |
| .drawer_menu{ |
| display: flex; |
| justify-content: space-evenly; |
| margin:0; |
| } |
| .drawer_menu li { |
| list-style: none; |
| text-decoration: none; |
| } |
| .drawer_menu li a { |
| color:white; |
| text-decoration: none; |
| } |
| #video{ |
| background:url('img/Computer.mp4'); |
| vertical-align: bottom; |
| width:100%; |
| height:100%; |
| background-size:cover; |
| } |
| .toggle-btn{ |
| background:url('img/menu_icon.png') |
| } |
| .about_me{ |
| height: 500px; |
| background-color: #B0B0B0; |
| } |
| .portfolio_box{ |
| display:flex; |
| padding:100px; |
| } |
| .portfolio_title h2{ |
| margin:0; |
| font-size:30px; |
| padding-bottom:20px; |
| } |
| .text{ |
| padding-bottom:20px; |
| } |
| .portfolio-right{ |
| text-align:center; |
| } |
| .portfolio-right img{ |
| height:50%; |
| border-radius:55%; |
| } |
| .portfolio-left{ |
| width:50%; |
| text-align: left; |
| } |
| .skills{ |
| background:url('img/skills.jpg'); |
| background-size: cover; |
| height:700px; |
| } |
| .title{ |
| text-align: center; |
| font-size:30px; |
| font:'Times Roman News','serif','Times'; |
| padding:30px; |
| font-weight:700; |
| } |
| .skill_box{ |
| display:flex; |
| text-align:center; |
| justify-content: space-between; |
| margin:30px; |
| } |
| .skill-item{ |
| flex:none; |
| } |
| .skill_photo1{ |
| max-width:50%; |
| height:auto; |
| } |
| .skill_photo2{ |
| max-width:100%; |
| height:auto; |
| } |
| .skill_photo3{ |
| max-width:50%; |
| height:auto; |
| } |
| .skill_photo4{ |
| max-width:90%; |
| height:auto; |
| } |
| .skill_photo5{ |
| max-width:25%; |
| height:auto; |
| } |
| ``` |
