見出し画像

スパルタコーディングクラブ　短期集中プログラミングコース　1週目

jonchon

スパルタコーディングクラブ　短期集中プログラミングコース　１週目
プログラミングノートを書きます！


ウェブブラウザの原理を理解する

ウェブサイトのハッキング
右クリック > 検証 > デベロッパーツールが開く
→  ブラウザに表示されている文字を書き換えることができる

ブラウザ = リクエストを送り、返ってきたもの*1 を人間が読める形にして表示する
だから、、、
・デベロッパーツールで書き換えができる
・ネットに接続していなくても表示ができる（既CSS（装飾）、JavaScript（動き）

リフレッシュ = 再度リクエストを送ること
なので、、、
リフレッシュをするとデベロッパーツールで書き換えた文字は元通りになる

開発環境の設置

Pycharm = IDE*2 のひとつ

*2 IDE：エディタ、コンパイラ*3 、デバッガ等が、ひとまとめになった開発環境、総合開発環境
*3 コンパイラ：ソースコードからプログラムを生成する

設置方法
1）Pycharmのインストール
2）JetBrainsのアカウント作成
3）Pycharmでログイン
4）Pycharmで日本語パッケージのダウンロード

HTML

head：タイトル（タブの部分）やアイコン等、body以外のもの
body：内容になる部分

※headの中は記述する順番に決まりはない。何が先に書いてあっても正しく動く。

タグ
div：中に入れたタグをグループ化できる
p：段落を作る、前後に少し隙間ができる
ul：黒丸の箇条書き
ol：数字の箇条書き
li：箇条書きの各項目。ul、ol 共通
h1：必ずサイトに一つ入れる。google検索はh1タグを見て検索結果に表示している
span：タグの中の特定の文字を変更する
hr：ハイパーリンク
img：urlから画像を引っ張ってくる
input：インプット
button：ボタン
textarea：テキスト入力。入力欄の大きさを手動で変更できる

CSS

text-align：文字を真ん中に持ってくる（横方向の位置指定？）
margin：タグの外側の余白を指定する
　auto：余白を最大にする（左右同じ余白にしたい場合は、両方にautoを指定する

padding：内側の余白を指定する
display-flex：中身を整列させる


/* 囲ったテキストや要素を中央に揃える */
/* 出来ることは似ているが、結果には多少差が出る */

/* 1 */
text-align: center;
 
/* 2 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 背景を透明にする */
background-color: transparent;
/* 画像挿入 */
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position: center; /* center：画像の真ん中を切り取る */
background-size: cover; /* cover：cssを指定しているタグの大きさに合わせる */
/* 画像を暗くする */
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

Google fonts

https://fonts.google.com/

1）使いたいフォントをクリック
2）スクロールして「select」ボタンをクリック
3）Use on the webでimportを選択
4）import文とCSS rules to specify familiesをコピー
5）コピーしたものをcssに記述

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap');
* {
    font-family: 'Kiwi Maru', serif;
}

Bootstrap

https://getbootstrap.com/docs/5.3/getting-started/introduction/

他人が作ったcssをまとめてあるサイト、CSSのライブラリ
（Bootstrap以外にも様々ある）

使い方
1）head部分にBootstrapが使えるようにするコードを記述（詳細不明）
2）Bootstrapから使いたいもののコードを探す
3）使いたい場所にコピペする

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css>" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script>
    <script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>スパルタコーディングクラブ</title>
</head>

<body>
    <h1>Bootstrapを使ってみましょう！</h1>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">記録</button>
        <button type="button" class="btn btn-outline-dark">閉じる</button>
    </div>
</body>

</html>

GitHub

htmlファイルをアップロードするときは、必ずindex.htmlにする
GitHubが決めたルールらしいが、なぜ…?

GitHubのリポジトリ*4 を配布する

ソースコードをアップロードする
1）[ Create repository ] をクリック
2）リポジトリの名前を付ける　→　これがサイトのURLになる
3）[ Create repository ] をクリック
4）uploading an exisiting file のリンクをクリック
5）アップロードするファイルを選択 or ファイルをドロップ
6）[ Commit changes ] をクリック
7）ファイルアップロードが完了

Branchを変更してURLを生成する
1）Settings > Pages
2）Branch を None から main に変更　→　Save をクリック
3）リポジトリのトップページに戻る
4）Settings > Pages　→　リンクができている！！
5）リンクを踏むと。。。配布完了！！！

*4 リポジトリ：日本語で貯蔵庫

結婚式のモバイル招待状はこの要領で配布が可能！

配布したコードを編集する

1）リポジトリのトップページから Code をクリック
2）編集したいファイルを選択
3）ファイルが開くので、右上のえんぴつマークをクリック
4）コードの編集
5）[ Commit changes ] をクリック
6）ポップアップで編集内容についての補足内容などの登録が可能（？）
7）[ Commit changes ] をクリック
8）編集完了！！

自身の課題

リンク：https://jonchon-u.github.io/movie_recommend/

やったこと
・授業でやった内容を土台とする
・選択ボックスの追加（基本講義の課題と同様）
・Bootstrapから興味のあるコンポーネントを使用

感想＆反省

・おそらくショートカットキーを使ってページを移動させて説明されているが、それは何だ…?

・「タグは前後に付けなきゃいけないものがあるので、、」（4, 2:56）
→　「一つの段落にしたい部分を囲う」という方が概念的にも適切なのでは…?
　　タグは基本的に始めと終わりの2個セットがデフォルトで、例外的に1つのタグで完結するものがある。という認識でいた
　　今後の授業で深く触れるのかもしれないが、タグの概念は全くの初心者でも知っている前提で進めている

・vscodeとショートカットキーが違うので、いつものように操作しようとするとてこずる…泣
・英語の綴りミスにも波線出してくれる天才

・text-align 韓国語読みだとテキストオーラインになるようだが、日本の会社だとテキストアラインと読む人が多い気がする…
padding パディング も然り… 

・コメントアウトは場所によって書き方が違う（9, 1:40）
→　正しくは、「言語によって違う」ではないのか…?

・notionにコードの全体が載っているのは非常にありがたい…神

・学習の進め方として、
　　　1回目は普通～1.5倍速で視聴
　　　2回目は普通～0.7倍速で視聴＆一緒に作業
がよさそう

・すべてを丁寧にやろうとか、上手くまとめようと意識しすぎて全体の受講時間が長くなってしまった…2週目はある程度の諦めを持って受講＆ノート整理をしたい

・技術面では初知りなことは少なかったが、GoogleフォントやBootstrapなどのツールを知らなかったので勉強になって面白かった。あと、GitHubを丁寧に教えてもらうのが初めてだったので感動した。

この記事が気に入ったらサポートをしてみませんか？