Progate | kinoblog https://kinonoteblog.com Sun, 02 Aug 2026 02:23:16 +0000 ja hourly 1 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS https://kinonoteblog.com/programming/30days-bootstrap-2?utm_source=rss&utm_medium=rss&utm_campaign=30days-bootstrap-2 https://kinonoteblog.com/programming/30days-bootstrap-2#respond Thu, 21 May 2020 04:51:43 +0000 https://kinonoteblog.com/?p=2143   こんにちは、 キノ(@zB75pWavnhDTIxr)です。 前回の続きをしていきます。↓   DAY15. 『Bootstrapを使ってビジネスLP制作③』 DAY16. 『Bootstrapを...

The post 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS first appeared on kinoblog.

]]>  

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

前回の続きをしていきます。↓

【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS

2019年6月6日

 

DAY15. 『Bootstrapを使ってビジネスLP制作③』

DAY16. 『Bootstrapを使ってビジネスLP制作④』



DAY15はちょうど折り返し地点です。

動画の59:00まで

長いですね。

でも、踏ん張りどころです！

 

前回と同じクリエイターなので、要領は分かっていると思いますが

あえてここでいっておきます。

キノ

英語は無視していいと！

 

 

動画の59:00～最後まで

前回と今回でBootstrapは完璧に理解しました。

LPを２本作ったんですよ！

キノ

しかも、手打ちで！これは誇っていい！

（実際は、①Bootstrapの公式を見て、コピペする。

②用途に合わせて自分が作ったclassやidを付与してアレンジしていきます）

 

DAY17. 『HTML5/CSS3/Bootstrap4の復習』

復習です！

ココ、大事なところです。

でも、ちょくちょく休憩していいですよ。難所はもう越えたので！

ここまでよく頑張りました！

Bootstrap Editor

Bootstrapを慣れるために、Bootstrap Editorをおすすめします。

これは、Bootstrap に慣れるために使えるツールです。

セーブやダウンロードできるので、自分が作った型を保存するのに便利！

 

Bootstrap Editorのメリット

・日本製ツールだから分かりやすい！

・インストールやログインなし！

・セーブやダウンロードできる！

・自分のエディターで動作確認する前に試し打ちができる

Bootstrapの本はこの1冊で十分！

さらにBootstrapを極めたい人はこちら↓

Ｂｏｏｔｓｔｒａｐ４フロントエンド開発の教科書 ウェブ開発の知識とコツをしっかりマスター /技術評論社/宮本麻矢
posted with カエレバ
楽天市場
Amazon

終わりに

 

お疲れさまでした！

これでBootstrapは完璧です。

いつでも公式サイトを見て慣れてください。

Bootstrap公式

 

こちらもおすすめ↓

 

Skill Hacks　評判

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS first appeared on kinoblog.

]]> https://kinonoteblog.com/programming/30days-bootstrap-2/feed 0 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS https://kinonoteblog.com/programming/30days-bootstrap?utm_source=rss&utm_medium=rss&utm_campaign=30days-bootstrap https://kinonoteblog.com/programming/30days-bootstrap#respond Thu, 06 Jun 2019 04:00:06 +0000 https://kinonoteblog.com/?p=893   こんにちは、 キノ(@zB75pWavnhDTIxr)です。   11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。 個人的にBootstrap編は楽し...

The post 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS first appeared on kinoblog.

]]>  

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

 

11DAYS~14DAYSは環境設定編を終わって、次はBootstrap編に行ってみましょう。

個人的にBootstrap編は楽しかったです（英語抜きにすれば）。

というのも僕はBootstrapを以前から学んでいるんですよ↓。

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

 

少年A
なんでBootstrapを勉強するんだ？

 

それはですね

Bootstrapを学んでおけば、ボタンとか、ナビバーとかが簡単に実装することができるからです。

プログラマーやエンジニアが

余計な負担をかけずにコーディングをしたいと思っています。

そんなとき、Bootstrapを使えば負担が急激に減るでしょう。

 

詳細は下記に↓

 

 

Bootstrapってなんなの？

 

さて、そもそもBootstrapとは何でしょうか？

元々はあのTwitter社が開発したCSSフレームワークです。

 

フレームワークとは

ボタンを思い浮かべてください。

皆さんが思い浮かべているボタンは、デザインが変わっているだけで、

