hengineer(@tim_daik)

<h2 id="h850d2c05a8">Git GitHubを活用した開発を通して身に着けよう！</h2><p>Git GitHubを使う理由、方法はだいたい分かりましたでしょうか？<br>今回はいよいよGit GitHubを実際に使ってみましょう！</p><p>また参考に私が実際に作業したレポジトリのリンクを貼っておきます。</p><p><span class="blog-card">https://github.com/hengin-eer/tutorial-web-dojo</span></p><h2 id="hd2a56d7ce9">セットアップ</h2><h3 id="h3fcdf6fb9f">GitHubの準備</h3><p>まずリモートレポジトリを作成しましょう！<br>GitHub上でレポジトリを作成しようとすると、以下のような入力が求められます。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/6a735ee9618647aa9dec0e8a501962f7/image.png" alt="" width="1679" height="1371"></figure><p>レポジトリの名前は任意で構いません。今回はGitHubの入門ですので、「start-github」などがいいかと思います。<br>Descriptionは説明ですので、これも任意入力になります。入力しているとレポジトリが増えてきたときに見分けがつきやすいです。<br>次に囲っている3つの入力はプロジェクトに初期設定ファイルを追加するか否か問われています。<br>それぞれ<code>README.md</code>はレポジトリの説明などを記入できるテキストファイル、<code>.gitignore</code>はリモートレポジトリにアップロードしたくないファイルを記述する設定ファイル、<code>license</code>はレポジトリのコードを無断で使用するのを禁止したり逆に許可するライセンスを明記するファイルのことでライセンスを選択できます。</p><p>とりあえず今回は特に設定ファイルは追加せずに作ってみます。<br>レポジトリを作成すると以下のようになると思います。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/950a8c8a76184360b65d555d1287172a/image.png" alt="" width="1920" height="1581"></figure><p>赤線で囲っているアイコンをクリックしてレポジトリのリンクをコピーしといて下さい。</p><h3 id="h957acd1b47">VScode（ローカル）の準備</h3><p>GitHub側のセットアップは完了したので、ローカルでの準備を進めていきましょう！</p><p>まず任意のフォルダを作成してください。そしてVScodeを開きます。<br>VScodeを開いたら<code>Ctrl + @</code>でターミナルを開きます。ここで以下のコマンドを次々に入力してください。</p><pre><code class="language-shell">git --version // Gitがインストールされているか確認
git init // Gitの初期化
git remote add origin https://github.com/ユーザー名/レポジトリ名 // originという名前でGitHubのレポジトリと接続
git remote -v // リモートレポジトリが存在するか確認できる</code></pre><p>3つ目のリモートレポジトリ（GitHubのレポジトリ）との接続では、レポジトリのリンクを入力する必要がありますが、先ほどコピーしているリンクを<code>Ctrl + v</code>で貼り付ければOKです！<br>これでセットアップは終了になります。</p><h2 id="hc021663ede">いざ実践</h2><h3 id="h639eecef88">ファイルを追加する</h3><p>セットアップは終了したので次はファイルを追加してみましょう！<br>VScodeのサイドバーからファイルを作成してみます。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/9b532977cde2403587d4d71c546ab05a/20230822192821.gif" alt="" width="1901" height="999"></figure><p><code>index.html</code>が作成出来たら内容を追加してみましょう。</p><div data-filename="index.html"><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;GitHubの入門だー!!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;main&gt;
        &lt;h1&gt;GitとGitHubのチュートリアルをしています!!&lt;/h1&gt;
        &lt;p&gt;始めの初めの第1歩!&lt;/p&gt;
    &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></div><p>ファイルを編集出来たらVScodeのブランチアイコンをクリックしましょう。<br>するといろいろ表示されると思います。<br>ここでファイルをcommitしたりpushできるので、ここで操作を完結させましょう。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/f26f646cba954fc8b31dd34535a84941/20230822193559.gif" alt="" width="1901" height="998"></figure><p>ちなみにコマンドで操作するのであれば、以下のようになります。</p><pre><code class="language-shell">git add index.html // ファイルをステージングする
git commit -m &quot;feat: 始めの第一歩&quot; // -mでメッセージと共にコミットする
git push origin master // masterブランチでローカルからリモートに変更を反映する</code></pre><p>それでは次にブランチを新しく追加して別の作業をしてみましょう。</p><p>ブランチ名は何でもいいですが、<code>style.css</code>を追加したいので、<code>feature/add-style-css</code>とでもしましょうか。</p><pre><code>git switch -c feature/add-style-css</code></pre><p><code>switch -c ブランチ名</code>で新しくブランチを作成してからそのブランチに移動することが出来ます。すでにブランチが存在する場合は<code>-c</code>を入力しないように注意しましょう。<br>余談ですが、featureは機能を追加する際に使用することが多いです。</p><p>それでは<code>style.css</code>を作成してコマンドにて操作してみましょう。</p><div data-filename="style.css"><pre><code class="language-css">h1 {
    font-size: 3rem;
    color: red;
}

