実現したいこと
発生している問題・分からないこと
SERVICE部分の画像を配置させるとheaderの配置も崩れてしまいます
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>株式会社LiNew</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7</head> 8<body> 9 <div class="logo-icon"> 10 <img src="images/logo_icon.png" alt="logo_icon" style="width: 40px; height: 40px;"> 11 </div> 12 <div class="logo-name"> 13 <img src="images/logo_name.png" alt="logo_name" style="width: 90px; height: 30px;"> 14 </div> 15 16 <header> 17 <a></a> 18 <a class="VISION">VISION</a> 19 <a class="SERVICE">SERVICE</a> 20 <a class="COMPANY">COMPANY</a> 21 <a></a> 22 </header> 23 24 25 <h1>VISION</h1> 26 <p>・ 私たちは情熱を、持ってあらゆるニーズに対応していきます。</p> 27 <p>・ 努力を怠らない事によりやりたいことを追及し続けます。</p> 28 <p>・ 最大限のパフォーマンスを発揮し効果を出し続け相乗効果を生み出し続けます。</p> 29 30 31 <h2 class="images-container">SERVICE</h2> 32 <diV class="SERVICE"> 33 <div class="dev"> 34 <img src="images/system_development.jpg" alt="system_development"> 35 </div> 36 <div class="out"> 37 <img src="images/outsourcing.jpg" alt="outsourcing"> 38 </div> 39 <div class="recruit"> 40 <img src="images/recruit.jpg" alt="recruit"> 41 </div> 42 </diV> 43 44</body> 45</html>
CSS
1head{2 background-color: #eaeaea;3 width: 980px;4}5 6.logo-icon{7 position: relative;8 left: 300px;9}10 11.logo-name{12 position: absolute;13 top: 5px;14 left: 340px;15}16 17header {18 display: grid;19 grid-template-columns: repeat(5, 1fr); 20 background-color: #279b8f;21}22 23a {24 border: 1px solid;25 text-align: center;26 color: white;27 width: 100%;28}29 30 31h1{32 color: white;33 width: 630px;34 height: 30px;35 background-color: #279b8f;36 display: flex; 37 align-items: center;38 margin-top: 20px;39 margin-left: 280px; 40 padding-left: 20px;41 font-weight: bold;42}43 44p{45 margin-left: 300px; 46}47 48h2{49 color: white;50 width: 630px;51 height: 30px;52 background-color: #279b8f;53 display: flex; 54 align-items: center;55 margin-top: 30px;56 margin-left: 300px; 57 padding-left: 20px;58 font-weight: bold;59}60 61.SERVICE {62 display: flex;63 flex-wrap: wrap;64 margin-top: 20px; /* ヘッダーとの位置を合わせる */65 padding-left: 280px; /* ヘッダーとの位置を合わせる */66}67 68.SERVICE div {69 width: calc(33.33% - 90px); /* 画像の横幅に余分な5pxのマージンを除外 */70 padding: 0 10px; /* 左右に5pxの余白を追加 */71 box-sizing: border-box; 72}
試したこと・調べたこと
上記の詳細・結果
flexboxやgridを使って見たのですがheaderの部分の配置も崩れてしまいます
補足
このようになってしまいます
0 コメント