Miki's Blog

フロントエンジニアに、俺はなる！

【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【振り返りと今後】

さて、これまで下記事の計画を元に学習を進めてきました。
2冊の書籍学習が終了！
gomagaru.hatenablog.com

あらためて、次はこれをやりたいなーと
発展と応用のきっかけをたくさん見つけることができた書籍であったなぁ、
というのが今回の2冊で学習を進めた感想でありました。

今後

写経コーディングと｢きほんのきほん｣インストールを経て、
後学として以下を進めていく予定でいます！

HTML/CSS

・CSS設計
　...今回2冊目で作成したWebサイトを、
　｢リセット、共通のスタイル指定、各ページ専用のスタイル指定｣
　それぞれのCSSを読み込む構成に変えて作成し直してみます。
　
・コーディングについて
　...デザインからコードにおこす作業を行っていきます。
　まず直近の予定としては先日Twitterでakane様からいただいたデザインカンプを
　HTML/CSSコードにしてみます。　


　次に、コーディング模写を。
　やりたい事がスッキリまとめられていた、こちらの記事を参考にさせていただきます。
haniwaman.com

JavaScript

・フレームワークについて
　...1冊目にて、JavaScript→jQuery→Vue.jsと進むなか、
　同じ成果物の実装にもかかわらずどんどん簡潔になっていく様に感動。
　UI構築フレームワークということで、とても興味が。
　(視覚的・直感的にどう見せるのか、は個人的にアンテナにめちゃくちゃ引っかかるポイントなので...)

　まずはHelloWorld的に何かしらWebアプリケーション作ってみたいので
　こうした記事を参考に、はじめたいと思います。
qiita.com
VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定 | iwb.jp

デザイン

・全般
　...｢余白｣と｢色｣を学習したいと考えたため、デザイン側の知識も入れていく。
　直近では書籍を2冊ほど購入し、読んでいます。趣味のイラストにも活用。

・Photoshopでの画像編集
　...現環境に制作環境を導入して、はじめます。｢Webトレース｣しようかと。
y-hmd.com

・UIデザイン
　...インタラクティブ面でのデザインを知りたいと思いました。
　例えば、こうした記事を読み漁って実装に活かしていきたいです。　
saruwakakun.com
techblog.kayac.com

　また、日々何かしら触っているスマホで素敵UIを目にするはずなので
　スクリーンショットなど撮り溜めておいて、自分の手で実装するというような
　｢UI模写｣をしてもよいかも。

以上！

毎日少しでもいいから何か作業して、それぞれアウトプットできたらと思っています。

継続は力なり！＼\٩( 'ω' )و //／

【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【7日目】

Chapter 10 マルチデバイス対応ページを制作する

2月11日(月) 0.5h

HTMLタグ

・content属性 - initial-scale
　...初期のズーム倍率を指定するプロパティ。
　レスポンシブデザインでは拡大縮小は不要なので、値は｢1｣とする。
　※Visual Studio CodeではデフォルトのHTMLコードに記述されている。
・メディアクエリをlink要素に記述する
　...ブレイクポイントごとに別々のCSSファイルを読み込ませる方法。
　書式 :
　<link href="css/sp.css" rel="stylesheet" media="screen and (max-width:600px)">
　画面の幅が600pxより小さい場合(メディアクエリ)、sp.cssが適用される。
　※今回はこの方法は使用せず、CSSに直接記述。

CSSプロパティ

・Webブラウザ単位｢vw｣
　...Webブラウザ全体の横幅を｢100vw｣と表す。
　%は親要素の横幅に対する割合、vwはWebブラウザの幅に対する割合であり、
　親要素の影響の有無に違いがある。

ポイント

・正しいブレイクポイント値は？
　...絶対に正しい値はない。時代によって主流の端末が変化するため。

成果物

Portfolioページ画像(レスポンシブ対応)
Portfolioページ(レスポンシブ対応)

まとめと感想

今回は、1ページのレスポンシブ対応を学習。
基本は前の本で学習済み、+αが少しという感じの内容でした。

今回はPortfolioページのみ対応させたので、

他ページにも
・フォントサイズ表記を単位｢vw｣での表記に書き換える
・背景画像をスマートフォン用に用意したものに変更する

などの対応が必要そうですね。

想像で、チョロチョロ〜と見た目を整える事は出来ると思ったのですが、
本来は｢スマートフォン版でどこに何を配置するか｣が決まってないといけないですよね？
つまり、厳密にはサイト全体のスマートフォン版・デザインカンプ作成からがスタートなのでは？

これはPhotoshopの学習にも繋げられるけど、今はコーディング部分の練習を先にしたい...

う〜む...

と、迷える子羊に救いの光が。


