https://u-d-l.jp/
サイト制作の練習をしている初心者プログラマーです。
上記のサイトのServiceの部分を練習で作っているのですが、
コードはこちらです。
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <section id="sevice"> <h1 class="ttl">Service</h1> <section> <h2 class="ttl">ディレクション</h2> <p class="ttl">DIRECTION</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service01.jpg"> </p> <p class="text01">お客様の要望をヒアリングし、現状の問題点を洗い出し、効果的なプランを作成いたします。 制作ではデザインに入る前の事前の準備が特に重要になります。何が必要で何が必要でないのかを判断し、費用対効果の高いWebサイトを作るための土台を作ります。</p> </section> <section> <h2 class="ttl">デザイン</h2> <p class="ttl">DESIGN</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service02.jpg"> </p> <p class="text01">ヒアリングに基づいたプランに沿って、デザインを作成いたします。 人の使うものであることを常に意識して、使う人が迷わない、目的を達成できるデザインを心がけています。 インターフェースの重要性が増す中でデザインの役割を理解し、そのプランに最適な提案をさせていただきます。</p> </section> <section class="last"> <h2 class="ttl">コーディング</h2> <p class="ttl">CODING</p> <p class="icon"> <img src="https://u-d-l.jp/wp-content/themes/underline/images/icon_service03.jpg"> </p> <p class="text01">デザインの意図を理解し、動きや効果を適切に使用することでWebサイトの仕上がりは大きく変わります。 スマートフォンサイト、ワードプレスを使用した更新性の高いサイト、Javascriptを使用した動きのあるサイトなど、様々なサイトのコーディングを行っております。</p> </div> </section> </section> </div> </body> </html> コード
CSS
sevice{ width:920px; margin:0 auto 130px auto; padding:0; } #sevice section{ float:left; width:280px; height:auto; margin-right:40px; margin-bottom:40px; } #sevice section .last{ padding:0; margin:0; } #main h1.ttl{ margin-bottom: 65px; text-align: center; line-height: 1.0; font-family: 'Lato', sans-serif; font-weight: 100; font-size: 50px; letter-spacing: 0.05em; } #main h2.ttl{ margin-bottom:12px; text-align:center; line-height:1.0; font-size:25px; color:#505050; } #main p.ttl{ margin-bottom: 20px; text-align: center; line-height: 1.0; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.1em; color: #a5a5a5; } .icon{ margin-bottom:20px; text-align:center; } #sevice section .icon img{ width: 49px; height: 51px; } .text01{ margin:0; padding:0; border:0; outline:0; font-size:14px; font-weight:normal; } コード
回答1件
あなたの回答
tips
プレビュー