基本的な機能は大きな違いはないと思います。

 

「ボタンがあってそれを押すと何かが起動する」って感じです。
こんな皆さんが思っている当たり前なことをHTMLで１からコーディングするのって面倒くさいですよね。

フレームワークはそれを解決してくれるありがたいものなんです。

「ボタンがあってそれを押すと何かが起動する」
この「ボタンがあってそれを押す」ところをCSSを使わずに実装することができます。

フレームワークは以下の言い換えることができます。

フレームワーク
骨組み、テンプレート、雛形、….etc

どうでしょうか。イメージつきましたでしょうか？

 

テンプレートがもうすでにあって、僕たちはテンプレートに装飾するだけでいいんですよ。

Bootstrapは数あるwebフレームワークの中で最も選ばれているフレームワークです。

DAY11. 『Bootstrapの基本を学ぼう』

DAY12. 『Bootstrapでレイアウトを作ろう 前編』

DAY11. 『Bootstrapでレイアウトを作ろう 前編』
昨日学習したBootstrapの基礎知識を使って、サイトを作っていきます‼️
ドットインストールの『Bootstrap 4入門』コースのレッスン#10〜#15までやりましょう👍

ドットインストールで『Bootstrap 4入門』を観て勉強しましょう！

ドットインストールはProgateよりも教材数が多く、

無料の枠でも学べることが多いので今後もお世話になると思います。

ブックマークを推奨します！

 

次はGridレイアウトです。

現在では、パソコンじゃなくスマートフォンやタブレットで見る人が増えました。

Gridレイアウトはスマートフォンやタブレットの幅に合わせてくれるものです。

これも、Bootstrapで簡単に作れちゃうんです。

 

初心者がよくやるミス

 

CSSとBootstrapを読み込む時、

必ずCSSは下に置くこと、

なぜならどのプログラム言語やマークアップ言語でも、上から下に読み込むからです（これを順次処理と呼びます）。

例として、僕はCSSはタイトルの下に配置して置くと決まっています。

 



　　　　　　　　　　　　　　　　　　（中略）
　　
　　
　　

 

これがもし逆ならCSSがBootstrapに上書きされてしまいます(これを順次処理といいます)。

基本的にCSSは下に配置して置くのが無難です。

DAY13. 『Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①

DAY14. 『Bootstrapを使ってビジネスLP制作②



３日間続いたドットインストールで『Bootstrap 4入門』レッスン#16〜#22クリアです！！

 


YouTubeで英語の動画を観てコーディングです。


DAY13. 動画の39:00

DAY14.最後まで

 

少し長いですが、

ただ観たままコーディングするだけなので（英語は無視で、じゃないと疲れます）、

「海外でも、同じなんだ」という感想を持っていただければこの課題は完了です。

 

急に理解できなくても、大丈夫です。

使っていくうちに慣れていきますから。

終わりに

お疲れ様でした。

containerクラスとrowクラス、text-centerクラスはよく使うので自分でググって理解するのをおすすめします。

Bootstrapは、

「あるクラスは既に修飾されたものがあって、自分がCSSに何も書かなくてもいいんだ！」という理解で大丈夫です。

 

では、また

ここまで読んでくれてありがとうございました。

次回はこちら↓

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

【初心者】30DAYSトライアルをやってみた⑥ Bootstrap編2　15DAYS~17DAYS

2020年5月21日

こちらもおすすめ↓

Skill Hacks　評判

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

2019年5月5日

The post 【初心者】30DAYSトライアルをやってみた⑤ Bootstrap編　11DAYS~14DAYS first appeared on kinoblog.

]]> https://kinonoteblog.com/programming/30days-bootstrap/feed 0 【初心者】30DAYSトライアルをやってみた④ 環境設定編　8DAYS~10DAYS https://kinonoteblog.com/programming/30days-visual-studio-code?utm_source=rss&utm_medium=rss&utm_campaign=30days-visual-studio-code https://kinonoteblog.com/programming/30days-visual-studio-code#respond Thu, 25 Apr 2019 10:54:12 +0000 https://kinonoteblog.com/?p=672   こんにちは、 キノ(@zB75pWavnhDTIxr)です。   ８DAYS~10DAYSは環境設定編 Progateでプログラミングを打っていましたが、 ここからはローカル（自分のパソコン）でプ...

