【デザイナーがMacを選ぶ理由】筆者がMacBookの良さを伝えます。
このブログを見てるということは、
①P Cの購入、買い替えを検討している。
②Macに興味がある
どちらかと思います。
この記事を読んで、M A Cの良さが伝わればいいと思います。
ここで私がお勧めするのはあくまでも「ノートP C」です。
デスクトップタイプのiMacに関しては触れません。
ご了承下さい。
- 《すでにアップル製品を持っている人》
- 《メインソフトがAdobe製品の人》
- 《クリエイティブな作業が多い》
- 《Office softは使わない》
- 《予算確保はOK！》
- 《その他》
- 筆者がお勧めする「MAC」以外の選択肢
【MACを買うべき人】
まず、あなたのライフスタイルにMacが合っているか確認をしていきます。
以下に複数の質問を記載しますので、◯×を付けてください。
◼︎すでにアップル製品を持っている人
iPhone、iPad、Apple Watch、AirPodsなど
◼︎メインソフトがAdobe製品である
◼︎クリエイティブな作業が多い
音楽やイラスト、動画編集など
◼︎Office Softは使わない。
Excel、word、PowerPointなど
◼︎予算確保はOK！
最安値でも10万前後です。
高いもので5,60万まで跳ね上がります。
全てに◯がついた人
→今すぐApple StoreへGO！
３つ以上◯がついた人
→この後の記事を読んで判断しましょう。
１つ以下だった人
→あまりお勧めできないかもしれません…。
この後の記事を読んで判断しましょう。
《すでにアップル製品を持っている人》
→iPhone、iPad、Apple Watchを持っていれば連携がスムーズで機能を最大限使える。
AirDropにて資料の共有やiCloudによるデータのやり取り。
Apple Watchを装着しているとMACのPASS入力が免除される。(スリープ復帰時)
iPhoneで開いていたサイトをPCで開くなど。
また10月にアップデートされた最新O S「 Catalina」ではSidecar機能を実装
作業が捗りますのでおすすめです！
《メインソフトがAdobe製品の人》
デザイナー関係のお仕事をされている方
イラストレーターやグラフィックデザイナーには強くお勧めします。
まず、グラフィックやフォント(既存)が綺麗
現行のRetina搭載モデルはびっくりするほど綺麗。（詳しい技術は割愛します）
他のノートPCを購入する場合、別途グラフィックボードを購入しないとダメな場合もあります。
また、もともとAdobe製品はMAC特化製品であり相性が良いそうです。
※Photoshopを同スペックのMacBook＆H P製品で動作させたことがありますが、圧倒的にMacBookの方が操作性、処理速度が早いです。
《クリエイティブな作業が多い》
もともと、Macのターゲットはビジネスマンではなく、一般消費者やクリエーターでした。
遊び心満載のMac製品で感性を磨きましょう。
音楽制作や動画制作は初期アプリで十分にできますし、有料アプリを購入すればさらにハイレベルなことができるようになります。
また、トラックパッド (マウスの代わりに操作出来る領域)の操作は「感覚」で覚えて操作することが可能です。
デスクトップ型のiMacの人でも後付け「トラックパッド 」をつける人もいるくらいです。
《Office softは使わない》
これは購入後に私も後悔したのですが、オフィスソフトとの相性はよくないです。
もともとクリエイティブに特化した製品なので仕方ないですね。
筆者は後からオフィスソフトを入れましたが、使い辛い…。
特にエクセル…。
Office softがメインになる方は慎重に検討しましょう。
オフィスソフトは現在、サブスプリクションサービスで使用可能です！
詳細は下の記事を読んでみて下さい！
《予算確保はOK！》
はっきり言います。
Mac製品は高いです。
他社の同スペックP Cなら半額くらいで購入可能です。
しかし、見るべきはスペックだけではなく
「保証などのサポート」
「操作性」
「耐久性」
「アクセサリとの親和性」
そして何より
「ブランド」ですね。
《その他》
最後にMacBookの便利な点をまとめます。
アプリ、デスクトップの切り替えが超速！
カスタマイズする事でキーボードショートカットの割り当ても可能に！
【立ち上げ速度】
スリープからの復帰が早すぎる。
Apple WatchがあればP A S S入力なし！
ほとんど電源を切らないので便利で、立ち上げていたアプリもそのまま起動。
【バックアップが便利】
初期搭載アプリのTimeMachineで簡単にバックアップが作成できる。
※別途外付けSSDやHDDが必要
【スタイリッシュでかっこいい】
これに尽きる気がする 。
洗練されたプロダクトデザインは最早アートですね。
《まとめ》
◼︎MACを購入した方がいい理由
すでにアップル製品を持っている人
メインソフトがAdobe製品の人
クリエイティブな作業が多い人
Office softは使わない人
予算確保OK！
筆者がお勧めする「MAC」以外の選択肢
自己学習８０時間目【レスポンシブデザイン】作成レビュー!!
WEB業界未経験の筆者がWebサイトの作成について触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はレスポンシブデザインを作成していきます！
【レスポンシブデザインの作成】
レスポンシブデザインを使うメリット
スマートフォンの普及に伴い必須デザインとなった。
これまでは複数のファイルを作成していたので工数の短縮。
HTML
HTMLを記載していきますが、前回まで使用したHTMLを流用していきます。
viewportを記述する
Viewportとは？
表示領域を設定する為に必要な記述
スマートフォンでは文字のサイズや、タップすることを考慮しなければならない。
正しく記述する（meta要素 content属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
表示が切り替わる地点〜ブレイクポイント〜
レスポンシブデザインでは横幅を基準にC S Sを切り替える
様々なサイズがあるので、一概に〇〇pxが良いなどは無いので
ターゲットにより、使い分ける。
今回は600pxで進めてい来ます。
メディアクエリを記述する
C S Sに記述する
@media screen and (max-width:600px) {
/* 画面サイズが600px以下の場合に適用 */
C S S
ブラウザでの表示確認
デベロッパツールを起動する
Google Chrome上で右クリック→検証→スマホ表示→機種選択
様々な端末が表示されますので、試してみましょう。
メディアクエリの中にC S Sを記述する
文字サイズを指定する
今までpx表記をしてきましたが、あえてvw表記をします。
vwとは「vewport width」の略
よってレスポンシブデザインに向いている単位である。
body {
font-size: 3.5vw;
}
見出しサイズを指定する
h1 {
font-size: 7.2vw;
}
h2 {
font-size: 6vw;
}
ヘッダー要素のレイアウト調整
header要素の横幅指定
header {
width: auto;
margin: 0 5%;
}
ロゴの位置調整
.logo {
float: none;
margin-top: 60px;
text-align: center;
}
ナビの位置調整
.global-nav {
float: none;
margin-top: 40px;
text-align: center;
}
.global-nav li {
display: inline;
float: none;
margin: 0 8px;
}
メインエリアのレイアウト調整
コンテンツの表示位置や横幅、余白の指定
#wrap {
margin-top: 40px;
padding: 35px 0 0;
}
.content {
width: 100%;
}
.main {
float: none;
width: auto;
margin: 0 5%;
}
画像を調整する
画像の幅調整
h2 img {
max-width: 100%;
}
メインビジュアルを入れ替える
メディアクエリを使うと別の画像を表示させることもできる。
#portfolio {
background-image: url(../images/bg-portfolio-sp.png);
}
サイドバーのレイアウト調整
サイドバーの位置と幅を調整する
.sidebar {
width: auto;
float: none;
margin: 0;
}
表示領域の余白、背景を指定する。
padding: 30px 10% 10px;
background-color: #f7f6f4;
さて！これで完成になります。どのようになったでしょうか？
《プレビュー》
こちらがPC画面表示ですね！
そしてこちらがレスポンシブデザインですね。
画像はiPhone表記です。
《使用した書籍》
では、最後にこの80時間の学習を支えてくれた書籍を紹介します。
約80時間の学習で使用しました。
最後尾にはタグ一覧もあり、長く使えそうです。
HTML＆CSSとWebデザインが１冊できちんと身に付く本
著者：服部雄樹
サンプルコードがある事と、写真が用意されているので
楽にコーディングすることが出来ました。
初めてチャレンジする人にオススメしたいです。
レスポンシブデザインのソースコード
【H T M L】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/stylenon.css" rel="stylesheet">
</head>
<body id="portfolio">
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo2.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
<h1>Portfolio</h1>
<p>これまでに撮影した写真や映像作品を掲載しています。</p>
<section>
<h2><a href="photograph.html"><img src="images/portfolio-photo.png" alt="PHOTOGRAPH"></a></h2>
<p>ののくんは「街-City」「海-Beach」「森-Forest」の3つの場所で、様々な角度から「人の気配」を撮影します。人が写っていない写真の中にも確かにそこにある、人の気配を感じとっていただけると嬉しいです。<a href="photograph.html">詳しくみる ≫</a></p>
</section>
<section>
<h2><a href="video.html" ><img src="images/portfolio-vide.png" alt="VIDEO"></a></h2>
<p>ののくんは映像作品も撮影しております。ドローンでの空撮やアクションカメラを使用した、屋外でのダイナミックな映像を得意としています。またショートフィルムを映画祭などで上映することもあります。<a href="video.html">詳しくみる ≫</a></p>
</section>
</div>
<aside class="sidebar">
<section>
<h2>Photograph</h2>
<ul>
<li><a href="photograph.html#city">街-City</a></li>
<li><a href="photograph.html#beach">海-Beach</a></li>
<li><a href="photograph.html#forest">森-Forest</a></li>
</ul>
</section>
<section>
<h2>Video</h2>
<ul>
<li><a href="video.html#movie">Movie</a></li>
<li><a href="video.html#short-film">Short film</a></li>
</ul>
</section>
</aside>
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
【C S S】
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align:bottom;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a:visited {
color: #788d98;
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
}
.global-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}
.global-nav li a {
color: #ffffff;
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap {
clear: both;
background-color: #ffffff;
margin-top: 220px;
padding: 35px 0;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
background-color: #767671;
}
footer small {
font-size: 12px;
}
#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
font-family: 'Bitter', serif;
margin-bottom: 50px;
border: none;
}
#index .content {
margin-top: 150px;
}
#index p {
font-size: 16px;
color: #ffffff;
}
.btn a {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
font-family: 'Bitter', serif;
width: 185px;
display: block;
text-align: center;
line-height: 50px;
margin-top: 20px;
border-radius: 5px;
border: 3px solid #009cd3;
}
.btn a:hover {
text-decoration: none;
background-color: #ffffff;
color: #009cd3;
}
#index footer {
width: 960px;
margin: 150px auto 0 auto;
text-align: left;
background-color: transparent;
}
#index {
background-image: url(../images/bg-index.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#about {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main-center {
width: 940px;
margin: 0 auto;
}
h1 {
font-family: 'Bitter', serif;
font-size: 36px;
border-bottom: 1px solid #cccccc;
}
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: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 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;
}
#portfolio {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main {
width: 700px;
margin: 0 10px;
float: left;
}
.sidebar {
width: 200px;
margin: 0 10px 0 30px;
float: right;
font-family: 'Bitter', serif;
}
a img:hover {
opacity: 0.8;
}
.sidebar h2 {
margin-bottom: 10px;
}
.sidebar ul {
font-size: 16px;
margin-left: 20px;
}
.sidebar ul a {
color: #333333;
}
#photograph {
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#photograph .photograph-list li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
}
#photograph .photograph-list li:nth-child(3n) {
margin-right: 0;
}
#video {
background-image: url(../images/bg-video.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#contact {
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#contact .access table {
float: left;
}
#contact .access th,
#contact .access td {
text-align: left;
vertical-align: top;
line-height: 2.5;
}
#contact .access td {
padding-left: 30px;
}
#contact .access iframe {
width: 460px;
float: right;
}
#contact .form {
background-color: #eaeaea;
padding: 30px 50px;
}
#contact .form dl dt {
width: 165px;
padding: 10px 0;
float: left;
clear: both;
}
#contact .form dl dd {
padding: 10px 0;
}
#contact .form .name {
width: 240px;
height: 30px;
}
#contact .form .email {
width: 300px;
height: 30px;
}
#contact .form .tel {
width: 240px;
height: 30px;
}
#contact .form .type {
width: 180px;
height: 30px;
}
#contact .form .message {
width: 660px;
height: 150px;
}
#contact .form button {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
width: 120px;
display: block;
text-align: center;
line-height: 50px;
border-radius: 5px;
border: 3px solid #009cd3;
margin-left: 165px;
}
#contact .form button:hover {
background-color: #ffffff;
color: #009cd3;
cursor: pointer;
}
#contact .form .required:after {
content: "*";
color: #ff0000;
}
#contact .form .attention {
margin: 20px 0 0 165px;
}
@media screen and (max-width:600px) {
/* 画面サイズが600px以下の場合に適用 */
body {
font-size: 3.5vw;
}
h1 {
font-size: 7.2vw;
}
h2 {
font-size: 6vw;
}
header {
width: auto;
margin: 0 5%;
}
.logo {
float: none;
margin-top: 60px;
text-align: center;
}
.global-nav {
float: none;
margin-top: 40px;
text-align: center;
}
.global-nav li {
display: inline;
float: none;
margin: 0 8px;
}
#wrap {
margin-top: 40px;
padding: 35px 0 0;
}
.content {
width: 100%;
}
.main {
float: none;
width: auto;
margin: 0 5%;
}
h2 img {
max-width: 100%;
}
#portfolio {
background-image: url(../images/bg-portfolio-sp.png);
}
.sidebar {
width: auto;
float: none;
margin: 0;
padding: 30px 10% 10px;
background-color: #f7f6f4;
}
}
自己学習70時間目【グリッドレイアウト】作成レビュー!!
WEB業界未経験の筆者がWebサイトの作成について触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はグリッドレイアウト！
【グリッドレイアウトの作成 】
【グリッドレイアウト】
「学べるHTML」
ページ内リンク
Ul,li要素によるフォトギャラリー
「学べるC S Sとレイアウト」
Li要素floatを使ったグリッドレイアウト
擬似クラス「：nth-child」
グリッドレイアウトを使うメリット
格子状のレイアウトで、綺麗で見やすい
近年スマートフォンでの閲覧がメインになる中で人気のあるレイアウト
レイアウトの応用が効くので様々なレイアウトが可能
コンテンツエリアの作成
コンテンツエリアを２つにわける
コンテンツエリアをメインエリアとサイドバーの２つに分けます。
<!-- wrap始まり -->
<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
</div>
<aside class="sidebar">
</div>
</div>
サイドバーを作成する
<aside class="sidebar">
<section>
<h2>Photograph</h2>
<ul>
<li><a href="photograph.html#city">街-City</a></li>
<li><a href="photograph.html#beach">海-Beach</a></li>
<li><a href="photograph.html#forest">森-Forest</a></li>
</ul>
</section>
<section>
<h2>Video</h2>
<ul>
<li><a href="video.html#movie">Movie</a></li>
<li><a href="video.html#short-film">Short film</a></li>
</ul>
</section>
</aside>
メインコンテンツを作成する
見出しとリード文を入力する
<div class="main">
<h1>Photograph</h1>
<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>
</div>
一つ目のセクションと見出しを作成する
section要素で１つ目のセクションを作る。
このsection要素にはid属性で「city」という名前をつけておきます。
後ほどページ内リンクの目印となります。
<div class="main">
<h1>Photograph</h1>
<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>
<section id="city">
<h2 class="icon">City</h2>
</section>
</div>
一つ目のセクションの画像ギャラリーを作成する
<section id="city">
<h2 class="icon">City</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-city-1.png" alt="street"></li>
<li><img src="images/photograph-city-2.png" alt=" cafe"></li>
<li><img src="images/photograph-city-3.png" alt=" skate"></li>
<li><img src="images/photograph-city-4.png" alt="cat"></li>
<li><img src="images/photograph-city-5.png" alt="streetmusic"></li>
<li><img src="images/photograph-city-6.png" alt=" classiccar"></li>
</ul>
</section>
alt属性で画像の内容を記述する
Img要素にはalt属性必須なので各画像の内容を記載します。
<section id="city">
<h2 class="icon">City</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-city-1.png" alt="street"></li>
<li><img src="images/photograph-city-2.png" alt=" cafe"></li>
<li><img src="images/photograph-city-3.png" alt=" skate"></li>
<li><img src="images/photograph-city-4.png" alt="cat"></li>
<li><img src="images/photograph-city-5.png" alt="streetmusic"></li>
<li><img src="images/photograph-city-6.png" alt=" classiccar"></li>
</ul>
</section>
２つ目のセクションを作成する
<section id="beach">
<h2 class="icon">Beach</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-beach-1.png" alt="hammock"></li>
<li><img src="images/photograph-beach-2.png" alt="sunset"></li>
<li><img src="images/photograph-beach-3.png" alt="weve"></li>
<li><img src="images/photograph-beach-4.png" alt="gal"></li>
<li><img src="images/photograph-beach-5.png" alt="yacht"></li>
<li><img src="images/photograph-beach-6.png" alt="beach"></li>
</ul>
</section>
３つ目のセクションを作成する
<section id="forest">
<h2 class="icon">Forest</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-forest-1.png" alt="forest"></li>
<li><img src="images/photograph-forest-2.png" alt="fire"></li>
<li><img src="images/photograph-forest-3.png" alt="canp"></li>
<li><img src="images/photograph-forest-4.png" alt="cap"></li>
<li><img src="images/photograph-forest-5.png" alt="night"></li>
<li><img src="images/photograph-forest-6.png" alt="bench"></li>
</ul>
</section>
HTMLのみで出来たページはこんな感じです。
続いてCSSに入っていきます。
メインビジュアルを設定する
画像はフリー素材です。
無料サイトも数多くあるので、探してみましょう！
オススメのWebサイト
背景画像を設定する
前回作成したシングルカラムページと同じですね。
画像だけ差し替えます。
nonpnp.hateblo.jp#photograph {
background-image: url(../images/bg-photograph.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
画像ギャラリーを作成する
画像を左寄せレイアウトする
画像を横並びにするにはfloatプロパティを使用します。
また、li要素の行頭に表示されるアイコンを消す為
「list-style: none;」を使用します。
#photograph .photograph-list li {
float: left;
list-style: none;
画像に余白を設定する
#photograph .photograph-list li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
擬似クラスで右の画像の余白をなくす
擬似クラスとは特定の条件に当てはまる要素を指定することができる。
３の倍数の要素だけmargin-rightをゼロにする
#photograph .photograph-list li:nth-child(3n) {
margin-right: 0;
簡単に終わりましたね！
完成画像がこちら！
最後にHTMLとCSSも記載しておきます。
【ソースコードHTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body id="photograph">
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo2.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
<h1>Photograph</h1>
<p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>
<section id="city">
<h2 class="icon">City</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-city-1.png" alt="street"></li>
<li><img src="images/photograph-city-2.png" alt=" cafe"></li>
<li><img src="images/photograph-city-3.png" alt=" skate"></li>
<li><img src="images/photograph-city-4.png" alt="cat"></li>
<li><img src="images/photograph-city-5.png" alt="streetmusic"></li>
<li><img src="images/photograph-city-6.png" alt=" classiccar"></li>
</ul>
</section>
<section id="beach">
<h2 class="icon">Beach</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-beach-1.png" alt="hammock"></li>
<li><img src="images/photograph-beach-2.png" alt="sunset"></li>
<li><img src="images/photograph-beach-3.png" alt="weve"></li>
<li><img src="images/photograph-beach-4.png" alt="gal"></li>
<li><img src="images/photograph-beach-5.png" alt="yacht"></li>
<li><img src="images/photograph-beach-6.png" alt="beach"></li>
</ul>
</section>
<section id="forest">
<h2 class="icon">Forest</h2>
<ul class="clearfix photograph-list">
<li><img src="images/photograph-forest-1.png" alt="forest"></li>
<li><img src="images/photograph-forest-2.png" alt="fire"></li>
<li><img src="images/photograph-forest-3.png" alt="canp"></li>
<li><img src="images/photograph-forest-4.png" alt="cap"></li>
<li><img src="images/photograph-forest-5.png" alt="night"></li>
<li><img src="images/photograph-forest-6.png" alt="bench"></li>
</ul>
</section>
</div>
<aside class="sidebar">
<section>
<h2>Photograph</h2>
<ul>
<li><a href="photograph.html#city">街-City</a></li>
<li><a href="photograph.html#beach">海-Beach</a></li>
<li><a href="photograph.html#forest">森-Forest</a></li>
</ul>
</section>
<section>
<h2>Video</h2>
<ul>
<li><a href="video.html#movie">Movie</a></li>
<li><a href="video.html#short-film">Short film</a></li>
</ul>
</section>
</aside>
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)1988 nonokun-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
【ソースコードCSS】
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align:bottom;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a:visited {
color: #788d98;
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
}
.global-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}
.global-nav li a {
color: #ffffff;
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap {
clear: both;
background-color: #ffffff;
margin-top: 220px;
padding: 35px 0;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
background-color: #767671;
}
footer small {
font-size: 12px;
}
#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
font-family: 'Bitter', serif;
margin-bottom: 50px;
border: none;
}
#index .content {
margin-top: 150px;
}
#index p {
font-size: 16px;
color: #ffffff;
}
.btn a {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
font-family: 'Bitter', serif;
width: 185px;
display: block;
text-align: center;
line-height: 50px;
margin-top: 20px;
border-radius: 5px;
border: 3px solid #009cd3;
}
.btn a:hover {
text-decoration: none;
background-color: #ffffff;
color: #009cd3;
}
#index footer {
width: 960px;
margin: 150px auto 0 auto;
text-align: left;
background-color: transparent;
}
#index {
background-image: url(../images/bg-index.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#about {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main-center {
width: 940px;
margin: 0 auto;
}
h1 {
font-family: 'Bitter', serif;
font-size: 36px;
border-bottom: 1px solid #cccccc;
}
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: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 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;
}
#portfolio {
background-image: url(../images/bg-portfolio.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main {
width: 700px;
margin: 0 10px;
float: left;
}
.sidebar {
width: 200px;
margin: 0 10px 0 30px;
float: right;
font-family: 'Bitter', serif;
}
a img:hover {
opacity: 0.8;
}
.sidebar h2 {
margin-bottom: 10px;
}
.sidebar ul {
font-size: 16px;
margin-left: 20px;
}
.sidebar ul a {
color: #333333;
}
#photograph {
background-image: url(../images/bg-photograph.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#photograph .photograph-list li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
}
#photograph .photograph-list li:nth-child(3n) {
margin-right: 0;
}
#video {
background-image: url(../images/bg-video.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
自己学習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デザイナー/ディレクターを目指している人は
私をフォローして下さい。
有益な情報をお届けします。
未経験からWeb制作【自己学習方法】
WEB業界未経験である、私の勉強方法について記述します。
これからWEB業界を目指す方の参考になると幸いです。
私の学習カテゴリは大きく分けて４つです。
また、学習方法は全て異なります。
※一部リンクしている物もあります。
HTML/CSS
私は独学での学習を進めています。
入社（2020年1月）までには基礎ができるようにするつもりです。
私が自己学習に使用したものや、先輩からお勧めされた勉強方法をまとめてアウトプットします。
また、個人的な見解ですが「スクール」はあまりお勧めしません。
なぜならば費用が高額だからです。
もちろんスクールのメリットもありますが「自分自身で学習計画を立てて進めていける人」はスクールにいく必要はありません。
※短時間で学びたい人、予算が確保出来ている方はスクールでもOKだと思います！
書籍紹介
書籍は「HTMLとCSS」が記載されているものにしましょう。
参考までに、私が使用したモノや先輩方オススメの書籍のも記載します。
【１冊で全て身に付くHTML＆CSSとWebデザイン入門講座】
◼︎書籍紹介
WebクリエーターボックスというWebサイトの運営者が書いた書籍
サイトはこちら→Webクリエイターボックス
制作した「チートシート」がSNS上で拡散され一躍注目を浴びる。
サンプルサイトは「カフェ」で複数デザインを制作可能
アマゾン内では★4.5と高評価で「低評価コメントが一つもない」書籍です。
【世界一わかりやすいHTML5＆CSSコーディングとサイト制作の教科書】
◼︎書籍紹介
「世界一わかりやすい」とタイトルにつけているだけあって
本質を理解し制作していきたい人にオススメの１冊です。
HTML＆CSSだけでなくWEBサイトの仕組みについても書かれています。
最も推したい点としては「練習問題」が付いている点です。
インプットした事を練習問題にてアウトプットする事ができます。
アマゾン内では★4.6と高評価で「この分野の書籍で最も評価の高い」書籍です。
【スラスラわかるHTML＆CSSのきほん】
◼︎書籍紹介
かわいいイラストや写真でスムーズに学習していく事が可能です。
「本はあまり読まない」「英語とか数字とか苦手」という方にオススメです。
本書はWeb業界の入門書としての窓口を広げていると言えるでしょう。
アマゾン内では★4.3「この分野の書籍で最も評価コメントの多い」書籍です。
【HTML＆CSSとWebデザインが一冊できちんと身につく本】
私が最初に購入し、ブログにてアウトプットをするきっかけになった書籍です。
4つのデザインに加えマップや動画の埋め込みにも対応しており、
制作後はポートフォリオサイトとして使用OKとの事。
アマゾン内では★4.2「販売年数の最も長い」書籍です。
どの書籍も本を読みながらコーディングを行っていき、
必要な画像や答え合わせ等はDLしたファイルに入っている感じですね。
※大体書籍の最初にアドレスが貼ってありそこから素材をDL出来る仕組みになっています。
WEBサイト紹介
書籍に関して前述しましたが「本が苦手」
という方や併用して勉強する人もいると思うので、Web上で学習できるサービスも紹介します。
Progate
オンラインのプログラミング学習サービスです。
HTMLとCSSの初級編は無料で出来ます。
PC版と併用して進めていくのがオススメです！
スマートフォン版：移動中などの予習や復讐にオススメ
PC版：実際にコーディングして覚えるのにオススメ
過去記事で紹介してますので、合わせてご覧下さい。
ドットインストール
動画でのレッスンが出来るサービス
講師が動画で解説をしながら進めてくれます。
実際の講師がつくと緊張してしまいますが、そういったデメリットが無いのも魅力ですね。気になる点は何度も巻き戻して確認する事が出来ます。
こちらも他のサービスと併用していく事で理解を深める事が出来るでしょう。
中級からは有料になるそうですので、初心者の内にサービスを利用しておきましょう！
必要であれば中級以降も利用料を払えば良いだけなので。
（株）baijie公開のWebドリル
BtoB企業の為のWeb制作会社である（株）baijie ベイジさん
がWebサイトで公開した未経験者向けのドリルです。
「未経験者でも１ヶ月で即戦力クラスの知識が身に付く」をキャッチフレーズに無料公開しています。
大盤振る舞いも良いところですが、これによる宣伝効果は大きく、マーケティング能力に優れた素晴らしい人材の多い会社であると言えます。
さて、公開されたドリルですがある程度の知見がアル状態で進めることをオススメします。少し難易度が高いので、書籍を数冊読んでいてProgateなどで実装の学習も済んでいるとより効果的に学習を進める事ができます。
PDF問題と回答の２種類がDL可能で Photoshopの問題もあります。
「無料」ですので絶対にやりましょう！
WEBデザイン
これも書籍とWebサイトで行っています。
実装（HTMLやCSS）ではなく、どちらかというとUI(ユーザーインターフェース)に関わるところでしょうか？
いわゆる「見た目や使いやすさ」ですね。
この見た目通りのサイトに作り上げる為にコーディングが必要です。
書籍紹介
私がWeb業界に未経験でチャレンジするにあたって、先輩たちからオススメされ、購入した書籍を紹介します。
詳しいレビューは過去記事からどうぞ！
【なるほどデザイン】
◼︎書籍紹介
ちょっと間抜けな顔をした少年が印象的な表紙です。
とても有名な書籍ですので、見た事がある方もいるはずです。本書は表紙と中身のギャップの激しい書籍の一つです。笑
どのデザインが良いのか論理的に説明する事が出来ます。
また、本書の特徴ですが「非常に読みやすい」です！
テキスト＜イラスト（写真）となっており、スラスラと読む事が出来ます。
アマゾン内では★4.5「この分野のベストセラー」書籍です。
【けっきょく、よはく。】
◼︎書籍紹介
余白を利用したデザインを学ぶ事が出来ます。
いまいちさんとしゅっと先輩の掛け合いもほっこりしてGOOD！
OKデザインとNGデザインを並べて対比している点が素晴らしくわかりやすいですね。デザイン初心者から上級者までオススメ出来る１冊です。
長いお付き合いが出来る書籍でしょう。
アマゾン内では★4.4「余白に特化した書籍は本書のみ」
【Webデザイン良質見本帳】
◼︎書籍紹介
本書では良質なデザインの「見本」を集めた書籍です。
前半パートではWebデザインの基礎について学ぶ事が出来ます。
後半パートでは良質サイトが４１５点も掲載されていて、目的別からサイトを探す事ができます。「配色」「ジャンル」「業種」など。
アイデアを活性化させる事やクライアントとの打ち合わせでも使用出来る１冊となっています。
アマゾン内では★4.4「２以下の低評価が一つもない」書籍です。
【いちばんよくわかるWebデザインの基本きちんと入門】
◼︎書籍紹介
Webサイトの基本がわかる書籍です。
HTMLやCSS、Webサイトの仕組みについてある程度の知見がある状態で読むと更に深い理解を得られる事ができます。
配色についての記述は助かりました。
入門書籍ではほとんど記載がなかったのでRGBやCMYKなどの基礎を学べました。
アマゾン内では★3.9「HTML＆CSSシリーズもある」書籍です。
WEBサイトで学ぶ
デザイナーさんオススメのインプット用のギャラリーサイト集です。
ブックマークして、時間がある時に見ましょう！
Photoshop操作スキル
サイト作成に必要な画像を作成するのに必要なスキルです。
私も元々はパチンコ点のグラフィックデザインを担当しており、そのスキルも活かせることから、今回WEBデザイナーを目指すことにしました。
もともと操作スキルもあり、自己学習の投資時間は他のカテゴリと比較すると多くはありません。
しかし、今までどのように勉強してきたか？
これからどのように勉強していくかをアウトプットします。
Photoshopのチュートリアル
Photoshop初心者はまず、Adobeのチュートリアルを全て実践しましょう。
動画で解説してくれるので、非常に分かりやすいです。
TwitterではAdobeのクリエーターさんが動画をあげたりしてくれるので、私も見て勉強します。
オススメ書籍
【Photoshop逆引き辞典】
◼︎書籍紹介
本書の最も良く、他の書籍と差別化できている点は
「逆引き出来る事」です。
やりたい事やツール名から操作方法を探す事ができます。
辞書感覚で使う事が出来るので、長い間重宝します。
私も販売日直後に購入し、未だに使用している愛書になります。
アマゾン内では★5.0「最も評価の高い」書籍です。
※評価コメントは１件のみ
【Photoshopしっかり入門】
◼︎書籍紹介
Photoshop入門書として重宝される本書です。
全く触ったことのない初心者さんにオススメの一冊です。
ツールの呼び方から操作方法など、キャプチャ画像を多く使い分かりやすく解説をしています。
サンプル画像をDLして操作を覚えられるのもGOODです！
アマゾン内では★4.3「この分野のベストセラー」書籍です。
動画学習
Udemyの動画学習がオススメです。
残念ながら無料教材はありませんが、格安で！動画で！学ぶ事ができます。
購入後は何度も見れますし、スマートフォンからの閲覧も出来るようです。
クレジットカード決済のみですのでご注意下さい。
ブラインドタッチ
コレが最も苦労した点です。
独自のタイピングをしていたので（いわゆる北斗打ちですね）
それなりに早く打てますが、タイプミスが多いのと入力速度に限界がくると言われたので、練習をはじめました。
練習方法は段階を踏んで２つ実施しました。
インターネットでタイピング練習
様々なアプリがありますが「Mac」では良いアプリがありませんでした…。
Windowsであれば良いアプリがあるはずなので調べてみましょう。
私が使用したのは「Webサイト」です
e-typing
私は上記のサイトを使って練習を初めました。
タッチする指がわかるのと、キーの位置を画面に表示してくれるので矯正にもってこいでした。
ブラインドタッチを習得するには、まずは「タッチタイピング」からですね。
キーボードを見ないで入力する事と「間違えずに入力」することが重要だそうです。
ブログ
しかし、最も有効な練習がこのブログです。
毎日更新で3000文字前後を生産してますので、１ヶ月で90000字前後になりますね。
積み重ねていきます。
新規ブログ参加であればこの「はてなブログ」がオススメです。
詳細は過去記事で確認しましょう！
ブログは非公開設定もできますので「日記」や「メモ」のように使う事も可能です。無料で使えるツールを自己学習の為に是非！使って欲しいところです。
また、はてなブログで集客出来るようになれば有料版やWordPressの開設をして、収益化を目指す事もできます。
まず！はじめてみましょう！
未経験からweb制作【基礎学習とCSS】
本日はWEB業界未経験の筆者がHTMLについて触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。
- 【C S Sの基本知識】
- H T M Lファイルとリンクさせる
- レイアウトの詳細を記述する
- ソースコード
- 自己学習に使用した教材
【C S Sの基本知識】
見た目をデザインするC S S
H T M L文書のレイアウトや装飾など見た目を指定する為の言語でH T M Lと組み合わせて使用します。
※H T M Lと同じでバージョンがあり、現在は「CSS3」
C S Sの基本文法
C S Sの記述はセレクタ、プロパティ、値の３つで構成されている
こんな感じ→セレクタ{プロパティ:値;}
つまり → どれの{何を:どうするか;} となるようです。
{何を:どうするか;} を「スタイル宣言」と言います。
※半角スペースや改行はスタイルに影響しない為、これらを使用してコードを書くと見やすくなるそうです。(インデント)
一つのセレクタに複数のスタイル宣言をする
文字の{
色を: 赤にする;
太さを: 太字にする;
左側の余白を: 20pxにする;
}
これをコードで書くと‥。
P {
Color: red;
Font-weight: bold
maegin-left: 20px;
}
複数のセレクタに同じスタイル宣言をする
複数のセレクタに対して、同じスタイルを指定することもできる。
例えば見出し１にも適応したい場合にはpタグとh1タグの書くセレクタをカンマ（,）で区切って並べます。
P,h1 {〜〜〜〜〜〜
こんな感じですね。
なるべくまとめて指定した方がいいようです。
なぜなら、ファイルも軽くなり、管理も楽になるからです。
複数のコーダーで管理することなどを考えると「見やすいコード」を書くことも重要ですね。
特定の場所にあるセレクタだけに別の指定をする
C S Sの記述はH T M L文書内の対象となるタグ全てに対して適応される。
しかし、header要素の中にあるp要素だけは別の色にしたい。
このようにある要素の中に内包されている要素の事を親子関係に例えて、上位の要素を「親要素」その中にある要素の事を「子要素」と呼ぶ。
特定の親要素に含まれる子要素だけに指定したい場合、親とこのセレクタの間に半角スペースを挿入します。例えば「header要素の中にあるp要素だけをセレクタにする場合は以下のように入力する。
Header p {
Color:l blue;
}
これで別のセレクタに指定をしていけるわけですね。
テキストを装飾するプロパティ
文字サイズを指定する font-size
→サイズ指定には「px」「％」「em」などがあり、用途によって使い分ける。
文字の太さを指定する font-weight
→値は400を基準として、±100の数値で指定する。
数値以外でもnormal bold などで指定する場合もあります。
行と行の間隔を指定する line-height
→1.5や1.75など文字サイズの倍数を単位を付けずに記述することが一般的。(pxも可能)
行の揃えを指定する text-align
→left center right justify から指定することが出来る
文字の色を指定する color
→色の値は「red」「bule」などのカラー名で指定する場合や、rgb関数、16進数などで使用するなどいくつかある。
rgb関数 color: rgb(255.173.172)
16進数 color: #ffffff
要素の外側の余白サイズを指定する margin
Maginプロパティは隣り合う要素との距離（つまり外側の余白）を指定するコンテンツ
上下左右それぞれ個別に設定できます。
「margin:20px」→上下左右全てに適応される
「margin-top:20px」→T O Pつまり上だけに適応させることが出来る。
※bottom（下） left（左） right（右）もある。
「margin: 10px 5px 5px 10px」→ 上右下左の順で適応される。
要素の内側のサイズを指定する padding
Paddingプロパティは要素の縁から内側の余白を指定する為のもの
基本的な記述はmarginと同じ。
要素の高さと幅のサイズを指定する height/width
前者が「高さ」で後者が「幅」ですね。
高さ：ハイト
幅：ウィドゥス
と読むようですが「width」に関してはたくさん読み方があるようです。
値の単位は通常pxを使用します。
しかし、スマートフォンからのアクセスを考慮すると、レスポンシブ対応のW E Bサイトを作成していく必要があります。
その場合はwidthを％で指定し、端末のサイズに合わせて伸縮するように記述する。
C S Sを記述する場所
C S Sの記述方法は３つあります。
タグのstyle属性に直接記述する
H T M Lタグに直接記述する方法は、スタイルを指定したい要素にstyle属性を追加し、記述する方法です。
特定の要素をピンポイントで指定できるので便利ですね。
style要素内に記述する
H T M L文書のhead要素内にstyle要素を作成し、その中にC S Sを記述する方法
ページ毎に記述する必要がある為、ページ数の多いサイトでは管理しづらい欠点がありますが、手軽にC S Sを使用できます。
外部ファイルに記述する
C S Sファイルを別に用意し、link要素でH T M Lファイルから参照させる方法
W E Bデザインの現場ではこの外部ファイルとして用意するケースが最も多く取られるそうです。
なぜならば、「文書構造はH T M L」「装飾はC S S」と切り分けることによりW E B
ブラウザや検索エンジンに効率良く正確な情報を伝える事ができるからです。
また、製作者やデザイナーが効率良くページを修正、管理する事ができる。
H T M Lファイルとリンクさせる
前回までに作成したH T M LファイルにC S Sのリンクを記載していきます。
CSSを記述する
まず、C S Sの１行目には文字コードを書く
というルールがあるため「@charset "utf-8";」
utf-8で書きますと記載します。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
<link href="css/style.css" rel="stylesheet">
</head>
ベースになるスタイルを選択する
ページの余白を０にする
まず。Body要素のmarginとpaddingを０に指定します。
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
余白サイズはW E Bブラウザの種類によって初期値が異なる事があるので、解除する為にbody要素のmargin とpadding を０に指定します。
ページの背景色を指定する
初期値は「白」ですが今回は薄いグレーにします
背景色の指定にはbackground-colorプロパティを使用し、値は16進数のカラーコード「#cccccc」で指定します。
テキストの色を指定する
全体の基本となる文字色を指定していきます。
Cololrプロパティを使用して濃いグレー(#333333)にします
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
}
テキストサイズと行間を指定する
さらにfont-sizeプロパティで文字サイズを指定
line-highプロパティで行間を指定します
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
ブラウザの既定スタイルを解除する
各ブラウザはデフォルトのスタイルがそれぞれ独自に設定されており、ブラウザによって不要な余白ができてしまったり、余白の大きさが違ったりと、意図しない表示になってしまう事があります。
各部の装飾を始める前に、まずはこのデフォルトスタイルを解除する必要があります。
それによりブラウザ間の表示の差異を無くして、一度まっさらな状態にしてからC S Sを描き始める事ができます、
この作業を「リセットC S S」と呼ばれている。
見出しと段落の上マージンをなくす
h要素とp要素にはデフォルトで上部にマージンが設定されています。
このマージンをmargin-topプロパティで「０」に設定して解除し、スタイリングをしやすくします。
p,h1,h2,h3,h4,h5,h6{
margin-top: 0;
}
画像下部の余白をなくす
<img>タグに対してvertical-alignプロパティをbottomに指定し、画像の縦位置を調整します。
img{
vertical-align: bottom;
}
リスト項目の余白をなくす
ul要素もmargin、paddingともに「０」に設定します。
ul{
margin: 0;
padding: 0;
}
リンクの書式と装飾を設定する
リンクには様々な状態がある
通常のリンク
訪問済みのリンク
マウスポインターを置いたとき
H T M L上でそれらを区別するタグは存在しない。
そこで「擬似クラス」を使用し、要素の特定の状態を指定してスタイルを適用します。
「a:hover」→マウスポインタを置いた状態
「a:visited」→訪問済みのリンク
訪問前、後のリンク文字の色を指定する
通常のリンクは青系「#3583aa」
訪問済みのリンクはグレー「#788d98」に設定する。
リンク文字の下線の表示/非表示を指定する
テキストリンクは初期設定では文字の下に線が入っています。
text-decorationプロパティを使用し、変更していきます。
a {
color: #3583aa;
text-decoration: none;
}
a:visited{
color: #788d98;
}
a:hover {
text-decoration: underline;
}
では、プレビューでBefore＆Afterを確認してみましょう。
《Before》
《After》
レイアウトの詳細を記述する
ヘッダーのスタイルを指定する
ヘッダーのサイズを設定する。
要素の大きさの指定にはwidthとheightプロパティを使用します。
header {
width: 960px;
height: 100px;
}
ヘッダーエリアの位置を設定する
ヘッダーエリアをW E B部ブラウザの中央に表示する指定をします。
中央揃えにはmarginプロパティの上下の余白を０にし、左右には「auto」という値を使用します。
左右に指定する「auto」という値は「ブラウザの幅から要素の幅を引いた値を、左右均等に分配して余白を設ける」という指定です。
ロゴとメニューの位置を指定する
使用するのは「float」
logo {
float: left;
}
global-nav {
float: right;
}
ロゴとメニューの位置を調整する
左右に配置できたらmargin topプロパティで上部の余白を作り、掲載位置を調整します。
logo {
float: left;
margin-top: 50px;
}
global-nav {
float: right;
margin-top: 60px;
}
メニュー項目を横に並べる
リスト形式では縦に並ぶのがデフォルト
横にするにはclass属性「global-nav」と目印をつけたul要素の子要素となるli要素に対して、floatプロパティで左揃えを指定します。
global-bav li {
float: left;
}
メニュー項目の細部を調整する
各項目の左右に余白を作り、文字サイズを大きくします。
global-bav li {
float: left;
margin: 0 20px;
font-size: 20px;
}
メニュー文字の行頭アイコンを非表示にする
リスト化すると自動で「・」がつくが、これを非表示にする。
List-styleプロパティを使用しnoneという値を指定します。
global-bav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
メニュー文字のリンク色を設定する
.global-nav li a {
color: #ffffff;
}
メニュー文字の下線を設定する①
マウスポインタを置いた時にメニュー文字の下に白い線が表示される様に設定します。
要素に境界線を引きたいときはborderプロパティを使用します。
基本は四辺に出る線だが、下部だけ指定する事もできる。
Border-bottomプロパティを使用すればそれが可能です。
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
メニュー文字の下線を設定する②
①で設定した線の間隔が狭くて窮屈なので、余白を指定します。
Padding-bottomプロパティで３pxに設定
また、最初に指定した下線が不要になったので削除します。
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
コンテンツエリアのレイアウトを揃える
floatプロパティを整える
ヘッダー内の各要素に指定したfloatプロパティはそれ以降の要素を回り込ませてしまう為、必要が無ければ解除しておく必要があります。
Header要素の後に続く、id属性で「wrap」と名前のついたdiv要素要素に影響を与えない様にする為、id属性「wrap」に対してclearプロパティを使用します。
#wrap {
clear: both;
}
コンテンツエリアを中央に揃える
content {
width: 960px;
margin: 0 auto;
}
フッターのスタイルを指定する
文字を中央揃えにしてサイズを小さくする
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
}
余白を設定する
padding: 20px 0;
}
コピーライト表記の文字サイズを設定する
footer small {
font-size: 12px;
}
これで、一通り終了です。
C S Sファイルを加えてどの様に変化したか見てみましょう。
【Before】
【After】
CSSの反映されたサイト
基礎学習はここまでとします。
以降は様々なレイアウトのWEBサイトを作成し、共有していきます。
ソースコード
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap">
<div class="content">
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap">
<div class="content">
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
【CSS】
charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align:bottom;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a:visited {
color: #788d98;
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
}
.global-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}
.global-nav li a {
color: #ffffff;
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap {
clear: both;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
}
footer small {
font-size: 12px;
}
自己学習に使用した教材
アップル信者の【iPadOS徹底解析!!】Mac Fan 12月号考察
みなさんこんばんは！
ののくんです。
本日は、番外編です！
私の愛読書である「Mac Fan12月号」について考察を記述していきます。
Apple信者でありますが、Apple歴は決して長くありません。
拙い言葉にはなるかと思いますが、お付き合いください。
あとはサードパーティ製品を併用しております。
年末にはApple Watch、AirPodsも入手したい所です。
それでは本題ですが、本書の12月号特集は３つです。
- iPadOS 徹底攻略ガイド
- iPhone11 カメラだけで買いな理由
- iOS13 の裏技
それでは、上記３点に焦点を絞って解説と考察を進めていきます。
①iPadOS 徹底攻略ガイド
見出しは「今、iPadを選ぶ10の理由」
では、10の理由とは何か？記載していきます。
- 1.ノートパソコンよりコスパが高い
- 2.薄くて小さいから持ち運びが楽々
- 3.マルチタスクもなんのその
- 4.アップルペンシルで最高の手書き体験を味わえる
- 5.WEBブラウジングが快適
- 6.最新Macのサブディスプレイ、液タブとして使える
- 7.マウスが使用可能になった
- 8.テキストの入力、編集が効率良くサクサクできる
- 9.外付けメモリも使えるし、ファイル操作も思い通りにこなせる
- 10.写真、動画の編集も大画面でしやすい
1.ノートパソコンよりコスパが高い
13inch MacBook Pro ¥159,800-
12.9inch iPad Pro ¥128,800-
11inch iPad Pro ¥106,300-
（ストレージは全て256GB）
ここに純正キーボード＋アップルペンシルを追加すると
＋３〜４万程ですね。
キーボードをサードパーテ製のものにすれば価格を抑えられますね。
2.薄くて小さいから持ち運びが楽々
ここは比べるまでもないですね。
ちなみに12.9inch iPad Proで631gでノートPCの半分程です。
個人的にお勧めしたいのは12.9inchiよりも11inchiです。
大きい方がいいという意見もありますが
「タブレット」として使うことを考えると11inchiが最適です。
店頭で持ってもらうと、サイズ感や重さなどが比較できると思います。
3.マルチタスクもなんのその
マルチタスクが大幅強化されました。
最大３つのアプリを同時表示できるようになった事と、マルチタスク起動時のアプリの画面表示でサイズを変える事が出来る様になりました。
また、スライドオーバー機能でサブアプリの表示を切り替える事が簡単になりました。
4.アップルペンシルで最高の手書き体験を味わえる
私が最も推したいのがココです！
何がすごいか？
それは「ショートカット機能」と「ラグがない」という事です。
プロのイラストレーターさんも使用されている方も多いですが、
私は手帳としてiPadProを愛用しています。
iPadにはペーパーライクフィルムを貼っているのですが
書きやすさが尋常じゃない！
本物の紙に書いているように感じます。
そしてショートカット機能もあるので便利！
ペンをダブルタップすると消しゴムに早変わりです。
是非、使って欲しいですね。
5.WEBブラウジングが快適
Safariでの使い勝手が向上したようです。
※筆者はchromeで閲覧しているので熱弁できません…。すいません。
ダウンロードマネージャーの追加
最初からPCサイトを表示
スクロールバーでスワイプ
6.最新Macのサブディスプレイ、液タブとして使える
Sidecar（サイドカー）という機能が標準搭載されました！
有線、無線でもMacのサブディスプレイとしてiPadが変身します。
逆も出来るようなので、プレゼンなどに持ってこいですね。
ただ、注意しなければならないのが
最新モデルでしか使用できない点です…。
筆者のMacBookPro2015年モデルでは使用不可でした…。
悔しい…。
ですが、非対応でも有料アプリでサブモニターにする事ができます。
筆者はPhotoshopでのポスター作成の仕事をしておりますので、
「Yam Display」というアプリを使用しています。
有線接続だとラグもないので快適です。
Sidecar対応機種は↓
MacBook、MacBookProは2016〜
MacBookAirは2018〜
その他デスクトップ型は公式サイトでご確認下さい。
7.マウスが使用可能になった
有線/無線どちらも使用可能になりました。
ポインタが指先の様な表示になっています。
ゲーミングマウスを使用すると様々なジェスチャーが使用可能に！
これで一層PCの感覚に近づきましたが、オンリーワンな操作性がさすがです。
※Apple純正のマウスやtrackpadは使用できませんので注意！
8.テキストの入力、編集が効率良くサクサクできる
新しいジェスチャが追加されサクサクになりました。
コピー/３本指でピンチイン
カット/３本指でピンチイン×２
ペースト/３本指でピンチアウト
文書の選択/１回タップ
単語の選択/２回タップ
文章全体/３回タップ
段落全体/４回タップ
取り消し/３本指で右から左にスワイプ
個人的に上部３つのコピペは使用頻度高いのでマスターした方がいい操作ですね。
9.外付けメモリも使えるし、ファイル操作も思い通りにこなせる
ありがたい機能です。
本当にパソコンに近い感覚で使用できますね。
USBフラッシュやメモリー、HDDなどが接続可能です。（USBタイプCのみ）
また、ファイルというアプリがありますが、これが神掛かってます。
iCloud経由で確認していたデータもここからさくっと確認できます。
フォルダの様な感覚で使用できますね。
10.写真、動画の編集も大画面でしやすい
写真アプリのデザインが大きく変わり、見やすくなりました。
検索もしやすくなり、使用感もGOODです。
また、動画編集も標準アプリでOK！
トリミングやフィルターはもちろんですが、角度の変更やアスペクト比の変更も可能です。
未経験からweb制作【基礎学習とHTML】
本日はWEB業界未経験の筆者がHTMLについて触れていきます！
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。
W E Bデザインの作成フロー
サイトマップ作成
必要なページ、コンテンツなどを洗い出す。
デザインの大枠を決めていく。
ツリー形式で記載していくと、後々ディレクトリ構造やファイル名を決めておくと後の作業がスムーズになる。
※ディレクトリとはファイルのことでW E Bサイト作成には複数のファイルを使用するHTML/CSS/画像(jpg.png)/動画(MP4.WebM)/音声(MMP3)など
ワイヤーフレームとカンプの作成
W E Bサイトのボタンやメニューなどの大まかな配置を決めていく。
この作業を「ワイヤーフレーム」と呼ぶ
こういった作業はディレクションと呼び、W E Bディレクターが行う。
（デザイナーが行う所もあるようですね）
ワイヤーフレームをもとに完成イメージを作成していく。
この際。PhotoshopやIllustratorを使っての画像作成スキルが必要になります。
そして出来上がったイメージを「デザインカンプ」や「モックアップ」と呼ぶ。
デザインのコード化
出来上がったデザインカンプを元にW E Bブラウザが理解できるようにコード化する
この作業をコーディングと言う。コーディング専用の作業者を「コーダー」と呼ぶ。
デザインカンプの作成〜コーディング化するのがいわゆる「W E Bデザイナー」ですね。
コーディングでは「HTML」や「CSS」ファイルを作成していきます。
文書構造が正しく無いHTMLでは検索エンジンが理解(機能)しない。
※H T M Lとは
Hyper Text Markup Language の略 ハイパーテキストマークアップランゲージ
通常のテキストとは違いコンピューターが文書構造を正しく理解できるように印を付けた言語
※C S Sとは
Cascadeing Style Sheetsの略 カスケーディングスタイルシート
文書のレイアウトや装飾などの見た目を指定する為の言語
セレクタ、プロパティ、値の３つで構成されている
テキストエディタ
私が購読している本はこのソフトを使用していますので、
こちらを使って進めていきます。
その他のテキストエディタ
などがあげれらますね。
※そのほかにもたくさんありますが、有名どころだけ記載しています。
また、コードの確認用のブラウザとして「Google Chrome」が使われていますね。
Appleユーザーの私ですが、標準ブラウザとして使用していたので違和感なく使えそうです。
またコーディングを支援する機能としてGoogle Chromeでは「ソースコードの表示」や「検証」でサイトのコードを見られるのですね。
すごい！
感動しました！
ちなみにWindowsでは右クリックで！Macではcontrol +クリックで閲覧可能
それでは、このままコードを実際に書いていこうと思います。
HTMLを記述する
コンテンツエリアを指定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header></header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
コンテンツエリアに<div>要素を使用し、id属性で「wrap」という名前をつけます。
ロゴを指定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<img src="images/logo.png" alt="◯◯◯◯"
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
赤文字の◯◯◯◯に画像のファイル名が入ります。
リンクを設定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
アクセスがあった場合「index.html」というファイルを最初に表示する仕組みになっている。<a></a>←これがリンク設定のタグです。
ロゴにC S Sでのスタイリング用の目印をつける
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
メニューを設定する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav></nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
<nav></nav>←これがメニューの設定タグですね。
メニューの項目を設定
先ほど作成したメニューに項目を追加していきます。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
<ul></ul>←このタグは順序を持たないリストを表す
<li></li>←このタグはリストのタグを表す
メニューにリンクを張る
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
先ほど作成したリストにリンク先を指定していきます。
<a href="portfolio.html">Portfolio</a> これがそうですね。
間違えた時に赤くなってくれるbracketsさん優しい。
安心してコーディングできます。
メニューにC S Sの目印をつける
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html"></a>Contact</li>
</ul>
</nav>
</header>
<div id="wrap"></div>
<footer></footer>
</body>
</html>
「u l」要素に「class」属性で「global-nav」という名前を入力
これでheader要素は完成！次はfooterに移っていきます。
コピーライトを記述する
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index".html>
<img src="images/logo.png" alt="◯◯◯◯">
</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap">
<div class="contact">
</div>
</div>
<footer>
<small>(c)nonokun-studio</small>
</footer>
</body>
</html>
それでは、プレビューで見てみましょう。
ここまでコードを入力してきましたが、H T M Lを読みやすくする
テクニックがあるので実践していきます。
インデント
行頭位置で改装を直感的にする「インデント」
インデントとは字下げのことで、文書の階層をわかりやすくする為のもの。
半角スペース２つを最小単位として行っていきます。
インデントするとこうなります。
<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF-8">
<title>ののくんページ</title>
</head>
<body>
<header>
<div class="logo">
<a harf="index.html"><img src="images/logo.png" alt="SNAPPERS</a>
</div>
<nav>
<ul class="gloval-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrap">
<div class="contact">
</div>
</div>
<footer>
<small>(c)nonokun-studio</small>
</footer>
</body>
</html>
このように、コードを見やすくする事で複数人でもWEBサイトを運営できたり、別の人に引き継いだり出来ます。
なるべく綺麗なコード入力を心がけましょう。
基本は大事です。
