自己学習60時間【シングルカラム】作成レビュー!!
本日はWEB業界未経験の筆者がWebサイトの作成について触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はシングルカラムページを作成していきます！
【シングルカラムページの作成】
- HTML/見出しとプロフィール
- 経歴セクション
- CSS/メインビジュアルの設定
シングルカラムのメリット
・スマートフォンの表示で親和性が高い
・小さい画面でもみやすい
シングルカラムのデメリット
・情報量が多いと整理し辛い
まずはH T M Lを書いていきます。
HTML/見出しとプロフィール
<div id="wrap">
<div class="content">
<div class="main-center">
<h1>About</h1>
<p>ののくんのプロフィール</p>
Section要素を配置し、class属性名前をつける＆クラス名を追加する
<div id="wrap">
<div class="content">
<div class="main-center">
<h1>About</h1>
<p>ののくんのプロフィール</p>
<section class="main-profile clearfix">
<div class="profile-txt">
プロフィール分のエリアを作成する
<div class="profile-txt">
セクション内のテキストをマークアップする
<h2 class="icon">Profile</h2>
<p><span>ののくん</span><br>
アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラマンとしてのスタイルを確率する。2018年に帰国しフリーランスとして活動。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
</div>
太文字にする為の印をつける
<p><span>ののくんのプロフィール</span></p>
画像を配置する
<img src="images/about-profile2.png" alt="ののくんプロフィール画像"
class="profile-image">
※画像にclass属性で名前をつける。
経歴セクション
表組みを作成
<section class="career">
<h2 class="icon">Career and Job history</h2>
<table>
<tr>
<th>1994年3月</th>
<td>もももも芸術大学写真科 卒業 のののの写真研究所に入社</td>
</tr>
<tr>
<th>2002年3月</th>
<td>のののの写真研究所を退職し渡米、世界各国を放浪しながら撮影を続ける</td>
</tr>
<tr>
<th>2012年8月</th>
<td>イタリア・ミラノで開催されたコンクールにて、審査員特別賞受賞</td>
</tr>
<tr>
<th>2016年1月</th>
<td>帰国しフリーランスとして活動</td>
</tr>
<tr>
<th>2016年4月</th>
<td>愛知ミュージアムにて初の写真展を開催</td>
</tr>
</table>
</section>
</div>
</div>
</div>
HTMLのみの完成品はこちら
CSS/メインビジュアルの設定
背景画像を設定する
#about {
background-image: url(../images/bg-about.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
背景画像の大きさを調整する
このままでは「フルスクリーンページ」になってしまうので、サイズの調整を行なっていきます。領域に収まるように表示する。Background-sizeプロパティの値を「100％auto」に設定します。
#about {
background-image: url(../images/bg-about.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
背景画像の表示位置を調整する
先ほどのコードで横幅は合いましたので
上下も合わせていきます。
#about {
background-image: url(../images/bg-about.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
コンテンツエリアのスタイル設定をする
コンテンツエリアの背景を白くする
#wrap {
clear: both;
background-color: #ffffff; →これが白色の指定
margin-top: 220px;
padding: 35px 0;
}
コンテンツエリアの上部、内側に余白を設定する。
#wrap {
clear: both;
background-color: #ffffff; →これが白色の指定
margin-top: 220px;
padding: 35px 0;
}
メインエリアの幅を指定する
.main-center {
width: 940px;
margin: 0 auto;
}
見出しを装飾する
レイアウトの大枠が完成したので
メインエリア内の装飾を行なっていきます。
大見出しのスタイルを指定する
シンプルなデザインに仕上げていきます。
Border-bottomプロパティで見出しの下部に線を引きます。
h1 {
font-family: 'Bitter', serif;
font-size: 36px;
border-bottom: 1px solid #cccccc;
}
中見出しのスタイルを指定する
大見出しの「h１」装飾が終わったので、中見出しの「h２」装飾を行なっていきます 。
h2 {
font-family: 'Bitter', serif;
font-size: 24px;
}
中見出しの飾りの設定
.icon:before {
content: "";
padding-right: 10px;
border-left: 7px solid #9cb4a4;
}
プロフィールセクションのレイアウトを作成する
テキストの幅、位置を指定する
#about .profile-txt {
width: 540px;
float: left;
}
テキストの一部を太字にする
#about .profile-txt span {
font-weight: bold;
}
プロフィール画像の位置を指定する
#about .profile-image {
float: right;
}
経歴セクションのレイアウト調整
clearfixで回り込みを解除する
先ほど使用したfloatにより、レイアウトが崩れているので、空のボックスを生成し綺麗にレイアウトする。
.clearfix:after {
content: "";
display: block;
clear: both;
}
セクション間の余白を調整する
section {
margin-bottom: 35px;
}
表を装飾する
見出しセルの横幅、上下幅、背景色を指定する
#about .career th {
width: 240px;
background-color: #f0f0f0;
padding: 12px 0;
border: 1px solid #cccccc;
}
見出しセルの罫線を装飾する
#about .career th {
width: 240px;
background-color: #f0f0f0;
padding: 12px 0;
border: 1px solid #cccccc;
}
データセルの横幅、上下幅を指定する。
#about .career td {
width: 660px;
padding: 12px 0 12px 40px;
border: 1px solid #cccccc;
}
罫線の表示方法を指定する
table {
border-spacing: 0;
border-collapse: collapse;
}
フッターの背景色を変更する
#index #wrap {
background-color: transparent;
margin-top: 0;
padding: 0;
}
以上でシングルカラムページの作成は終了です。
完成するとこうなります。
最後にH T M LとC S Sを載せておきます。
初めての方は、テキストエディタにコピペしてみましょう！それだけで感動ものですよ！なぜならば、私もそうだったからです。
オススメのテキストエディタ
私は「brackets」を使用しています！ぶらけっつと呼称しています。
Adobeからリリースされているテキストエディタで、英語が苦手な方でも、GoogleChromeの翻訳機能を使えばインストールまで簡単に行えますよ！
モノづくりは本当に楽しいですね。
Twitterでも情報配信しています！
未経験からW E Bデザイナー/ディレクターを目指している人は
私をフォローして下さい。
有益な情報をお届けします。