The post 【初心者】30DAYSトライアルをやってみた④ 環境設定編　8DAYS~10DAYS first appeared on kinoblog.

]]>  

こんにちは、

キノ(@zB75pWavnhDTIxr)です。

 

８DAYS~10DAYSは環境設定編

Progateでプログラミングを打っていましたが、

ここからはローカル（自分のパソコン）でプログラミングをしましょう！

 

エディター（プログラミングに適したメモ帳）を導入するところから始めます。

エディターはかの有名なVSCodeで、プログラマーやエンジニアには必須ですね！

大部分が導入するだけなので、書くことは少ないのですが、

よろしくお願いします。(*´･ω-)b

 

 

DAY8. 『エディタをインストールしよう』

Progateから自立です。ローカル環境でプログラミングしましょう！

 

エディターのいいところは、プラグイン（機能）が多くあるところです。

メモ帳でも開発できるのですが、ミスに気がつかない場合が多く、

エディターは他に候補が出てくるので、スムーズに開発できるというメリットがあります。

 

ショーへーさんのオススメしているプラグインの説明は、アルパカさんがもう説明してくれているので、こちらをご覧ください↓。

 

 

↑上記で載っていないショーへーさんのオススメしているプラグインはこれです。

インデントレインボー
Indent-Rainbow

これは最初、使った感想は「要る？これ」だったけど、要ります！

理由はインデントが分かりやすい。何より見た目が綺麗になる。

と、こんな感じに見やすくなっています。

 

 

DAY9. 『基本のショートカットを覚えよう＋ファイルパスを理解しよう』

作業効率を上げるために、1日１つでいいから

ショートカットを覚えましょう。

 

DAY10.『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』

Google Chromeのデベロッパーツールとは、

右クリックで、でてきた選択肢の下部に「検証」と出てくるはずです。

使い道は、

Google Chromeのデベロッパーツール
・サイトのソースコードが分かる

・模写コーディングしたサイトの間違えを見つける

・崩れないように画面幅を狭めてレスポンシブデザインを確認する

デベロッパーツールは慣れです。

僕は2週間経ってようやく慣れてきたんです。

 

終わりに

そしてフロントエンドエンジニアになるために、これで環境構築完了です。

 

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

The post 【初心者】30DAYSトライアルをやってみた④ 環境設定編　8DAYS~10DAYS first appeared on kinoblog.

]]> https://kinonoteblog.com/programming/30days-visual-studio-code/feed 0 【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7 https://kinonoteblog.com/programming/30days-progate-2?utm_source=rss&utm_medium=rss&utm_campaign=30days-progate-2 https://kinonoteblog.com/programming/30days-progate-2#respond Thu, 18 Apr 2019 03:46:10 +0000 https://kinonoteblog.com/?p=716     こんにちは、キノ(@zB75pWavnhDTIxr)です。 4月11日に、30DAYSトライアルを終わりました！ 次は30DAYSトライアルの2ndを進めています。   今日はPro...

The post 【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7 first appeared on kinoblog.

]]>  

 

こんにちは、キノ(@zB75pWavnhDTIxr)です。

4月11日に、30DAYSトライアルを終わりました！

次は30DAYSトライアルの2ndを進めています。

 

今日はProgate編 DAY5～DAY7について書こうと思います。

下記の通りに進めてみてください！

 

↓詳細はこちらからどうぞ！↓

Progate編

（補足説明です）DAY4    HTML & CSS 中級編最後まで②（absoluteの話）

DAY3に続いてレイアウトを学びます。個人的には最低２～3回やらないと身につかないと思います。

つまずきやすいところはposition : absoluteですね。

absoluteとrelative
「position : absolute＝絶対的な」と「position : relative=相対的な」、これらはセットで考えてください。

基本的にどっちか１つしか使わないのはまれです。

 

これらを使って文字と画像を重ね合わせています。

なぜ、この２つを使うのか。それはスマートフォンやタブレットから見ると崩れちゃうのを防ぐためです。

absoluteは「絶対的」とあるように、例えば、top:0;と指定をとれば、上頂部へ固定されます。

パソコンやスマートフォンなどの画面幅が違うものがあったとしても同じような見た目に見えるんです。

 

marginやpaddingは一見してみるとパソコンだと見栄えが良いのに、スマートフォンで見ると崩れているのが多いんです。

これは、marginやpaddingは「パソコンの余白」に合わせただけで、