p {
    font-size: 1.5rem;
    color: blue;
}</code></pre></div><p>そしてリモートレポジトリに変更を反映していきます。</p><pre><code>git add style.css // ファイルをステージング
git git commit -m &quot;style: スタイルを追加しました&quot;</code></pre><p>ここで<code>index.html</code>も編集してみましょう！</p><div data-filename="index.html"><pre><code class="language-css">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;GitHubの入門だー!!&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;main&gt;
        &lt;h1&gt;GitとGitHubのチュートリアルをしています!!&lt;/h1&gt;
        &lt;p&gt;始めの初めの第1歩!&lt;/p&gt;
        &lt;p&gt;style.cssも追加したで!&lt;/p&gt;
        &lt;p&gt;Gitにもだいぶ慣れてきたんやで!&lt;/p&gt;
    &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></div><p>それではcommitからpushまでしちゃいましょう！</p><pre><code class="language-shell">git add index.html
git commit -m &quot;ファイルを編集してみた&quot;

git push origin feature/add-style-css</code></pre><p>ここまで順調に来たら、GitHubに戻って下さい！</p><h3 id="h8ce9dc5fe2">GitHubでPRを作成してmergeする</h3><p>ここからはGitHub側で操作していきましょう！<br>以下の画像のように表示されていると思いますので、Pull Request、略してPRを作成していきましょう</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/f14008bbbff340dd9da2fe83604e3e76/image.png" alt="" width="1898" height="983"></figure><p>PR作成の画面に映ると以下のようにPRを作成するためのフォームがありますので埋めてみましょう！<br>markdown記法にも対応しているので使える人は使ってみましょう。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/10daf7c085224e2f8d445f08f7cd4b1b/image.png" alt="" width="1920" height="2423"></figure><p>また下にスクロールすると、ファイルの変更点が簡単にわかるので、下の変更箇所を参考にしながらPRを作成するといいでしょう。</p><p>PRが作成出来たら、いよいよmergeの段階です。このmergeが終わればfeatureブランチからmasterブランチへファイルの変更点が同期されますので、ミッション達成です。</p><p>今回は一人で管理しているため不用にはなりますが、チーム開発の時には、コードをこのままmergeしても良いのか第三者がチェックをする、<strong>レビュー</strong>を行います。<br>File changesの所からreviewできますし、PR画面トップの右側にある、Reviewersの所からレビューする人間を指定することも出来ます！<br>チーム開発の時には第三者のチェックを通したほうが良いため、mergeするにに誰かのレビューを通すようにするブランチルールを設定できます。</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/19329639154a4e97ae51dac34fda8fc8/image.png" alt="" width="1898" height="983"></figure><p>今回は特にレビューもないのでこのままmergeしてしまいましょう！！</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/d8b4309928c24e17b5eeb0504dcc3871/image.png" alt="" width="1898" height="983"></figure><p>mergeしたのでmasterブランチに変更が反映されているはずです！<br>確認してみましょう！！</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/b6b630f3e12d4ad0975edfb1dfcd7639/image.png" alt="" width="1898" height="983"></figure><p>いけてますね！</p><p>GitHubを活用した開発の流れはだいたい分かったでしょうか？<br>一人で開発する分にも変更履歴を追えたり、プロジェクトの管理もできるので重宝しますが、やはり効力を発揮するのはチーム開発に於いてですね。</p><p>これでチーム開発は完璧！！というわけではないですが、最低限これができれば良いでしょう。<br>ということで今回はこれで終わります。お疲れさまでした！</p>

2. 実際にGit GitHub開発を体験してみよう

