ピュアチャ〜ジ

広告代理店のディレクター休職中。元ホスト/元メイド喫茶キッチン/元アパレル店員。その人にあった生き方や考え方についてを語るブログ。その他楽しんでもらえそうなネタを書きます。

Webデザイン勉強92日目の成長報告!

はいどうも!

 

今日の進捗報告を行います!

 

コード→表示例 の順番で画像を貼り付けています!

 

f:id:terushi-diary:20191118001522p:plain

画面サイズ=sm(スマホ

 

画面上部=アラート

二段目=ハンバーガーメニュー

f:id:terushi-diary:20191118001532p:plain

ハンバーガーメニューを開いた時

f:id:terushi-diary:20191118001541p:plain

画面サイズが大きい時

f:id:terushi-diary:20191118001550p:plain

f:id:terushi-diary:20191118001558p:plain

How to use のタイトルに対して、iOSAndroidのタブ、説明文を表示させています

f:id:terushi-diary:20191118001609p:plain

説明文にツールチップ(文字の下の吹き出し部分)を表示させています

f:id:terushi-diary:20191118001617p:plain

ツールチップを表示させる場合はJavaScriptも記述する必要があるようです

(まだ学習していない領域)

f:id:terushi-diary:20191118001722p:plain

 

今日はこんな感じでした。

 

今日はあまり構造やタグの意味の理解ができませんでした。

なぜかというと、動画内では各classの意味を深く解説しておらず「こう表示したい場合にはここに、この文字のタグを打ち込みます。」という説明で終始したからです。

 

Bootstrapの概念的に、部品を組み合わせていくという感覚に近いと思うので全部のタグを理解して記憶する意味はないし、現実的ではないのかもしれないです。

とはいっても、ある程度理解をしていた方がいいと思っています。

 

今日はBootstrapの公式ページを見ずに、動画で教えられたまま打ち込んだのであまり理解が深まらなかったと思うので、明日は今日やったところを公式ページ・動画・コードを見つつ復習をするところから始めようと思います。

 

今日は、ここまで。

Webデザイン勉強91日目の成長報告!

はいどうも!

本日も作業を行い、Bootstrapの学習を進めました。

 

本日の進捗を報告します!

【打ったコード→表示されたページ】 の順番で振り返ります。

 

btn = ボタン

btn-sm = small ボタン

btn-lg = large ボタン

f:id:terushi-diary:20191116235323p:plain

f:id:terushi-diary:20191116235331p:plain

 

colは12で設定されているため、記述しなければ12で収まるように表示します。

数値を設定していて、かつ12を超えたものは改行をしていることがわかります。

f:id:terushi-diary:20191116235343p:plain

f:id:terushi-diary:20191116235357p:plain

 

 

class="d-none d-md-block col-md-2(一番下の記述)

 通常は非表示/ディスプレイがミディアムの時は、カラム2で表示

f:id:terushi-diary:20191116235421p:plain

 

sm

f:id:terushi-diary:20191116235428p:plain

md

f:id:terushi-diary:20191116235435p:plain

 

 

以下は、Bootstrapを使ったHP作成の記述をしたものです。

 

まず最初にスマホサイズの場合の記述をし、smの指定をしているものはPCのディスプレイ(small)になった際の記述の仕方です。

f:id:terushi-diary:20191116235442p:plain

f:id:terushi-diary:20191116235449p:plain

↓メイン(スマホサイズ)↓

f:id:terushi-diary:20191116235459p:plain

 

↓ヘッダー+メイン(PCのsmallディスプレイサイズ)

f:id:terushi-diary:20191116235455p:plain

 

 

↓メイン+テーブル(PCのsmallディスプレイサイズ)

f:id:terushi-diary:20191116235504p:plain

 

今日やってみて思ったんですが、本当にBootstrapすごいです。笑

classでかなり多くの表現ができます。

種類がすごく多いので、作成しつつ色々なバリエーションが見つけられると思いました。

「table」の5文字をclassに設定するだけで一瞬でスタイルが整うなんて素晴らしすぎます。

 

そして、今の動画教材でよく使われている構造の理解が深まった気がします。

 

↓header以降のsection内の記述の順番↓

section<h2<container<div<row<col

 

一つの大きな塊を定義=section

そのタイトルを定義=h2

その下に、複数の要素を囲む役割=container

containerの中にある、各要素(似ている要素)=div

複数のcolのまとめ役。画面サイズでcolを横並びにしたり縦並びにしたりが可能=row

 

divの中の小さな集まり=col

 

こんな感じです。

今日は、ここまで!

Webデザイン勉強90日目の成長報告!

はいどうも!

本日も作業を行いました。

 

 

①Bootstrapのブログを2本読む&コードを実際に書いてみる

 1.http://websae.net/twitter-bootstrap-grid-system-21060224/

 2.https://www.marorika.com/entry/bootstrap-beginner

②レスポンシブデザインの英語YouTubeで学習して後半の部分で分からなくなる

 https://www.youtube.com/watch?v=no-Ntkc836w

③わからない部分の知識が不足しているので、ドットインストールでBootstrapで学習

 

こんな感じです。

 

以下に学習内容を記載します!

 

【記述したコード】

mt-5 = margin-top

ml-sm-5 = smallサイズのディスプレイのmargin-leftを5em(3rem=親要素の3倍)

mb-md-5 = midiumサイズのディスプレイのmargin-bottomを5em

pt = padding-top

lg = large

pl = padding-left

xl = xlarge

f:id:terushi-diary:20191116001607p:plain

【表示例】

f:id:terushi-diary:20191116001618p:plain

 

【記述したコードの意味】

xsサイズのディスプレイの場合、①〜③は12カラムを使って表示する

mediunサイズのディスプレイの場合、①〜②は6カラム、③は12カラムを使って表示する

xlargeサイズのディスプレイの場合、①〜③は各4カラムを使って表示する

f:id:terushi-diary:20191116001626p:plain

xsサイズ

f:id:terushi-diary:20191116001633p:plain

mediumサイズ

f:id:terushi-diary:20191116001641p:plain

xlargeサイズ

f:id:terushi-diary:20191116001649p:plain

 

【記述したコード】

font-weight-normal = 文字の太さ=普通

display-4 = ディスプレイに対する文字の大きさ(h1より少し大きい)

text-center = 文字を中央揃え

bg = 背景

 

f:id:terushi-diary:20191116001656p:plain

【表示例】

f:id:terushi-diary:20191116001702p:plain

 

【記述したコード】

w = width(50だと50%)

h= height(1000だと100%)

f:id:terushi-diary:20191116001709p:plain

【表示例】

f:id:terushi-diary:20191116001715p:plain

 

【記述したコード】

pt-3 = padding-topが1rem(親要素の1倍)

my-0 = y方向のmarginが0

mx-auto = x方向のmarginはauto

※marginにのみautoの利用が可能

f:id:terushi-diary:20191116001722p:plain

【表示例】

f:id:terushi-diary:20191116001730p:plain

 

以上です。

 

【本日の感想】

Bootstrapを取り入れることで記述が早くなった気がしました。

そして、class属性になんでも記述していい感じがしたのと、コードもすっきりする印象を受けました。すっきりするので早くなる秘訣なのではないかと思います。

 

明日は、冒頭の③の続きをやろうと思います。

今日は、ここまで!

 

Webデザイン勉強85日目の成長報告!

はいどうもこんばんは!

今日も作業を行いましたので進捗報告です!

 

①Firebaseを利用したHP公開。

詳細は省きますが、自分のローカルにあるファイルをUPロードして公開できます。

ポートフォリオ用のサイト作成の時に使えそうです。

実際アップロードしたのがこちらです。

https://myportfolioproject-8be05.firebaseapp.com/

 

 

YouTubeでレスポンシブサイトの理解を深める

 英語で説明されるだけでデザインが洗練されて、かつ分かりやすく感じるのは気のせいでしょうか、、笑

https://www.youtube.com/watch?v=BIz02qY5BRA&feature=youtu.be

 

③Bootstrapのグリッドシステムの使い方の理解

グリッドはColを12分割して割り当てることができるということが理解できました。

学習したサイトはこちら。こちらのサイトを見つつコードを打ち込みました。

(打ち込んだスクショは割愛します)

http://websae.net/twitter-bootstrap-grid-system-21060224/

containerの中にrowを入れ、12分割した際の「div class="#"」の割合を記述してあげればOKです。

例:col-xs-4

※xsサイズの画面の際は、カラムを4/12使うという意味

 

 

今日は、ここまで。

Webデザイン勉強84日目の成長報告!

はいこんばんは!本日の作業進捗報告を行います!

 

今日学んだこと

CSSを使ったアニメーション

②数値や値の代入の仕方

 

【打ったコードの意味】

animation-duration: 2s; = アニメーションに2秒の秒数をかける

animation-iteration-count: 2; = 2回アクションをする

animation-timing-function: ease-in-out; = 移動の速度(この指示は遅い)

 

@keyframes spin {

0% { transform: none; }

50% { transform: rorate(270deg) scale(0.8); border-radius: 50%; }

100% { transform: rorate(360deg) scale(1.8); }

 

 transformが50%の時は、270度回転させて80%の表示にする。図形は丸にする

f:id:terushi-diary:20191113231534p:plain

 

【打ったコードの意味】

 

--my-color: red; = 「--」を二つ先頭につけることで、定義することが可能

color: var(--my-color); = 赤色を代入

f:id:terushi-diary:20191113231546p:plain

【表示】

f:id:terushi-diary:20191113231556p:plain

【打ったコードの意味】

calc( = 数字を代入できる小技

f:id:terushi-diary:20191113231609p:plain

【表示】

f:id:terushi-diary:20191113231621p:plain

 

【打ったコードの意味】

色相を600で代入して、.btnには補色を代入している

f:id:terushi-diary:20191113231630p:plain

【表示】

f:id:terushi-diary:20191113231640p:plain

【コード2】

f:id:terushi-diary:20191113231707p:plain

【表示2】

f:id:terushi-diary:20191113231716p:plain

 

今日は仕事が休みだったので、学習が進んでよかったです。

明日はFirebaseでHPを公開する方法を学習します。

webデザイン勉強83日目の成長報告!

はいどうも!

本日も作業を積み上げました。

 

【作ったHP】

f:id:terushi-diary:20191112191539p:plain

f:id:terushi-diary:20191112191544p:plain

f:id:terushi-diary:20191112191552p:plain

【打ち込んだコード】

f:id:terushi-diary:20191112191605p:plain

f:id:terushi-diary:20191112191612p:plain

f:id:terushi-diary:20191112191620p:plain

f:id:terushi-diary:20191112191637p:plain

f:id:terushi-diary:20191112191642p:plain

f:id:terushi-diary:20191112191650p:plain

 

 

一つ一つ解説するとすごい時間がかかりそうなので省こうと思います。

今日学習したことは、各コード自体は難しくないのですが「どういう構造にして組み立てるか」というところがポイントだと感じました。

 

今回だと以下です。

 

1.一番上の要素はヘッダーとして定義する

2.上下にある「ダウンロード」のボタンに共通のCSSをかけるため、複数の要素を一つのclassに設定する

3.classで区切るごとに、h1やh2を設定してOK

4.section>div>section(複数) という風に、表現をするために複数の目印を使ってOK

 

 

今日は、ここまで。

Webデザイン勉強82日目の成長報告!

はいこんばんは!今日の作業進捗報告です!

 

【打ったコード】

HTMLでdivでくるみ、テキストと画像を配置

CSSでは.features直下のh1に対してだけの指示を記述

f:id:terushi-diary:20191111232255p:plain

 

【表示したページ】

f:id:terushi-diary:20191111232302p:plain

 

f:id:terushi-diary:20191111232307p:plain

f:id:terushi-diary:20191111232313p:plain

 

 

今日は、ここまで