あぱれる男子のつぶやき

プログラミングを奮闘中

【保存版】Bootstrapの学習方法まとめ

こんにちは、マサです。1月の下旬頃からBootstrapを学習し、その過程と学習のまとめを記事にしてきました。前回の記事できりのいいところまで進んだので、次の言語の学習に進む前に、自分なりのBootstrap学習ロードマップをまとめておこうと思います。 Boots…

【Bootstrap】架空ECサイト作成の手順⑤

今回で最後になります!さっそく前回の続きからいきましょう。 Bootstrapで架空サイトを作成してみる footer menuのデザイン footerのデザイン まとめ Bootstrapで架空サイトを作成してみる ①の記事では、全体像の把握とヘッダーからナビまでのデザイン。②の…

【Bootstrap】架空ECサイト作成の手順④

今回でメインの部分は終わりです。 さっそく前回の続きからいきましょう。 Bootstrapで架空サイトを作成してみる Section5のデザイン Section6のデザイン まとめ Bootstrapで架空サイトを作成してみる ①の記事では、全体像の把握とヘッダーからナビまでのデ…

【Bootstrap】架空ECサイト作成の手順③

では、さっそく前回の続きからいきましょう。 Bootstrapで架空サイトを作成してみる Section3のデザイン Section4のデザイン まとめ Bootstrapで架空サイトを作成してみる 前々回の記事では、全体像の把握とヘッダーからナビまでのデザインを、前回の記事で…

【Bootstrap】架空ECサイト作成の手順②

では、前回の続きからいきます。 Bootstrapで架空サイトを作成してみる Section1のデザイン Section2のデザイン Cardsの使用 Buttonsの使用 Stretched linkの使用 おわりに Bootstrapで架空サイトを作成してみる 前回の記事では全体像の把握とヘッダーからナ…

【Bootstrap】架空ECサイト作成の手順①

簡単にトップ画像を作ってみました、マサです。以前Bootstrapの学習をブログにまとめましたが、その後にそれらの知識を応用しつつ、アウトプットとして3日ほどで架空サイトを作りました。 今回はそのときの手順や気をつけたことをまとめようと思いこの記事を…

【HTML/CSS】学習に役立つツールと効率的なやり方④【その他編】

さて、今回で最後です。HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。 HTML/CSSの学習に欠かせないツールとは 前回までの3回の記事でプログラミング学習する方法として、以下を挙げました。 学習サイト 動画 参考書 スクー…

【HTML/CSS】学習に役立つツールと効率的なやり方③【参考書編】

さて、今回も、HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。 HTML/CSSの学習に欠かせないツールとは 前回2回の記事でプログラミング学習する方法として、以下を挙げましたね。 学習サイト 動画 参考書 スクール その他 以…

【2020.01】運営の途中経過を振り返ってみる

Twitterとブログとプログラミングを続けている今現状。それぞれの途中経過を記すために個人的に振り返っていこうと思います。。 ブログ 現状、実績がどんなものか 数字がどんなものか見てみます。 未だに見方がわかっていない。笑とりあえず、はてなブログを…

【HTML/CSS】学習に役立つツールと効率的なやり方②【動画学習編】

マサです。今回も、HTML/CSSを勉強するときに役立った学習ツールをまとめてみました。 HTML/CSSの学習に欠かせないツールとは 前回の記事でもプログラミング学習する方法として、挙げました。 学習サイト 動画 参考書 スクール その他 以前も書きましたが、…

【HTML/CSS】学習に役立つツールと効率的なやり方①【学習サイト編】

マサです。今回は、HTML/CSSを勉強するときに役立った学習ツールをまとめてみました。 HTML/CSSの学習に欠かせないツールとは 最近はプログラミング学習する方法が色々とありますよね。 学習サイト 動画 参考書 スクール その他 大まかに分けるとこんな感じ…

【HTML/CSS】Progateでの勉強が終わったらやること4選【爆速で成長します】

前回の記事で、プログラミングを始めるのに とりあえず1ヶ月 Progateから始める(HTML/CSS) といった内容について主に書きました。www.appatwi.com では、1ヶ月続けた後、具体的にどうすれば良いのか?ツールを紹介されている方は多いですが、それ以外のこと…

【ゆっくり継続しよう】プログラミングを勉強しようか迷っているあなたに、初心者の私がオススメをしてみる。

継続的にプログラミングの勉強をしてます、マサです。 プログラミングって最近よく聞きますよね? 今回は、近年のプログラミング事情と始めようか迷っている方への敷居を下げるためにこの記事を書きました。

【Bootstrapその⑫】グリッドシステムを自由に使ってみる【学習積み上げ】

勉強しだしたらつい深掘ってしまう、マサです。Bootstrapもほぼ終盤まで来ました。 前回の記事でBootstrapのグリッドシステムについて細かいところまで深堀りましたので、今回はもう少し実践で使える機能についてピックアップして紹介してみます。www.appatw…

【Bootstrapその⑪】グリッドシステムについてもっと深掘ってみた【学習積み上げ】

グリッドレイアウトを更に深堀りしました。応用的な内容です。

【Bootstrapその⑩】Components系のカスタムⅦ~その他~/Utilities系のカスタム【学習積み上げ】