<p>どうも、<a href="https://twitter.com/tim_daik" target="_blank" rel="noopener noreferrer nofollow"><u>@tim_daik</u></a>です</p><p>今回はWeb制作がはかどる便利ツールを3つご紹介していきます</p><h2 id="h80dd8cff23">有名ブランドで使われている色がまるわかり！「BrandColors」</h2><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/b3b71436d3f84c1ba833616c51a62b3d/image.png" alt="" width="1824" height="972"></figure><p>1つ目は<strong>BrandColors</strong>です</p><p>名前の通りこのサイトでは有名ブランドのロゴイメージなどで使われている色の一覧を調べることが出来ます</p><p>各ブランドをサイト上部の検索欄から調べることも出来ます</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/53bfb008420c43d69df31c6ecdec374c/image.png" alt="" width="1824" height="972"></figure><p>このサイトの便利ポイントは各ブランドのカラーパレットをクリックするだけで、そのカラーコードをコピーすることが出来る点です</p><p>カラーコードは16進数表記になっていますので別の表記に変えたい場合は次に紹介するサービスを利用してみてもいいかもしれません</p><h2 id="hff56152bd9">色を好きにジェネレート、色に関するツールが集まった「HTML Color Codes」</h2><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/3289f8fb9524428d836b43a2f69e827d/image.png" alt="" width="1824" height="972"></figure><p>次に紹介するのは<strong>HTML Color Codes</strong>というサイトです</p><p>このサイトでは画像のように私たちが操作することによって色を好きにジェネレートすることが出来ます</p><p>また生成されたカラーコードは16進数・RGB・HSLなどそれぞれの形式でコピーすることが出来ます</p><p>またこのサイトではカラーコードを別の形式に変換してくれる「コンバーター」もあります</p><p>かなり多くの形式に対応しているみたいなのでなかなかすごいですね</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/bdf99250fbae44fa94af40126d9f6099/image.png" alt="" width="1825" height="972"></figure><p><a href="https://htmlcolorcodes.com/" target="_blank" rel="noopener noreferrer nofollow"><span class="blog-card"><u>HTML Color Codes</u></span></a></p><h2 id="h3525972a4f">配色に迷ったらコレ一択！「Color Hunt」</h2><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/33cce0fc4b514a23a2f0214b17af544a/image.png" alt="" width="1824" height="972"></figure><p>最後にご紹介するのが<strong>Color Hunt</strong>です</p><p>このサイトには様々なテーマごとに４つの配色セットが投稿されています</p><p>ビンテージ・レトロ・Warm・Dark・キッズ・ハロウィーンなど様々なテーマがあるので、逆に悩んでしまいます</p><p>配色に迷ったとき、私のおすすめはPopularのAll timeから選ぶのがいいかなと思います</p><p>またのサイトの便利ポイントとして、カラーコードをクリックすることでそのままクリップボードにコピーすることが出来ます！</p><figure><img src="https://images.microcms-assets.io/assets/d17f149493644117b80f919e1dbc928f/46b51b7327a74541bbc45e365a5db307/20230304134159.gif" alt="" width="1652" height="911"></figure><p>また、好きな配色セットはコレクションに追加することも出来ますので、好みの配色を何パターンか持っておけるのもポイント高いですね</p><h1 id="ha214098e44">まとめ</h1><p>今回はWeb制作がはかどるツール3選のカラー篇をお届けしました</p><p>この他にも便利ツールをご紹介していく予定ですので楽しみに待っていてください！</p>

【カラー篇】Web制作がはかどる便利ツール3選

#2 VScodeのインストール 基本設定と拡張機能の追加

<h1 id="hda077f9ccf">Web道場へようこそ</h1><p>Web道場では初心者が自分のウェブサイトを作れるようになるためのコースを用意しています</p><p>このチュートリアルコースではウェブサイトを作るための準備、実際の製作、サイトの公開まで一気に行います</p><p>初心者にとってはボリュームが多いかもしれませんが、それよりもウェブサイトを作る楽しさが勝ることかと思います</p><p>Web道場の全体のコースでは以下の手順でウェブページ作りを学びます</p><ul><li>チュートリアルコース：ウェブサイト製作に必要な知識理解と準備、初めてのウェブサイト制作から公開まで</li><li>HTML/CSS入門コース：HTML/CSSの学習をしながら本格的なサイトを製作する</li><li>JavaScriptコース：上で作ったサイトにJavaScriptで機能を追加していき、ウェブサイトを完成させる</li><li>：Sass/Node.jsを用いたモダンな開発環境で新たなウェブサイトを製作する</li></ul><p>今後新しいコースの追加を検討していますが基本的にここまでやりきれたのであれば、中級者と名乗っても問題ないでしょう</p><p>現代においてウェブサイト製作を営利目的のみでやることなく、ウェブサイト製作を楽しんでやってもらえたら幸いです</p><h2 id="h49cc5bf099">学習の進め方について</h2><p>Web道場での学習の進め方を簡単に説明します</p><h3 id="h3f7670c4d2">Web道場の活用方法</h3>

Web道場へようこそ

HTML#2 とりあえず書いてみよう

<p>HTML/CSSチュートリアルへようこそ！</p><p>ようやく初めてのサイト作りを始めます</p><p>もしかしたらこれがあなたにとって初めてのサイト作りかもしれません</p><p>ついていけるか不安で仕方が無い？ 心配ありません</p><p>どんな優れたプログラマーも最初は初心者です</p><p>そんなことよりも初めてのサイト作りを楽しんでいきましょう</p><h1 id="hd77a4e2aaf">今講座で学ぶこと</h1><p>この講座では以下のようなものを取り扱います</p><ul><li>HTML</li><li>HTMLの概要</li><li>基本的なタグの使用</li><li>CSS</li><li>CSSの概要</li><li>テキストの修飾</li><li>余白の使い方</li><li>要素の並べ方</li></ul><p>双方の基本的な情報をかるく学習してます</p><p>そのあとサイトを制作をしながら身に着けていきます</p>

Category

Blog