スマートフォンやタブレットの余白に合わせたってわけではないんですよ。

 

使い方は、

配置したい文字（画像）をクラスを割り当ててやって、そのクラス名にposition : absoluteを付与するんです。

このまま何もしないとbodyタグを基準に動きますから、そうならないようにposition : relativeを使います。

そして、position : relativeは通常、親要素に使います。

 

hiro pon-programmingさんの動画で詳しく解説しています。↓

 

 

DAY5　 HTML & CSS 上級編まで

重要な概念である「レスポンシブデザイン」、パソコン、スマートフォン、タブレットなどで画面が崩れないように設定をするんです。

メディアクエリは正直、これだけだと身につかないと思います。

これは、何度か模写コーディングをするしか身につかないと思いますね。

bootstrap編で模写コーディングをするので、自分のものにしてください。

 

Progateではresponsive.cssというファイルを作って、普通のcssとは別々に管理してました。

１つのcssファイルを使うのか別々に管理するのか。

これは、別にどっちでもいいです。

僕は１つにした方が見やすいと思ったので、あえてメディアクエリのファイルを作らなかったので…。

 

30DAYSトライアルの2nd、１DAYの課題をやり終えたとき、メディアクエリは泥臭い作業だと感じました。

「自分で見て確認をしながら画面上のバランスを整える」

メディアクエリに正解はないようです。