オリジナル制作のデザインカンプ(PC版・スマートフォン版のpsdファイル)を
いただくことができました...！！！！

Twitterで素敵なWebデザインカンプがふと目に入り、
そこに、配布可能のお話が。
女神様って実在するんですね... (本当にありがとうございます！！)

これでコーディング模写の前に、
デザインのある状態から純粋にコードにおこす練習ができます...！

そして、｢今後やろうとしていた事｣が頭の中でスッキリ整理されました。
今後の方針は、別記事でまとめたいと思います！

【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【6日目】

書籍学習ログ HTML CSS Webデザイン Webサイト自作

Chapter 9 問い合わせページを制作する

2月7日(木) 1.0h

用語

・定義リスト
　...dl、dt、ddの3つの要素のこと。
　リストをつくるul、li要素のようにセットで使う。
　定義した用語と、それに関する説明を一対で表すリスト。
　フォームで使う場合、以下のようになる。
　dt要素 : フォームの項目名
　dd要素 : 入力欄

HTMLタグ

・Google Maps埋め込み
　...以下の手順で埋め込みコードを取得。
　1. 表示エリアを検索
　2. ｢共有｣を選択
　3. ｢中▼｣から｢カスタムサイズ｣を選択
　4. サイズを入力してiframeコードを取得

CSSプロパティ

・マウスポインタ形状を指定する - cursor
　...以下の種類がある。
　auto : 状況に応じて自動で選択(初期値)
　default : 矢印マーク
　pointer : 指マーク
　crosshair : 十字マーク
　help : ヘルプマーク

ポイント

・マウスポインタ設定のポイント
　...a要素(リンクなど)にマウスホバー時、デフォルトで指マークに変わるので、
　　｢クリックする場所｣を指マークで認識するユーザーもいる。
　　用途に合わせてマウスポインタを設定する。

成果物

Contactページ画像
Contactページ

まとめと感想

今回はフォーム制作がメイン。
前の本で扱った内容で、ほとんど学習済みの内容となりました。

UIに関する部分で、マウスポインタが矢印マークから指マークに変わることで
クリック可能と認識する人もいるということ...。
自分は普段マウスポインタをあまり気にしたことがなかったので、
改めて気付かされました。

色の反転、透明度の変化、マウスポインタ変更...

普段見ているWebサイトでも、至る所にこうした工夫がされていますよね。

使いやすい・見やすい・わかりやすいデザインとは...？というところで、
Webサイトはもちろん、ソーシャルゲームなどのUIもよく見るようになりました。

手法を知ってるかも大事ですが、
どうしたらわかりやすくなるのか、どういった場合にわかりにくくなるのか
ということを、想像できるかどうかが重要な気がしています。

デザインとコードは完全に分業されている場所は多いようですが、
こうした工夫の意図をしっかり汲み取ったコーディングを心がけたいと思いました。


次で、最終章です！！

【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【5日目】

書籍学習ログ HTML CSS Webデザイン Webサイト自作

Chapter 8 グリッドレイアウトページの制作と動画の埋め込み

グリッドレイアウトページ

用語

・カード型レイアウト
　...コンテンツをトランプのカードのように並べたレイアウト。例 : 画像ブックマークサービス｢Pinterst｣
・可変型レイアウト
　...コンテンツの幅や位置を変化させ、同じ高さや幅で並べるよりもアクセントをつけることができる。

HTMLタグ

・ページ内リンク
　...リンク先ページのid名を指定して、ページの途中から表示させる。
　<a href ="●●●.html#id名"><⁄a>
・グリッドレイアウト - 画像リストの準備
　...section要素内で画像リストを作成する。
　　CSS内ではこのリストにスタイルを指定するので画像リストクラス(photograph-list)を定義。
　　floatプロパティで並べることを考えてclearfixクラスも追加しておく。

<section id="scene_1">
   <h2 class="icon">Scene_1</h2>
   <ul class="clearfix photograph-list">
      <li><img src="images/01.png" alt="画像1"></li>
      <li><img src="images/02.png" alt="画像2"></li>
      <li><img src="images/03.png" alt="画像3"></li>
   </ul>
</section>
CSSプロパティ

・グリッドレイアウトのスタイル指定
　...HTML側で準備した画像リスト(photograph-list)にスタイルを適用させる。
　1. 画像を左寄にし、リストの装飾を外す
　2. 余白を設定する
　3. 疑似クラスで右端の余白をなくす
・特定条件下の要素を指定する疑似クラス　:nth-child()
　2番目の要素 : :nth-child(2)
　2の倍数番目の要素 : :nth-child(2n)

