実現したいこと
下記画像のようなホームページを作成したいです。
発生している問題・分からないこと
現在、下記のようにコードを入力しているのですが、
レイアウト、画像共に上手く加わりません。
大まかで構わないので、どのようにレイアウトしたら、画像のようなイメージになるのか、ご教授いただきたいです。
該当のソースコード
html
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title></title>6 <link rel="stylesheet" type="text/css" href="base.css">7</head>8<body>9 <header>10 <div-class="logo"><img src="logo_name.ing"></div-class>11 <nav>12 <ul>13 <li><a href="#vision">VISION</a></li>14 <li><a href="#service">SERVICE</a></li>15 <li><a href="#company">COMPANY</a></li>16 </ul>17 </nav>18</header>19 20<main>21 <section id="vision">22 <h2>VISION</h2>23 <ul>24 <li>私たちは情報を持ってあらゆるニーズに対応していきます。</li>25 <li>努力を怠らない事によりやりたいことを追求し続けます。</li>26 <li>最大限のパフォーマンスを発揮し効果を出し続け特異な効果を生み出します。</li>27 </ul>28 </section>29 30 <section id="service">31 <h2>SERVICE</h2>32 <div class="services">33 <div class="service-item">34 <img src="3_2/images/outsourcing.jpg" >35 <p>あらゆる要望を踏まえおいてプロフェッショナル集団が最終的な環境変化に対応。</p>36 </div>37 <div class="service-item">38 <img src="service2.jpg" alt="Service 2">39 <p>JavaやPHP、オープン系開発からネイティブアプリ、デザインやWebディレクションなど、幅広い領域に対応しております。</p>40 </div>41 <div class="service-item">42 <img src="service3.jpg" alt="Service 3">43 <p>専門分野に特化したエージェントがお仕事をご紹介します。</p>44 </div>45 </div>46 </section>47 48 <section id="company">49 <h2>COMPANY</h2>50 <p>会社名 株式会社LiNew</p>51 <p>代表 西本弘昌</p>52 <p>資本金 500万円</p>53 <p>本社住所 東京都港区芝2-27-13芝尾島ビル3F</p>54 </section>55</main>56<footer>57 <p>Copyright © 2020 LiNew Inc. All Rights Reserved.</p>58</footer>59 60</div>61</body>62</html>63
css
1body {2 font-family: Arial, sans-serif;3 margin: 0;4 padding: 0;5 background-color: #f2f2f2;6}7 8header {9 background-color: #279b8f;10 color: white;11 padding: 10px 0;12 display: flex;13 justify-content: space-between;14 align-items: center;15}16 17header .logo {18 font-size: 24px;19 margin-left: 20px;20}21 22header nav ul {23 list-style: none;24 display: flex;25 margin-right: 20px;26}27 28header nav ul li {29 margin: 0 15px;30}31 32header nav ul li a {33 color: white;34 text-decoration: none;35 font-weight: bold;36}37 38main {39 padding: 20px;40 max-width: 1200px;41 margin: auto;42}43 44section {45 margin-bottom: 40px;46 }47 48section h2 {49 background-color: #004d4d;50 color: white;51 padding: 10px;52 margin-bottom: 20px;53}54 55#vision ul {56 list-style: none;57 padding-left: 0;58}59 60#vision ul li {61 background-color: white;62 padding: 10px;63 margin-bottom: 10px;64 border-left: 5px solid #004d4d;65}66 67.services {68 display: flex;69 justify-content: space-between;70}71 72.service-item {73 background-color: white;74 padding: 10px;75 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);76 width: 30%;77}78 79.service-item img {80 width: 100%;81 height: auto;82}83 84#company {85 background-color: white;86 padding: 20px;87 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);88}89 90footer {91 background-color: #004d4d;92 color: white;93 text-align: center;94 padding: 10px 0;95 position: relative;96 width: 100%;97 bottom: 0;98}
試したこと・調べたこと
上記の詳細・結果
chromeでレイアウト、画像挿入について調べ、いくつかのコードを試しました。
gridを用いて、やってみたりしたのですが、なかなかイメージしているレイアウトになりません。
補足
0 コメント