ただ、自分が見た感覚を信じていくのみです。(*´･ω･`)b

 

DAY6　HTML & CSS 初級・中級道場コースとDAY7　HTML & CSS 上級道場コース 

課題の復習です。正直いって一回では無理でした。

「今まで習ったことをアウトプットする」

これが一番難しい。

 

ヒントを見ても分からなければ、答えを見てもいいと思います。

ただし、自分がどこでつまずいたのか考えるまでは見てはだめです（２分でいい）。

個人的に難所だったのが、「<div>を囲うのにどこまで囲えばいいんだ？」って思ったりしていましたね。

 

余裕がある方はこちら↓（30DAYSトライアルの1stではJavaScriptは取り扱わないので注意！）

ランディングページ（LP)って何？

さて、中級編ではランディングページ（LP)作りました。

LPは企業がユーザー（僕たち）に情報を伝えることために作られています。一言で言うとウェブ上で自社の商品やサービスのチラシです。

そして、クラウドソーシング上で企業がフリーランスエンジニアに向けて発注しています。

下記のサイトがよく知られるクラウドソーシングですね。

クラウドソーシング

ランサーズ

クラウドワークス　

「コーディングのみ」や「html css」と検索すればランディングページ（LP)制作案件があります。

個人的にランサーズの方が見やすかったです。

 

 

終わりに

これでProgate編は終わりです。

 

一度で理解できないはずです。

ちょくちょく戻ってくると思いますので、また再チャレンジしてみてください。

「あなたがつまずいたところはみんながつまずいたところです」を忘れずに

 

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

 

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

The post 【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7 first appeared on kinoblog.

]]> https://kinonoteblog.com/programming/30days-progate-2/feed 0 【初心者】30DAYSトライアルをやってみた② Progate編　DAY1～DAY4 https://kinonoteblog.com/programming/30days-progate?utm_source=rss&utm_medium=rss&utm_campaign=30days-progate https://kinonoteblog.com/programming/30days-progate#respond Mon, 08 Apr 2019 11:30:34 +0000 https://kinonoteblog.com/?p=633   こんにちは、キノ(@zB75pWavnhDTIxr)です。 僕は25DAY、26DAYの課題を勉強中です！ 今日はProgate編を書こうと思います。 下記の通りに進めてみてください！   &nb...

The post 【初心者】30DAYSトライアルをやってみた② Progate編　DAY1～DAY4 first appeared on kinoblog.

]]>  

こんにちは、キノ(@zB75pWavnhDTIxr)です。

僕は25DAY、26DAYの課題を勉強中です！

今日はProgate編を書こうと思います。

下記の通りに進めてみてください！

 

 

↓詳細はこちらからどうぞ！↓

分からない時は？

 

前の記事でも書きましたが

初心者は難しいと思うので、Progateは理解度30~40%でいいですよ。

ただ、「何をやっているのか」分かってていればいいです。

 

僕が思う一番大事なことは、

プログラマーやエンジニアは「どうしてエラーになるのか」「何をやっているのか」

そして、それを上手く言語化して、ググる力（調べる力）だと思います。

 

なぜならプログラミングする時、ネット環境がないなんて有り得ないからです。

分からないときは調べればいい。

まずは、一周すること

それが分かっても分からなくても！

Progate編

 

1DAYS~7DAYSはProgate編

Web制作を始めましょう！

ProgateでHTMLやCSSを勉強し、Web制作の基礎を学びます（一部有料含む）。

Progateはプログラミングしたものが、すぐに両画面で確認できることと、

スマートフォンで学習できることですね。

これで通勤時間のスキマ時間を使って勉強することができるんです。

 

 

DAY1　HTML & CSS 初級編４章まで（初心者は１時間くらいかかるかも）

とっつきにくいのは、

HTMLでは、<a href=”リンクurl”>表示したい文字</a>

CSSでは、class=”sample”ですね。class名は何でもいいのですが、

class名は目印でもあるので分かりやすい名前の方がいいですね。

 

例えば、文字を赤くするときは、

HTMLでは、

赤くなる

 

 

CSSでは、

 .red{

color:red;

}

こう書けば、赤くなります。

もし、クラス名をblueとしたら、混乱しますよね！

だって、color:red;で赤くなるんだもの！

 

DAY2　HTML & CSS 初級編7章までで初級編クリア！

とっつきにくいのは、paddingとmargin、float、<input>ですね。

 

padding……内部の余白

margin……外部の余白

これだけです。僕は内部の余白を広げたいのに、marginをよく使ってしまいます。

でも、結果はすぐに分かるので、間違いを修正してpaddingを代わりに、

と繰り返しやっていくと身についちゃいます！慣れが必要です！

 

floatを理解するには２つ覚えることがあります。

 

１つ目はデフォルトで文字が左上側に置かれること

２つ目はfloatは文字通り「浮く」こと

画面上では2次元だから、見えないんですが浮いているんですよ。

つまり、三次元で考えるんです（横向きに見られたら…）。

 

hiro pon-programmingさんの動画が一番簡潔で分かりやすかったです↓

 

 

他にも１つ紹介しますね。

横並びにしたいなら別にfloatじゃなくていいんです。

floatが理解できる、できない関係なく、こちらをオススメします。

僕も使っています！

 

【CSS】まだfloat使ってる？CSSのFlexboxを徹底解説！

 

<input>、<textarea>はお問い合わせ、ログインなどで使っています。

ちょっと初心者にはとっつきにくいところですが、

中級編でも扱っているので「そんなもんだ」って感じで大丈夫です。

 

 

DAY3　Progate HTML & CSS header中級編3章まで

初級編より難しくなります。

<header>は、ナビゲーショングループ（リンクメニュー）やイントロダクション（前置き）とかに使われています。

 

必ず必要というわけではありませんが、基本的に１つしか使われることはないので、差別化しやすいんですよ。

<header>は<div>と同じようにひとかたまりの範囲として定義する際に使用します。基本的に<div>と同じように考えていれば大丈夫です。

 

 

DAY4　Progate HTML & CSS 中級編７章まででクリア！

opacity、letter-spacingや:hoverやらいろいろ出てきて大変だったと思いますが、

全部覚えようとして詰め込むのは、「挫折の原因」になります。

大事なのは、「どのコードを入力すれば、どんな『現象』が起きるのか」です。

『現象』を上手く言語化できれば、ググってコードを探す方が結構早いんですよ。

 

例）letter-spacingが分からなくとも、『現象』である『文字どうしの間隔』を言語化できればいい。

あとはググって目的にあった記事参照すればいいですね！

【CSS】letter-spacingで字間を調整する方法まとめ

終わりに

 

初心者もプログラマーもやっていることはそう変わりません。

 

プログラミング能力を上げる秘訣は？

と聞かれたら、

僕は「ただググる」と答えます。

その際、なるべく新しい情報がいいですね。(๑•̀⌄ｰ́๑)b
次はこちら↓
【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7
では、また

お疲れ様でした。

ここまで読んでくれてありがとうございました。

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】

The post 【初心者】30DAYSトライアルをやってみた② Progate編　DAY1～DAY4 first appeared on kinoblog.

]]> https://kinonoteblog.com/programming/30days-progate/feed 0