#photograph photograph-list li{
   float: left; /*左寄*/
   list-style: none; /*装飾なし*/
   margin: 0 20px 15px 0; /*余白設定 : 右20px 下15px */
   /*このままだと右端の画像が下に落ちる*/
}
#photograph photograph-list li:nth-child(3n) {
/*3の倍数順要素の右余白を解除*/
   margin-right: 0;
}
ポイント

・グリッドレイアウトと親和性の高い数字
　...全体は｢12｣で分割されている。12は2,3,4,6と多くの数字で割り切れるので多彩なレイアウトに対応できる。

Youtube動画埋め込みページ

用語

・iframe要素...外部サイト内容を埋め込む要素。Youtube動画他、カレンダー、地図、ブログの新着情報など幅広い用途に使用できる。

埋め込みコード取得手順

【書籍の手順×、UI変更。新手順は以下】
1. Youtube動画にアクセスし、｢共有｣クリックでメニュー表示、｢埋め込み｣を選択

共有メニュー画像
共有メニュー
2. プレーヤー設定を確認のため埋め込みオプション以下の｢デベロッパーサンプル｣を選択
埋め込みプレーヤー設定の確認画面画像
埋め込みプレーヤー設定の確認
3. プレーヤー設定ページで｢コンテンツ｣と｢サイズ｣を指定
　｢コンテンツ｣には、動画urlの最後にある英数字で構成された動画IDを設定。
　｢サイズ｣は埋め込み場所に合わせて横幅を設定。高さが自動調整される。
プレーヤー設定ページトップ画像プレーヤー設定のページ下端画像
プレーヤー設定ページ
サイズ設定画面画像コンテンツ設定画面画像
サイズとコンテンツの設定
4. ｢選択したオプションを使用してプレーヤーを更新｣でプレーヤー設定を更新
更新後プレーヤー確認画面画像
更新後プレーヤー
5. ｢プレーヤーのパラメータを表示｣でコード取得
コード取得画面画像
コード取得
6. 取得したコードを埋め込み場所のHTMLに追加
動画埋め込みページ画像
動画埋め込みページ

成果物

グリッドレイアウトページ

Photographページ画像
Photographページ

YouTube動画埋め込みページ

Movieページ画像
Movieページ

まとめと感想

今回はグリッドレイアウトページと動画埋め込みページを制作しました。

動画埋め込みに関しては、埋め込みたいコンテンツごとに別サイトでのサービスでコードを取得するだけだったので楽チンでした。

グリッドレイアウトページは、タイルのように画像がぴっしり並ぶとやっぱり綺麗でした。
実装の方法として、今回はfloatと、疑似クラスを使った記述で実装していましたが、:nth-child() という記述が印象的。

しかしながら、グリッドと聞くとBootstrapのグリッドシステムが思い起こされ、
他にも実装方法ありそうだなと思い調べると、とってもたくさん出てきた。笑
www.webcreatorbox.com
ics.media
www.webdlab.com
ottan.xyz

ふむふむ。触ったことのあるものだと、やっぱりBootstrap。
そして、参考ページを見てみるとFlexBox、CSS3のobject-fitでの記述が便利そうでした。

それぞれ試してから、自作レイアウトでポートフォリオをつくるのに活用したいと思います！

次回、お問い合わせページのレイアウトを学習〜

【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【4日目】

書籍学習ログ HTML CSS Webデザイン Webサイト自作

Chapter 7 2カラムページを制作する

2月5日(火) 0.5h

HTMLタグ

・サイドバー
　...<aside>タグ使用、section要素で区切ってリストでメニュー作成
CSS側で、メインコンテンツは左寄、サイドバーは右寄などを指定する。

<aside class="sidebar">
   <section>
      <h2>Photograph</h2>
      <ul>
         <li>街-City</li>
         <li>海-Beach</li>
         <li>森-Forest</li>
      </ul>
   </section>
      <h2>Video</h2>
      <ul>
         <li>Movie</li>
         <li>Short film</li>
      </ul>
   <section>
   </section>
</aside>
ポイント

・共通レイアウトを用いたページはUIを意識
　...｢ロゴクリックでホーム｣は暗黙の了解。その他、変更があるとユーザーの混乱を招く可能性があるので注意
・見栄えよりも操作性・使い勝手・わかりやすさを重視
・画像を見出しにすることも可能
・画像にリンクがあることを示すUI...マウスホバー時、画像を半透明にする
・カラム幅の算出...以下のようにサイドバーに指定する横幅を算出する

　全体 : 960px
　メインエリア : 700px
　メインエリアの余白(右) : 10px
　メインエリアの余白(左) : 10px
　サイドバーの余白(右) : 10px
　サイドバーの余白(左) : 30px