Componentsのまとめもこれでラストになります、マサです。これまでのⅠ~Ⅵまでのまとめで、Components系の機能は計22個紹介してきました。あと2つあるのですが、カテゴリ分けが難しかったので個別で紹介しつつ、Utilitiesについても触れていきます。 ではいき…

【Bootstrapその⑨】Components系のカスタムⅥ~フォーム系の機能3選~【学習積み上げ】

引き続きBootstrapの学習を進めていきます、マサです。Components系のまとめもこれでほぼラストです。長かった、、 今回はフォームについてのまとめです。Bootstrapのフォームは簡単に実装できるので、他のComponentsは使わずともこれだけでも使う価値はある…

【Bootstrapその⑧】Components系のカスタムⅤ~ページ遷移系の機能3選~【学習積み上げ】

引き続き、Bootstrapの学習を積み上げています、マサです。 今回はページ遷移時に使える便利機能のカスタマイズについてまとめました。ページ遷移の定義としては、そのページ内で他のリンクボタンを押したときのデザインや、スクロール時に使えるちょっとし…

【Bootstrapその⑦】Components系のカスタムⅣ~ナビ系の機能3選~【学習積み上げ】

引き続きBootstrapの学習中です、マサです。Components系のまとめも終わりに近づいて来ました。 今回はナビやヘッダーに使える機能についての紹介です。 ではいきましょう。 Components系のカスタム ナビ系に使える機能とは おわりに Components系のカスタム…

【Bootstrapその⑥】Components系のカスタムⅢ~デザイン系の機能3選~【学習積み上げ】

引き続き、Bootstrapの学習を進めていきます、マサです。 前回同様、Components系に関するカスタムについてのまとめです。https://www.appatwi.com/entry/2020/01/21/programming_bootstrap_4-2_componentswww.appatwi.comwww.appatwi.com 今回はデザインと…

【Bootstrapその⑤】Components系のカスタムⅡ~ボタン系の機能6選~【学習積み上げ】

Componentsは色々種類があって便利だなぁと感じています、マサです。今回はComponent系のカスタムⅡとして、ボタンの装飾やボタンのデザインに関する機能について触れていきます。 ちなみに前回はユーザーの注意を引きたいときに使えるデザインカスタマイズの…

【Bootstrapその④】Components系のカスタムⅠ~アテンション系の機能4選~【学習積み上げ】

マサです。前回のContentに続いてComponents系も触れていきましょう。www.appatwi.com 種類がめちゃくちゃ多いので、恐らく何個かに分けて書くことになると思います。本当にそうなりました。タイトルにアテンション系と書きましたが、この記事ではユーザーの…

【Bootstrapその③】どんな機能があるか / Content系のカスタム【学習積み上げ】

引き続きBootstrapを勉強中、マサです。 前回までの2回の学習記事で、Bootstrapがどんな機能を備えているのか、またグリッドや余白の扱い方がとても便利でメリットがある、ということを書いてきました。www.appatwi.comwww.appatwi.com では、Bootstrapは他…

【Bootstrapその②】グリッドシステムについて【学習積み上げ】

引き続き、Bootstrapの学習をしてます、マサです。今回はグリッドシステムについてまとめておきました。学習としてはもう少し進んでいますが、 contentやcomponentsまでやると量が多くなりそうなので、次回の記事にします。サイドバーから色々選べるんです。…

【Bootstrapその①】基本的な使い方~特徴からcontainerまで~【学習積み上げ】

最近、ここの最初の一言で書くネタがなくなってきました、マサです。今日から本格的にブログで勉強内容発信をやっていこうと思います。元々は、勉強した内容を定着させるためのアウトプットとしてブログを初めたわけですからね。ブログ×勉強内容はノートに書…

【超簡単】パソコンの画面をスクリーンショットや録画する方法

マサです。プログラミングの勉強で成果を残したり、Twitterで報告したりするのはアウトプット&モチベーションアップには最適、といった記事を以前書きました。www.appatwi.com私も動画や画像で成果物をアップすることが多いですし、いろんな方に反応してい…

【超初心者向け】GitHubを使ってみる③ ~Netlifyで公開してみよう~

www.appatwi.comwww.appatwi.com さて、前回まででGitHubにpushできたので、今回はそのファイルを公開する方法を見ていきます。これは本当に簡単なのでサクッと終わらせましょう! GitHubのリポジトリを公開する 公開するには ホスティングサービスについて …

【超初心者向け】GitHubを使ってみる② ~実践してみよう~

www.appatwi.com さて、前回の記事でGithubとは何かについて触れましたが、概要だけは何となく理解していただけたでしょうか?そして、そのままProgateをやっていただいたのであればターミナルの使い方についてもざっくり理解できたかと思います。ですのでこ…

【超初心者向け】GitHubを使ってみる① ~まずは流れを知ろう~

GitHub何となく、名前だけは知っていたというだけのド素人、マサです。GitHubってめちゃくちゃ英語だらけですよね。初見で、「うわ、ハードル高そう、、」と感じた方は私以外にもたくさんいることでしょう。日本語訳があると使いやすいのになあ、と思いつつ…

【効果はあるのか】早起きの方法とメリットとデメリット

最近は毎日、朝活を頑張っています、マサです。「早起き」難しくないですか? 私は学生の頃、低体温症で本当に朝起きられないことが多く、 一限目だけ欠席するなんてこともまちまちでした。やはり、3大欲求のひとつ「睡眠」には基本的に勝てないですよね。 …