　<全体> - ( <メインエリア> + <メインエリアの余白> + <サイドバーの余白> )
　= 960 - (700 + 10 + 10 + 10 + 30) = 200px
　

成果物

Portfolioページ画像
Portfolioページ

まとめと感想

2カラムページを制作しました。
HTMLタグやCSSプロパティについては、
<aside>の使用以外には、前の本で学んだことの延長で理解できる内容でした。

写経ではありますが、サイドバーの横幅の算出方法が載っていたので
自分でレイアウトを考えるイメージができました。

共通レイアウトを使用して別々にページを作っていく際、
ボタンやリンク画像などユーザが操作を行うコンテンツについて、
レイアウトを崩すなどして
ユーザを惑わす結果にならないように気をつけるという点。
常に意識していこうと思います！

次回、グリッドレイアウトページ制作へ╭( ･ㅂ･)و

【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【3日目】

書籍学習ログ HTML CSS Webデザイン Webサイト自作

Chapter 6 シングルカラムページを制作する

2月4日(月) 1.5h

用語

・疑似要素...要素の前後にテキストや画像を追加したり、要素内の特定箇所にスタイルを指定する記述方法。｢<セレクタ名> :(または::) <疑似要素名>｣

HTMLタグ

・表組作成
　<table> : 全体
　<tr> : 横1行、<th>と<th>が入る
　<th> : 見出し
　<th> : データセル
・faviconを設定する
...favicon.isoを準備し、head要素に以下を追加。

<link href="favicon.iso" rel="shortcut icon">
CSSプロパティ

・ページ上端に背景画像指定
...要素の長辺に合わせて画像を拡大縮小、画像開始位置を上端に指定

#about {
   background-image: url(...);
   background-repeat: no-repeat;
   background-position: center top;  /*開始位置 縦を上端*/
   background-attachment: fixed;
   background-size: 100% auto; /*長辺に合わせて拡大縮小*/
}

・中見出しに飾りを付ける
...疑似要素とcontentプロパティを使う。
　contentは疑似要素before、afterと対になるので必ず記述する。

.icon:before {
   content: ""; 
   padding-right: 10px;
   border-left: 7px solid #9cb4a4; 
}

・セル間の隙間を調整する

table {
   border-spacing: 0; /*セル間の隙間を0*/
}

・隣合ったセルのボーダー表示方法を指定する
　collapse : 重ねて表示
　separate: 隙間を空けて表示

table {
   border-collapse: collapse; /*重ねて表示*/
}

・背景色を透明にする
...transparentで透明になる。index.htmlへの影響を直すために使用。

#index #wrap {
   background-color: transparent; /*背景色に透明を指定*/
}
ポイント

・1行あたり30文字
・section要素には見出しが必須
・class属性には複数クラス名指定可能...各クラス名のあいだに半角スペース
・div要素とspan要素...divはブロック要素、spanはインライン要素

成果物

Aboutページ画像
Aboutページ

まとめと感想

今回は1カラムページの作成で、新たに背景画像設定と表組みのタグ・スタイル指定を行いました。回り込み回避は前の本でやっていたので、理解もスムーズ。
｢clearfixで高さの情報を失ったところに杭を打つ｣
という表現、大変わかりやすかったです。

また、写経コーディングならではの事件も。
1行スタイルを抜かして記述してしまったがために、デバッグに大苦戦。。
その1行のミスを見つけるだけに1時間をかけました...
ページの見た目を見て、どこが悪いか検討がつくようになるには
経験しかないでしょうか。。(精進...精進...)

そして、トップページへの影響を解除する部分が印象的でした。
実はコンテンツ側の背景を白にしたあたりで既に変化に気付き、
軽くパニックに...w

今考えると、当たり前じゃん(書いた通りに動いてるじゃん)
という話ではあるのですが。

そして無事修正後も、しばらく考え込みました。

この規模で修正が必要なら、大きいWebサイトってどうしてるの？？
他への影響を考えながらの作り込みって、とっても面倒くさくない？？？

じゃあ、トップページ用CSSと下層ページ用CSSとを分けてそれぞれ編集するのは...？？
いやいや！そもそも｢○○の●は〜する、▲▲の●は〜する｣を｢●は〜する｣としたのがNGなんじゃ？はじめから｢○○の●は〜する、▲▲の●は〜する｣だけ書けばいいんじゃないの？！(オブジェクト指向したいんじゃー！)

などなど、脳内会議。

調べてみると、これはCSSコンポーネント設計という概念で、多くのエンジニア様方にとっての悩みの種であり、議論が行われる内容。
ルールがいくつか存在するようなので、これは今後も詳しく見ていこうと思いました。

学びが深い章でした！

次回、2カラムページの作成です٩( ‘ω’ )و