What's New Qiita

20191125のHTMLに関する記事は9件です。

  • 投稿日：2019-11-25T20:43:00+09:00

初心者によるプログラミング学習ログ 168日目

100日チャレンジの168日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

168日目は

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T19:49:02+09:00

うちの猫のサイト作ってみました。

暇つぶしに、うちの猫のサイトをgithubに挙げてみました。
サイトのURIはこちらです。
背景のアニメーションはVegas.jsを使っています。
qiita_投稿用_2-compressor.gif
サイトのリポジトリはこちらです。混じり物はありません。(∩´∀｀)∩
うちの猫、ヒマワリです（あぁ、きゃわたん
この記事を観て頂いた方、腕に自信がある方、「お前よりいいぺっとサイト作ってやんよ( ﾟДﾟ)」とノッて頂けると凄く嬉しいです。
※どんな子を出汁ｹﾞﾌﾝｹﾞﾌﾝ、題材にしても構いません

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T19:07:43+09:00

curlで取得したウェブのソースコードに色を付けたい

iPadでコーディングをしているとブラウザからソースを確認できないため不便です。
ソースを見る専用のアプリもあるようだけど、アプリを入れずにどうにかならないかと模索しました。

対象はiPadからリモートでLinuxに入って作業するような人です。
※iPadのプログラミング環境構築の話はこちら
https://qiita.com/shuuuta/items/7a3f3801e0209f9ad5ac

コマンドの流れ

curlで取得してsource-highlightで色つけてlessで見ます。

source-highlightをインストール

source-highlightが必要なのでまずはインストール。aptなら以下で。

$ sudo apt install source-highlight

使ってみる

コマンドはこんな感じ。

curl -s https://qiita.com|source-highlight --failsafe -f esc --line-number -s html|less -R

オプションはこんな感じになっています。

  • source-highlight
    • -f esc: エスケープシーケンスを使って色を表現。
    • -s html: ハイライトの種類をhtmlに指定。
  • less -R: カラーエスケープシーケンスを読み込む。

関数にしておくときっと便利

~/.bashrcにこんな感じで書いておくと都度長々書かなくてすみますね。

.bashrc
function websource {
  curl -s $1|source-highlight --failsafe -f esc --line-number -s html|less -R
}

websource https://www.yahoo.co.jp

D2D41134-A51C-4731-9E31-CB078E14D286.jpeg

ちゃんと色分けされて取得できました。

ソース表示と開発者ツールをお願いします

ブラウザのソース表示とウェブインスペクタがiPad OSで実装されたらいいなぁと思っていましたが、残念ながらきませんでしたね。
実装される気配もないですが、この2つさえ使えればあとはフロントエンド制作もなんとかなりそうなんだけどなぁ。
appleさんよろしくお願いします。

[追記] batコマンドを使う方法

コメントでbatというコマンドを教えていただきました、ありがとうございます。
https://github.com/sharkdp/bat/blob/master/doc/README-ja.md

githubから落としてインストールしたら

curl -s https://qiita.com|bat

でハイライトされたコードが見られます。
7F3A967A-3826-44F1-A021-82A97FB11675.jpeg
デフォルトのカラーはこっちの方が好みだなぁ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T18:09:45+09:00

CSSで文字列を...で省略する

文章が超絶に長い時、
どうしても省略したい時。

設定するCSSは以下。

style.css
.short_object {
    width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* Opera9,10対応 */
  }

上記のshort_objectを省略したいタグに設定するだけ。

index.html
<h4 class="short_object">オラオラオラオラオラオラ！!!!!!!!</h4>

出力結果

オラオラオ...

以上。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T16:05:25+09:00

Hamlの基本箇所についての復習④（ネスト）

はじめに

飽きもせずHamlの基礎について書いていきます。
今回はクラスのネストについてです。

実行

例えば、htmlで次の様に書かれているとします。

<div ="wrapper">
 <div ="top">
 </div>
 <div ="down">
 </div>
</div>

wrapperという大きなクラスがあり、その中にtopとdownという小さなクラスが二つあります。
このように親要素・子要素があるhtmlファイルだと、ちょっとした書き間違えが起こります。例えば次のようなものです。

<div ="wrapper">
 <div ="top">
 <div ="down">
 </div>
</div>

これは<div ="top">の閉じタグがない状態です。これだとCSSがちゃんと適用されないなどのエラーが起きます。
単純なミスですが、意外と気づきにくく、エラー解決まで時間を要することも少なくないです。

しかし、Hamlを使えばこの問題を多少なり解決することができます。
前述のコードをHamlで書き直すと次のようになります。

.wrapper
  .wrapper__top
  .wrapper__down

htmlよりも短く書けたのが分かると思います。
一番わかり易い違いは閉じタグがないことです。
クラス名を書いた後に、本文を書くだけでオブジェクトが作れます。
これなら閉じタグを書き忘れた事によるエラーが起きえません。

もう一つはクラスの書き方です。
htmlでは、親要素には親要素のクラスのみ、子要素には子要素のクラスのみを書いていましたが、
Hamlでは子要素には親要素を含めたクラスを書きます。
書き方は.親要素のクラス名__子要素のクラス名と書きます。間に_（アンダーバー）を二つ続けて書きます。
上記のコードだと、親要素がwrapper子要素がtop,downなので、

  .wrapper__top
  .wrapper__down

と書きます。
また、子要素は親要素から半角2文字分のインデントをつけます。
そうしないとエラーが起きて、ビューが表示されません。
これにさらに子要素を追加する、例えばtopの子要素としてright,leftをつける場合は、

.wrapper
  .wrapper__top
    .wrapper__top__right
    .wrapper__top__left
  .wrapper__down

という風に書けます。
ちなみに、これをhtmlで記述すると

<div ="wrapper">
 <div ="top">
  <div = "right">
  </div>
  <div = "left">
  </div>
 </div>
 <div ="down">
 </div>
</div>

となります。

注意点としまして、例えば次のように途中のクラス名が間違っていると不具合が起きます。

.wrapper
  .wrapper__top
    .wrapper__tap__right
    .wrapper__tap__left
  .wrapper__down

子要素のクラス名で、親要素のクラスがtopにも拘わらずtapと誤って記述されています。
こうなると、親要素とは全く関係ない要素と判断され、CSSやJSなどで不具合が出てきます。
特にJSの場合、関数が上手く発火してくれない原因の多くがクラス名を間違って書いているだったりする事が多いです。

Hamlは便利ですが、エラーが全く起きないわけではないので、記述する時は最新の注意が必要です（これはHamlに限ったことではありませんが）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T13:49:34+09:00

 ←これって何の呪文ですか？

&と;で挟まれている文字は文字実体参照と言う。
でも呪文っぽくて面白いな:star:
参考サイト→http://rinrin.saiin.net/~aor/hms/cer

文字の間隔を調整

jittai_sansho01.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照01</title>
    <link rel="stylesheet" href="css/jittai_sansho01.css">
  </head>
<body>
  <div class="container01">
    <p class="sansho01">
      間が&nbsp;空くよ
    </p>
    <p class="sansho02">
      間が&ensp;空くよ
    </p>
    <p class="sansho03">
      間が&emsp;空くよ
    </p>
    <p class="sansho04">
      間が　空くよ
    </p>
    <p class="sansho05">
      間が&thinsp;空くよ
    </p>
  </div>
</body>
</html>
jittai_sansho01.css
.sansho01 {
    background: #fdc1c1;
}
.sansho02 {
    background: #fdf4c1;
}
.sansho03 {
    background: #c3fdc1;
}
.sansho04 {
    background: #c1fde9;
}
.sansho05 {
    background: #c1ccfd;
}

20191125_Qiita01.png
4つ目は全角スペースで空けているけど、細かい文字間は文字実体参照を使った方が良い。

文字実体参照 説明 備考
&nbsp; 無視・改行されない空白 no-break spaceの略
&ensp; nの字の幅の空白(半角スペース) en spaceの略
&emsp; mの字の幅の空白(全角スペース) em spaceの略
&thinsp; &nbsp;より狭い空白 thin spaceの略

「&nbspは半角スペース」と説明しているサイトがあったが、Photoshopで図ってみたら半角スペースより狭かった。

権利の表示

jittai_sansho02.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照02</title>
    <link rel="stylesheet" href="css/jittai_sansho02.css">
  </head>
<body>
  <div class="container02">
    <p class="sansho06">
      &copy;株式会社あいうえお&emsp;2010-2019
    </p>
    <p class="sansho07">
      商品名かきくけこ&reg;
    </p>
    <p class="sansho08">
      商品名さしすせそ&trade;
    </p>
  </div>
</body>
</html>
jittai_sansho02.css
.sansho06 {
    background: #ff7c7c;
}
.sansho07 {
    background: #dcff7c;
}
.sansho08 {
    background: #7cffae;
}

20191128_Qiita01.png

文字実体参照 説明 備考
&copy; 著作権表示記号 copyright signの略
&reg; 登録商標記号 registered sign = registered trade mark signの略
&trade; 単に「商標」を意味する Trade markの略

デベロッパーツールで見てみると©って直接書いてあるところもあるけど、ホントはダメだと思う…
参考までに→商標用語辞典

マークアップ記号

jittai_sansho03.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字実体参照03</title>
    <link rel="stylesheet" href="css/jittai_sansho03.css">
  </head>
<body>
  <div class="container03">
    <p class="sansho09">
      ハッピー！&amp;ラッキー！
    </p>
    <p class="sansho10">
        &apos;ここを囲う&apos;
    </p>
    <p class="sansho11">
        &quot;引用文献です&quot;
    </p>
    <p class="sansho12">
        遊び&lt;勉強
    </p>
    <p class="sansho13">
        睡眠欲&gt;食欲
    </p>
</body>
</html>
jittai_sansho03.css
.sansho09 {
    background: #7cc4ff;
}
.sansho10 {
    background: #9f7cff;
}
.sansho11 {
    background: #ff7cde;
}
.sansho12 {
    background: #ff7cb9;
}
.sansho13 {
    background: #979797;
}

20191128_Qiita02.png

文字実体参照 説明 備考
&amp; アンド記号 ampersandの略
&apos; アポストロフィ apostropheの略
&quot; 引用符 quotation mark = APL quoteの略
&lt; 不等号（小なり） less-than signの略
&gt; 不等号（大なり） greater-than signの略
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T11:54:55+09:00

Webプログラミングスキルチェックシート(初級)

X-HACK　松田信二さんの記事を基に調べてみました。

訂正などあれば、指摘お願いします。
Webプログラミングスキルチェックシート(初級)

コンピュータ
何はともあれプログラミングするのなら、コンピュータに関する最低限の知識は必要だ
- [ ] 32bitが何byteか計算することができる
1bit = 0か1（2種類の情報を表すことができる。例・暑い or 寒い）
1byte = 2の8乗（2×2×2×2×2×2×2×2） ＝ 256（00000000から11111111まで）
1byte = 8bit
32bit = 32÷8＝4byte(2の32乗)

  • 二進法と十進法で記された数値を相互に変換することができる
    １、二進法から十進法
    １０１０＝１×２の３乗＋０×２の２乗＋１×２の１乗＋０×２の０乗
    　　　　＝８＋０＋２+０
    　　　　＝１０
    ２、十進法から二進法
    １０１０
    １０１０/２
    ＝５０５/２
    ＝２５２余り１
    ２５２/２＝１２６
    １２６/２＝６３
    ６３/２＝３１余り１
    ３１/２＝１５余り１
    １５/２＝７余り１
    ７/２＝３余り１
    ３/２＝１余り１
    １/２＝０余り１
    ０１００１１１１１１

  • CPUの性能を比較することができる
    【例】Core i7-7800X 3.50GHz
    １秒間に３５億回のON/OFF振動が可能。
    FLOPS・・・１秒間で小数（基数を２とする(２進法の)分数）の掛け算・割り算を多くできるCPUの性能が高いだろうという考え方

  • CPUが何かを説明することができる
    プログラムを解釈・実行してコンピュータ全体の動作を制御する措置。
    ・演算ユニットやレジスタの動作、メモリの読み書き・入出力等を制御する制御ユニット
    ・２進数の情報を論理演算・加算・減算する演算ユニット
    ・レジスタ
    レジスタの仕事
    （１）メモリに記憶されたプログラムの先頭アドレスを保持する（ベースレジスタ）。
    （２）メモリに記憶されたプログラムの基準となるアドレスからの増減値を記憶しておく（指標レジスタ）。
    （３）メモリから読みだした命令を記憶しておく（命令レジスタ）。
    （４）その他の計算が速く、円滑に、安全に行われるための潤滑油的な仕事
    ＣＰＵからみると、
    １、 メモリ命令を読み込む
    ２、 命令を制御情報に変換（制御ユニット）
    ３、 制御情報に従って、演算動作・出力（演算ユニット）
    その他にキャッシュ（情報の転送効率を上げる措置）やパイプライン（複数の命令処理を効率よく実行する仕組み）が入っていることがある。

  • メインメモリとストレージの違いを説明することができる
    メインメモリ・・・主記憶装置。データの作業場所の広さ。
    ストレージ・・・補助記憶措置。データを保管場所の広さ。

  • 文字コードとは何かを説明することができる
    文字に番号を付ける形式

  • OS(Operating System)が何かを説明することができる
    人間が、目的に沿ってコンピュータを利用することが出来るようにするための基盤となるソフトウェア

  • 自分が使っているパソコンの現在のメモリ使用量を調べることができる
    ２６６２ＭＢ（スタート→Ｗｉｎｄｏｗｓシステムツール→タスクマネージャ→パフォーマンス→メモリ）

  • 自分が使っているディスプレイの解像度を調べることができる
    システム→ディスプレイ

  • コンピュータは単純な処理を超高速で実行しているだけということを理解できている
    主に論理、確率、統計の計算を高速で行う。

インターネット
ウェブアプリケーションを作るのならインターネットに関する最低限の知識は必要になる
- [ ] ウェブサーバーとは何かを説明することができる
ハードウェアまたはソフトウェア、あるいは両方が動作しているもの
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_web_server

パソコン操作
パソコンが苦手だと話にならない、パソコンを好きになろう
- [ ] テキストエディタを利用することができる
メモ帳、Visual Studio Codeなど

  • ファイル、フォルダの新規作成ができる 〇

  • ファイル拡張子とは何かを説明できる
    ファイルの種類や作成したアプリケーションを表した情報
    https://support.microsoft.com/ja-jp/help/978449

  • タッチタイピングができる
    〇

  • 必要なアプリケーションをダウンロード、インストール、削除することができる
    △（英語だと時間がかかる）

Google検索スキル
エンジニアは息を吸うように検索し、息を吐くようにコードを書く
- [ ] AND検索ができる
１. AND検索
「机　整理　ケース」など、２つ以上のキーワードで検索する方法。
- [ ] OR検索ができる
「手帳 OR ノート　OR　付箋」など２つ以上のキーワードをのうちどちらか1つが含まれているサイトを検索。
- [ ] とは検索ができる
〇
- [ ] 除外検索ができる
「ＰＣ-Ｍac」のように特定のキーワードを省きたい場合の検索方法
- [ ] フレーズ検索ができる
「”スマホ　アプリ”」のようにダブルクオテーションで囲ったキーワードの順番に検索。
- [ ] ワイルドカード検索ができる
例　電子署名*法律
- [ ] タイトル検索ができる
「TITLEWORDS(トヨタ)」 のようにカッコ内に入れたキーワードを入れる。
- [ ] 本文検索ができる
「intext:」＋「一つのキーワード」、「allintext:」＋「複数のキーワード」
https://www.turbine.co.jp/blog/201606_goole-search
- [ ] 検索エンジンを使って「検索テクニックを検索」することができる
グーグルの場合「Google　検索　ヘルプ」で検索
https://support.google.com/websearch/answer/134479?hl=ja&ref_topic=3036132

公式ドキュメントを読む
公式ドキュメントには全てが書いてある、しかもほとんどの場合無料だ
- [ ] 学ぼうとする技術の公式ドキュメントがどこにあるか探すことができる
技術の名前　site　公式サイトのドメイン　
技術の名前　公式
など
- [ ] プログラミングの学習をするときに公式ドキュメントに目を通すことができる
〇（全部理解できているかは分からない。）

Linuxコマンド
簡単なコマンドを使ってファイルの操作ができると学習が捗るのでよく使うものは覚えてしまおう
- [ ] コマンドで現在のディレクトリ（カレントディレクトリ）を確認できる
pwd
https://qiita.com/lrf141/items/4dadd107c1ac778260e5
- [ ] コマンドでディレクトリの内容を表示できるls　
- [ ] コマンドでディレクトリを移動するできる
cd　+移動したいディレクトリ名
- [ ] コマンドでファイルの新規作成ができる
mv + Enter
- [ ] コマンドでディレクトリの作成ができる
Mkdir ディレクトリ名
- [ ] コマンドでファイル、ディレクトリのコピーができる
cp [オプション] [コピーしたいファイル・ディレクトリ名] [コピー先]
- [ ] コマンドでファイル、ディレクトリ名の変更ができる
mv　【現在のファイル名】　【変更後のファイル名】
- [ ] コマンドの履歴を確認することができる
history ＋ [表示するコマンド数]
https://webkaru.net/linux/history-command/
- [ ] コマンドでファイル名検索をすることができる
find ./ -name　＋　【ファイル名】
https://uxmilk.jp/8583
- [ ] 以前実行したコマンドを呼び出すことができる
Ctrl-r　＋【コマンド名】
https://qiita.com/quwa/items/3a23c9dbe510e3e0f58e

テキストエディタ
エンジニアにはお気に入りのテキストエディタがあるものだ、仕事道具には拘りたい
- [ ] viを使ってテキストデータの修正ができる
↑,↓,→,← 各方向に 1 つ移動
i カーソルのある場所に挿入、インサートモードになり,文字を入力できる.終了は [Esc] キー
a カーソルのある次の場所に挿入インサートモードになり,文字を入力できる.終了は [Esc] キー
x カーソルのある場所の1文字削除
r カーソルのある場所の1文字置き換え
- [ ] お気に入りのテキストエディタがある
Visual Studio Code
- [ ] プラグインを導入してテキストエディタをカスタマイズすることができる
Visual Studio Codeの場合
拡張機能　関係ありそうな文字を検索窓に入力して検索
- [ ] テキストエディタで使えるショートカットを3つ以上知っている
Visual Studio Codeの場合
F10 Debugを開始
Ctrl ＋o ファイルを開く
Ctrl ＋ｓ　保存

Git
チーム開発でも個人開発でもいずれ必要になる、苦手意識を捨てて覚えてしまおう、きっと一生役に立つ
- [ ] バージョン管理システムがなんのために存在しているか説明することができる
自分で完全にプロジェクトに取り組むことはまれであり、他の人と仕事を始めるとすぐに、お互いの仕事と競合するリスクを冒し始める。これは、両方が同じ作品を更新しようとするときに、同時にコードの発生を管理し、結果として作業の損失を回避するために、何らかのメカニズムを用意する必要がある。
自分で、または他の人とプロジェクトで作業するときは、コードを中央の場所でバックアップできるようにしたいので、コンピューターが壊れても失われない。
また、問題が後で発見された場合、以前のバージョンにロールバックできるようにする必要があります。例えば、同じファイルの異なるバージョンを作成することで実際にエラーが発生しやすいと信頼することができない。
さまざまなチームメンバーは通常、独自のコードのバージョンを作成し、そのバージョンの新しい機能に取り組んでから、制御された方法でマージする。
https://developer.mozilla.org/ja/docs/Learn/GitHub

  • GitとGitHubの違いを説明することができる
    Gitはバージョン管理システムの１つ。
    GitHubはWebサイト+インフラストラクチャであり、Gitサーバーに加えて、コードの問題の報告、ツールのレビュー、プロジェクトなど、Gitリポジトリを個別またはチームで操作するためのツール、タスクやタスクステータスの割り当てなどの管理機能を多数提供する。
    https://developer.mozilla.org/ja/docs/Learn/GitHub

  • Gitとは何かを説明できる
    Gitは、分散コードベースを含むリポジトリの完全なコピーがコンピュータ（と誰も他の人の）で作られているバージョン管理システム。
    情報のコピーに変更を加え、その後、管理者はマスター・コピーを使用して変更するかどうかを決定するサーバーまで戻って変更する。
    https://developer.mozilla.org/ja/docs/Learn/GitHub

  • リモートリポジトリ、ローカルリポジトリがそれぞれ何を指すか説明することができる
    リモートリポジトリは、インターネット上あるいはその他ネットワーク上のどこかに存在するプロジェクト。
    https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AE%E4%BD%9C%E6%A5%AD
    ローカルリポジトリとは、ユーザ一人ひとりが利用するために、自分の手元のマシン上に管理するリポジトリ。ローカルリポジトリで編集した内容をリモートリポジトリにアップロードできる。
    https://qiita.com/k_h_mirai/items/8003e2da31fff2db66cc

  • コマンドを使ってブランチを切り替えることができる
    add　【テキスト名】.text

  • コマンドを使って作業を保存することができる
    git add 【ファイル名】
    git commit

  • コマンドを使ってリモートリポジトリから差分を取り込むことができる
    git checkout 【ブランチ名】
    git rebase master

  • ローカルからリモートリポジトリへ差分を反映させることができる
    git diff リモート名/ブランチ名

  • 必要に応じてGitコマンドを調べて使うことができる
    △

  • Gitを使ってアプリを開発したことがある
    ないです。
    +
    +
    HTML
    書いているうちに慣れてしまう部分も多い、書籍などで基本を抑えたらあとは実践で身につけよう

  • HTMLファイルとはどういうものかを説明することができる
    HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができる。
    https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML

  • HTMLファイルを記述することができる

‘‘‘<!DOCTYPE html>




よちよち歩き










<!-- メニューアイコン追加 -->






LEARN TO CODE.


LEARN TO BE CREATIVE.


プログラミング学習


プログラミングを学ぶ








Learn Where to Get Started!







HTML & CSS



Webページの作成に使用される言語。HTMLとCSSを組み合わせることで、静的なページを作り上げる。






jQuery



JavaScriptライブラリ。 アニメーション効果、Ajax（エイジャックス）を使って外部ファイルを読みこんだりすることができる。






Ruby



オープンソースの動的なプログラミング言語。






PHP



ページの内容はプログラムを埋め込みむ。










プログラミングを学ぶ


Let's learn to code, learn to be creative!



開発





Learn to code, learn to be creative.





```

  • HTMLのタグとは何かを説明することができる
    +HTML文書内で、ホームページの動きをあらわす命令やコメントを書き込むための書式

  • 基本的なタグが分かり使い分けることができる

<head>
<title></title>
</head>
<body>
 <h1></h1>
 <p></p>
</body>
</html>```


- [ ] タグにclass属性を指定できる


'''<p class="text-contents">Webページの作成に使用される言語</p>'''

- [ ] タグにid属性を指定できる

```<div id="contain"≻○○</div>```

- [ ] HTMLファイルとJavaScript/CSSファイルとの関係性・役割を説明することができる

HTMLは、段落、見出し、データテーブルの定義、ページへの画像やビデオの埋め込みなど、Webコンテンツを構造化して意味を与えるために使用するマークアップ言語。

CSSは、HTMLコンテンツにスタイルを適用するために使用するスタイルルールの言語です。たとえば、背景色とフォントの設定、コンテンツの複数列へのレイアウトなど。

JavaScriptは、動的に更新されるコンテンツの作成、マルチメディアの制御、画像のアニメーション化などを行うスクリプト言語。



- [ ] bodyタグ、headタグの違いが説明できる

headタグ
検索エンジンやWebブラウザに向けた情報を定義するコードを記述し、画面上に表示されない部分全体を囲うタグ

bodyタグ
コンテンツ自身を構成するコードを記述し、画面上に表示される部分全体を囲うタグ


フォーム
システムを作るならフォームは最重要項目だ、入力をJavaScriptで制御できるようになるためにもしっかりと学ぼう

- [ ] テキスト入力フォームを作成できる

```<form></form>
<form name="" action="" url="" method=""></form>```

- [ ] 入力文字を伏せ字にしたパスワード入力フォームを作成できる


```<input type = "password" name = "pw-box">```

- [ ] チェックボックスを使った入力フォームを作成できる

```<input type="checkbox" name="名前" value="値"/>表示</input>```

- [ ] ラジオボタンを使った入力フォームを作成できる


```<input type="radio" name="名前" value="値"/>表示</input>```

- [ ] セレクトボックスを使った入力フォームを作成できる

```<select><option></option>..</select>
<select name = "abc">
<option>a</option>
<option>b</option>
<option>c</option>
</select>```


- [ ] 日付入力フォームを作成できる

```<script type="text/javascript">
 //今日の日時を表示
 window.onload = function () {
 //今日の日時を表示
 var date = new Date()
 var year = date.getFullYear()
 var month = date.getMonth() + 1
 var day = date.getDate()

 var toTwoDigits = function (num, digit) {
 num += ''
 if (num.length < digit) {
 num = '0' + num
 }
 return num
 }

 var yyyy = toTwoDigits(year, 4)
 var mm = toTwoDigits(month, 2)
 var dd = toTwoDigits(day, 2)
 var ymd = yyyy + "-" + mm + "-" + dd;

 document.getElementById("today").value = ymd;
 }
</script>

<input type="date" id="today">'''

- [ ] labelタグと入力フォームを関連づけることができる

```<form action="" method="post">
 <p>
 <label for="your_name">お名前：</label>
 <input type="text" id="your_name" name="your_name">
 </p>
 <p><input type="submit" value="送信"></p>
</form>```


ブラウザ
+HTMLはブラウザが構文を解析してディスプレイに表示しているんだということを理解しておこう

- [ ] ブラウザのキャッシュとは何かを説明できる

一度アクセスしたサイトのデータ（画像やHTMLなど）をブラウザで一時的に保管しておく仕組み。帯域幅の混雑を避けページの表示を高速化する。


- [ ] ブラウザのキャッシュを削除することができる

・Internet Explorer
ツールアイコン／インターネットオプション を選択
全般タブの「閲覧の履歴」セクションで「削除」ボタンをクリック
お気に入り Web サイトデータを保持する以外のオプションのチェックを入れ、「削除」ボタンをクリック

・Microsoft Edge
画面右上の「設定など」をクリック
「設定」をクリック
設定ウィンドウで「クリアするデータの選択」をクリック
「キャッシュされたデータとファイル」にチェック
「クリア」ボタンをクリック

・Firefox
画面右上の設定アイコンから「オプション」をクリック
「プライバシーとセキュリティ」を選択
「Cookie とサイトデータ」セクションで「データ消去」をクリック
データを消去ウィンドウで、「ウェブコンテンツのキャッシュ」にチェックを入れ「消去」ボタンをクリック

・Chrome
ウィンドウ右上のメニューから／履歴／履歴 を選択
左側のメニューをクリック
「閲覧履歴データを削除する」をクリック
「期間」で「全期間」を選択
「キャッシュされた画像とファイル」にチェック
「データを消去」ボタンをクリック



CSS編
基本を抑えたら書籍などを使って体系的に勉強するのもいいし、本職のデザイナに任せるってのもアリだと思う

- [ ] 文字の色を変えることができる

```タグ{
color:red;
}```

- [ ] 背景の色を変えることができる

```.【class名】{
background-color: white8;
}```

- [ ] 文字のサイズを変えることができる

```【タグ名】
font-size：〇px;
fza：〇px;```

- [ ] 画像のサイズを縦横比を崩さずに小さく表示することができる
```.【クラス名】img {
 max-width: 100%;
 height: auto;
}```

-![1DOCTYPE html_ページ_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499761/6eb67b84-2949-d65c-f93e-6e4c4e0573a9.jpeg)
-![1DOCTYPE html_ページ_7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499761/d7c5cd76-bfeb-0e46-f76b-afecbe89be4a.jpeg)
-![1DOCTYPE html_ページ_8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499761/98769477-3fa6-b19a-9c8e-db4cc77c06e6.jpeg)
プレビュー スライドモード
X-HACK　松田信二さんの記事を基に調べてみました。
訂正などあれば、指摘お願いします。

Webプログラミングスキルチェックシート(初級)

コンピュータ
何はともあれプログラミングするのなら、コンピュータに関する最低限の知識は必要だ

[ ] 32bitが何byteか計算することができる
1bit = 0か1（2種類の情報を表すことができる。例・暑い or 寒い）
1byte = 2の8乗（2×2×2×2×2×2×2×2） ＝ 256（00000000から11111111まで）
1byte = 8bit
32bit = 32÷8＝4byte(2の32乗)

[ ] 二進法と十進法で記された数値を相互に変換することができる
１、二進法から十進法
１０１０＝１×２の３乗＋０×２の２乗＋１×２の１乗＋０×２の０乗
　　　　＝８＋０＋２+０
　　　　＝１０
２、十進法から二進法
１０１０
１０１０/２
＝５０５/２
＝２５２余り１
２５２/２＝１２６
１２６/２＝６３
６３/２＝３１余り１
３１/２＝１５余り１
１５/２＝７余り１
７/２＝３余り１
３/２＝１余り１
１/２＝０余り１
０１００１１１１１１

[ ] CPUの性能を比較することができる
【例】Core i7-7800X 3.50GHz
１秒間に３５億回のON/OFF振動が可能。
FLOPS・・・１秒間で小数（基数を２とする(２進法の)分数）の掛け算・割り算を多くできるCPUの性能が高いだろうという考え方

[ ] CPUが何かを説明することができる
プログラムを解釈・実行してコンピュータ全体の動作を制御する措置。
・演算ユニットやレジスタの動作、メモリの読み書き・入出力等を制御する制御ユニット
・２進数の情報を論理演算・加算・減算する演算ユニット
・レジスタ
レジスタの仕事
（１）メモリに記憶されたプログラムの先頭アドレスを保持する（ベースレジスタ）。
（２）メモリに記憶されたプログラムの基準となるアドレスからの増減値を記憶しておく（指標レジスタ）。
（３）メモリから読みだした命令を記憶しておく（命令レジスタ）。
（４）その他の計算が速く、円滑に、安全に行われるための潤滑油的な仕事
ＣＰＵからみると、
１、 メモリ命令を読み込む
２、 命令を制御情報に変換（制御ユニット）
３、 制御情報に従って、演算動作・出力（演算ユニット）
その他にキャッシュ（情報の転送効率を上げる措置）やパイプライン（複数の命令処理を効率よく実行する仕組み）が入っていることがある。

[ ] メインメモリとストレージの違いを説明することができる

メインメモリ・・・主記憶装置。データの作業場所の広さ。
ストレージ・・・補助記憶措置。データを保管場所の広さ。

[ ] 文字コードとは何かを説明することができる
文字に番号を付ける形式

[ ] OS(Operating System)が何かを説明することができる
人間が、目的に沿ってコンピュータを利用することが出来るようにするための基盤となるソフトウェア

[ ] 自分が使っているパソコンの現在のメモリ使用量を調べることができる
２６６２ＭＢ（スタート→Ｗｉｎｄｏｗｓシステムツール→タスクマネージャ→パフォーマンス→メモリ）

[ ] 自分が使っているディスプレイの解像度を調べることができる
システム→ディスプレイ

[ ] コンピュータは単純な処理を超高速で実行しているだけということを理解できている
主に論理、確率、統計の計算を高速で行う。

インターネット
ウェブアプリケーションを作るのならインターネットに関する最低限の知識は必要になる

[ ] ウェブサーバーとは何かを説明することができる
ハードウェアまたはソフトウェア、あるいは両方が動作しているもの
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_web_server

[ ] HTTPリクエスト、HTTPレスポンスを説明することができる
HTTPリクエスト
実行したい操作、取り込むリソースのパス、HTTP プロトコルのバージョン、サーバーに追加の情報を与える任意の ヘッダー、POST のようなメソッドではレスポンスと同様に、送信するリソースを包含したボディがある。

HTTPレスポンス
準拠する HTTP プロトコルのバージョン、ステータスコード（リクエストが成功したか否か、およびその理由を示す）、ステータスメッセージ、リクエストと同様の HTTP ヘッダー、リソースを含む本文から成る。
https://developer.mozilla.org/ja/docs/Web/HTTP/Overview

[ ] 通信プロトコルとは何かを説明することができる
互いに通信するために制定された手順（規約）
https://www.japansensor.co.jp/faq/938/index.html

[ ] URLとは何かを説明することができる
ブラウザーがウェブ上の公開されたリソースを取得するために使用するメカニズム
https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL

[ ] ドメインとは何かを説明することができる
IPアドレスをURLとして文字列に置き換える際に、置き換えたい文字列を決めたもの
https://domain-talk.net/domain-column/relationship-domain/

[ ] IPアドレスとは何かを説明することができる
ネットワークに接続された、インターネットプロトコル(IP) を使うすべての端末に割り当てられる番号
https://developer.mozilla.org/ja/docs/Glossary/IP_Address

[ ] DNS(Domain Name System)とは何かを説明することができる
ドメイン名とIPアドレスの対応付けや、 メールの宛先ホストを指示するためのシステム。Web サイトの住所録のようなもの
https://www.nic.ad.jp/ja/newsletter/No22/080.html

[ ] bpsが何を表す単位か説明することができる
データ通信の速度を表す単位。
https://www.kddi.com/yogo/%E6%83%85%E5%A0%B1%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0/bps.html

[ ] パケットという用語が何を指すのか説明することができる
データがサーバからクライアントに送信される形式。情報を小さな塊にして一度に何人も利用することが出来るようにする。
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works

パソコン操作
パソコンが苦手だと話にならない、パソコンを好きになろう

[ ] テキストエディタを利用することができる
メモ帳、Visual Studio Codeなど

[ ] ファイル、フォルダの新規作成ができる
〇

[ ] ファイル拡張子とは何かを説明できる
ファイルの種類や作成したアプリケーションを表した情報
https://support.microsoft.com/ja-jp/help/978449

[ ] タッチタイピングができる
〇

[ ] 必要なアプリケーションをダウンロード、インストール、削除することができる
△（英語だと時間がかかる）

Google検索スキル
エンジニアは息を吸うように検索し、息を吐くようにコードを書く

[ ] AND検索ができる
１. AND検索
「机　整理　ケース」など、２つ以上のキーワードで検索する方法。

[ ] OR検索ができる
「手帳 OR ノート　OR　付箋」など２つ以上のキーワードをのうちどちらか1つが含まれているサイトを検索。

[ ] とは検索ができる
〇

[ ] 除外検索ができる
「ＰＣ-Ｍac」のように特定のキーワードを省きたい場合の検索方法

[ ] フレーズ検索ができる
「”スマホ　アプリ”」のようにダブルクオテーションで囲ったキーワードの順番に検索。

[ ] ワイルドカード検索ができる
例　電子署名*法律

[ ] タイトル検索ができる
「TITLEWORDS(トヨタ)」 のようにカッコ内に入れたキーワードを入れる。

[ ] 本文検索ができる
「intext:」＋「一つのキーワード」、「allintext:」＋「複数のキーワード」
https://www.turbine.co.jp/blog/201606_goole-search

[ ] 検索エンジンを使って「検索テクニックを検索」することができる
グーグルの場合「Google　検索　ヘルプ」で検索
https://support.google.com/websearch/answer/134479?hl=ja&ref_topic=3036132

公式ドキュメントを読む
公式ドキュメントには全てが書いてある、しかもほとんどの場合無料だ

[ ] 学ぼうとする技術の公式ドキュメントがどこにあるか探すことができる
技術の名前　site　公式サイトのドメイン　
技術の名前　公式
など

[ ] プログラミングの学習をするときに公式ドキュメントに目を通すことができる
〇（全部理解できているかは分からない。）

Linuxコマンド
簡単なコマンドを使ってファイルの操作ができると学習が捗るのでよく使うものは覚えてしまおう

[ ] コマンドで現在のディレクトリ（カレントディレクトリ）を確認できる pwd https://qiita.com/lrf141/items/4dadd107c1ac778260e5
[ ] コマンドでディレクトリの内容を表示できるls　
[ ] コマンドでディレクトリを移動するできる cd　+移動したいディレクトリ名
[ ] コマンドでファイルの新規作成ができる mv + Enter
[ ] コマンドでディレクトリの作成ができる Mkdir ディレクトリ名
[ ] コマンドでファイル、ディレクトリのコピーができる cp [オプション] [コピーしたいファイル・ディレクトリ名] [コピー先]
[ ] コマンドでファイル、ディレクトリ名の変更ができる
mv　【現在のファイル名】　【変更後のファイル名】

[ ] コマンドの履歴を確認することができる
history ＋ [表示するコマンド数]

https://webkaru.net/linux/history-command/

[ ] コマンドでファイル名検索をすることができる find ./ -name　＋　【ファイル名】
https://uxmilk.jp/8583

[ ] 以前実行したコマンドを呼び出すことができる Ctrl-r　＋【コマンド名】 https://qiita.com/quwa/items/3a23c9dbe510e3e0f58e
テキストエディタ
エンジニアにはお気に入りのテキストエディタがあるものだ、仕事道具には拘りたい

[ ] viを使ってテキストデータの修正ができる
↑,↓,→,← 各方向に 1 つ移動
i カーソルのある場所に挿入、インサートモードになり,文字を入力できる.終了は [Esc] キー
a カーソルのある次の場所に挿入インサートモードになり,文字を入力できる.終了は [Esc] キー
x カーソルのある場所の1文字削除
r カーソルのある場所の1文字置き換え

[ ] お気に入りのテキストエディタがある
Visual Studio Code

[ ] プラグインを導入してテキストエディタをカスタマイズすることができる
Visual Studio Codeの場合
拡張機能　関係ありそうな文字を検索窓に入力して検索

[ ] テキストエディタで使えるショートカットを3つ以上知っている
Visual Studio Codeの場合
F10 Debugを開始
Ctrl ＋o ファイルを開く
Ctrl ＋ｓ　保存

Git
チーム開発でも個人開発でもいずれ必要になる、苦手意識を捨てて覚えてしまおう、きっと一生役に立つ

[ ] バージョン管理システムがなんのために存在しているか説明することができる 自分で完全にプロジェクトに取り組むことはまれであり、他の人と仕事を始めるとすぐに、お互いの仕事と競合するリスクを冒し始める。これは、両方が同じ作品を更新しようとするときに、同時にコードの発生を管理し、結果として作業の損失を回避するために、何らかのメカニズムを用意する必要がある。
自分で、または他の人とプロジェクトで作業するときは、コードを中央の場所でバックアップできるようにしたいので、コンピューターが壊れても失われない。

また、問題が後で発見された場合、以前のバージョンにロールバックできるようにする必要があります。例えば、同じファイルの異なるバージョンを作成することで実際にエラーが発生しやすいと信頼することができない。
さまざまなチームメンバーは通常、独自のコードのバージョンを作成し、そのバージョンの新しい機能に取り組んでから、制御された方法でマージする。
https://developer.mozilla.org/ja/docs/Learn/GitHub

[ ] GitとGitHubの違いを説明することができる
Gitはバージョン管理システムの１つ。
GitHubはWebサイト+インフラストラクチャであり、Gitサーバーに加えて、コードの問題の報告、ツールのレビュー、プロジェクトなど、Gitリポジトリを個別またはチームで操作するためのツール、タスクやタスクステータスの割り当てなどの管理機能を多数提供する。
https://developer.mozilla.org/ja/docs/Learn/GitHub

[ ] Gitとは何かを説明できる
Gitは、分散コードベースを含むリポジトリの完全なコピーがコンピュータ（と誰も他の人の）で作られているバージョン管理システム。
情報のコピーに変更を加え、その後、管理者はマスター・コピーを使用して変更するかどうかを決定するサーバーまで戻って変更する。
https://developer.mozilla.org/ja/docs/Learn/GitHub

[ ] リモートリポジトリ、ローカルリポジトリがそれぞれ何を指すか説明することができる
リモートリポジトリは、インターネット上あるいはその他ネットワーク上のどこかに存在するプロジェクト。
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AE%E4%BD%9C%E6%A5%AD

ローカルリポジトリとは、ユーザ一人ひとりが利用するために、自分の手元のマシン上に管理するリポジトリ。ローカルリポジトリで編集した内容をリモートリポジトリにアップロードできる。
https://qiita.com/k_h_mirai/items/8003e2da31fff2db66cc

[ ] コマンドを使ってブランチを切り替えることができる
add　【テキスト名】.text

[ ] コマンドを使って作業を保存することができる
git add 【ファイル名】
git commit

[ ] コマンドを使ってリモートリポジトリから差分を取り込むことができる
git checkout 【ブランチ名】
git rebase master

[ ] ローカルからリモートリポジトリへ差分を反映させることができる
git diff リモート名/ブランチ名

[ ] 必要に応じてGitコマンドを調べて使うことができる
△

[ ] Gitを使ってアプリを開発したことがある
ないです。

HTML
書いているうちに慣れてしまう部分も多い、書籍などで基本を抑えたらあとは実践で身につけよう

[ ] HTMLファイルとはどういうものかを説明することができる HTML は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができる。
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML

[ ] HTMLファイルを記述することができる
‘‘‘<!DOCTYPE html>




よちよち歩き










<!-- メニューアイコン追加 -->
    <div class="header-right">
      <a href="#">レッスン</a>
      <a href="#">新規登録</a>
      <a href="#" class="login">ログイン</a>
    </div>
  </div>
</header>
<div class="top-wrapper">
  <div class="container">
    <h1>LEARN TO CODE.</h1>
    <h1>LEARN TO BE CREATIVE.</h1>
    <p>プログラミング学習</p>
    <p>プログラミングを学ぶ</p>
    <div class="btn-wrapper">
      <a href="#" class="btn signup">新規登録</a>
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
</div>
<div class="lesson-wrapper">
  <div class="container">
    <div class="heading">
      <h2>Learn Where to Get Started!</h2>
    </div>
    <div class="lessons">
      <div class="lesson">
        <div class="lesson-icon">
          <img src="https://prog-8.com/images/html/advanced/html.png">
          <p>HTML & CSS</p>
        </div>
        <p class="text-contents">Webページの作成に使用される言語。HTMLとCSSを組み合わせることで、静的なページを作り上げる。</p>
      </div>
      <div class="lesson">
        <div class="lesson-icon">
          <img src="https://prog-8.com/images/html/advanced/jQuery.png">
          <p>jQuery</p>
        </div>
        <p class="text-contents">JavaScriptライブラリ。 アニメーション効果、Ajax（エイジャックス）を使って外部ファイルを読みこんだりすることができる。</p>
      </div>
      <div class="lesson">
        <div class="lesson-icon">
          <img src="https://prog-8.com/images/html/advanced/ruby.png">
          <p>Ruby</p>
        </div>
        <p class="text-contents">オープンソースの動的なプログラミング言語。</p>
      </div>
      <div class="lesson">
        <div class="lesson-icon">
          <img src="https://prog-8.com/images/html/advanced/php.png">
          <p>PHP</p>
        </div>
        <p class="text-contents">ページの内容はプログラムを埋め込みむ。</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>
<div class="message-wrapper">
  <div class="container">
    <div class="heading">
      <h2>プログラミングを学ぶ</h2>
      <h3>Let's learn to code, learn to be creative!</h3>
    </div>
    <span class="btn message">開発</span>
  </div>
</div>
<footer>
  <div class="container">
    <imgsrc="https://prog8.com/images/html/advanced/footer_logo.png">
    <p>Learn to code, learn to be creative.</p>
  </div>
</footer>

[ ] HTMLのタグとは何かを説明することができる
HTML文書内で、ホームページの動きをあらわす命令やコメントを書き込むための書式

[ ] 基本的なタグが分かり使い分けることができる








  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T08:24:43+09:00

【初心者向け】　プログラミング「独学1ヶ月」と「スクール入学3日」との比較

初投稿なので不備あれば気軽にご連絡いただければ幸いです。
この記事はプログラミング初心者で、独学中の人、プログラミングスクールに通うか迷っている人の参考になるかと思って書いてみました

自己紹介

プロフにもありますが、今まで保険代理店で成果報酬型の営業職をしておりました。
手取も多く、残業も月5時間程度で人間関係も良好な職場だったのですが、

「興味のある分野で、プロダクトを売り込むんじゃなくて創ってみたい！」

という気持ちの変化で現在はとあるプログラミングスクールで勉強しています。
（宣伝目的ではないので名前は出していません）

独学1ヶ月での成果

(独学は個人差が大きいので1つのサンプルとしてご覧ください)
8月に独学を開始して1週間かけて作ったものが　↓　になります

やったことは初心者御用達のProgateのHTML.CSSだけです。

このLTページ作成後、JavaScriptとjQueryを一通りやって理解力が追いつかず、学習進度も低下

残り3週間については、
レスポンシブ、簡単なアニメーション動作、口コミ機能を追加させただけで1ヶ月が終了です。
（9月は書籍購入や現実逃避して進捗はありません）

スクール入学

作ったものは　↓　です　（※提出日に投稿したので5日目のツイートになっています）

　
　
で、提出日の夜にバグを取り払ってJavaScriptで作ったゲームが　↓　です
先ほどの投稿の最後でエラーだったページの内容です

テトリミノごとに違う画像を使用して、揃ったときにチーズの焼ける音を挿入しています。

テトリス部分は3日目時点では完成せず、6日目で完成しました。
（4日目に参考書を1冊読み切ってから制作に取り掛かったため）
　
　

独学していた頃との比較

全くの初心者とのころとは完全な比較と言うのは難しいかもしれませんが、

  1. 3日目の時点で1ヶ月の成果物同等程度、
  2. 6日目で苦手分野へ挑戦して制作できた

これには独学当時と大きなの差があるように実感しました！

「スクールで学んでできた！」というモノではなく
お題に沿った　面白そうなモノをとりあえず作ってみよう　という
好奇心から意外と学習が捗った…　というのが学習進捗の差かと思います。
（Progate等も面白いのですが、コレが作りたい！とはちょっと違うので）
　
講義というよりは　「学習環境」　が自分を後押ししてくれたと思っています（後術します。）
　
　

スクールで3日間学んでいたこと

入学して3日間の内容は
1日目：HTMLの基本（h1とかpとか初歩的なこと）
2日目：CSSのレイアウトについて（flexboxの扱いとか）、レンタルサーバーの説明とか
3日目：UI/UXの講義
　

…内容としては深いことは何もしていません。
Progateでもやっていそうな内容ですし

授業で勉強したのも　↓　みたいな感じです。(一部ですが)
スクリーンショット 2019-11-24 19.48.31.png

　
で、週末の課題として配布されたPDF通りのLPを作ってサーバーにアップすること(猶予3日間)
必須事項はこれだけです。

　
※ただ、これだけで終わるような課題ではありません

[プラスで余裕があれば機能を追加してきていいですよ?]

必須課題だけで終わらないのが今回入学したスクールの特徴でして
　
私もテトリスの実装(1日間に合わずですが)したのですが、
同期の中には以下のような機能を実装していました
　
　
・音楽に合わせてひょっこりはんが出てくる仕様
・ある場所をクリックするとページ全体でモグラ叩きゲームが始まる
・課題PDFを全て自分好みなデザインに変更する
　etc...
　
　
このスクールの特徴なのですが、
「課題終わったからここまででいいや」　がなくて
「ここまでできたから次はこれを付けてみよう」　といろんな技術を各々で見つけて実装してきます

この投稿書いているのが通学して1ヶ月半経った今なのですが、この風習は変わらずです?
　
授業で教わるというよりは「この機能つけるには何を勉強するべきか」がこの場では一般化していて
勝手に自走力が身についている　といった環境なので、毎週の課題発表が楽しみです！?
自分が作りたいものを毎回作っているので夜までコードを書くのがそこまで苦ではない…と思う(笑
（本音は結構キツイので好きなモノの制作でないと続いてないと思う）

なぜ今この記事を書いたのか

2点あって
①フォロー中の人が2ヶ月経過してもHTML.CSS道場ばかりやっている人が意外といて、
　簡単なLP作成の記事を有料で購入していたり、次に進んでない人が意外と多かった

②先日Twitterのタイムラインに
　「独学とスクールどっちがいいの？」　議論みたいなのがあったので

「確かにスクールいくか悩んでるときに参考になるものってなかったよなあ」（アフィカスばかりで…）

と思って案外需要あるかもと思い、振り返りの意味も込めて書いてみました！笑


　
　
私の意見としては 「結局はプログラミングは独学です」 ってのが1つ
色々意見はありますが、

　
未経験の繋がりが欲しい
　→目的意識違う人たちだったらその繋がり1年も持たないよ（キツイとか、ノマド飽きたとか）
　　↑なら経験者の繋がり求めに行ったり、勉強会の方が70万よりコスパはいいよ

　
一人じゃ続かない
　→メンターでは多分続かないので通学型のスクールか家庭教師つけるとかした方がいいかと

　
同時期に始めた人たちの進捗が気になる
　→Twitterと勉強会、サロンを駆使してください

　
行きたいけどお金がない…
　→（お金自体はあるけど、70万も払う価値あるの？っていうのがここに当てはまるのかと）
　　社会人は最近「第4次産業スキル習得講座」っていうものがありますので、検索してください。
　　条件が揃えば入学費＋日々の生活費の手当が発生するし、国民年金も免除できる可能性があります。
　　https://career-theory.net/resign-pension-3477
　　学生は親にお願いしましょう。
　

1000万稼ぐフリーランスに…
　→営業と副業やった方が早いし、お金だけ目標にしたところでマジで続かんよ(経験より)
　
　
　
　
　
　
そう思っているのになんで今も通ってるの？？　という疑問を持たれるかと思いますが、

学習期間と入学金を投資するだけの価値があると感じたので今も通っています。
一応、動画教材に不備があったり不満はありますが学習環境が気に入っているのが大きいです。

話が長くなりすぎるのでその詳細は後日noteかQiitaに投稿します

最後に

独学か悩んでいる方は
　まずは1ヶ月くらい独学で周りを見ないで突き進んでみてはいかがでしょうか？
　やってみて周囲と遅れていたり挫折したら何かのサービスを使ってみると良いかと思います

スクールにこれから行く方は
　入学前に「ここに自分が投資して納得できるのか」しっかり考えましょう
　くれぐれも考えすぎはダメ（私はここに時間かけ過ぎて後悔してます…）
　
　
　
　
偉そうなこと書いてますが、まだ勉強初めて1ヶ月半のペーペーです←
phpやJS触ってますが、今でもtableタグとか理解してなくてぶつかることもあります笑

ただ、全部理解して進むのではなく、ある程度型が作れるようになったら
興味の向くままに勉強する方が進捗ありますし、何より楽しいです！！


　
　
今は苦手のJS克服しつつphpに取り組んでいますので、よかったらTwitterフォローなりメッセ下さい。
（とても喜びます←）
　
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-25T02:22:36+09:00

28歳から高卒未経験がWeb系エンジニアを目指す学習＆就活の日記

どもども。初めまして、これが現在のおいらのスペックです。
・年齢：28歳
・仕事：離職中
・性格：自称コミュ障
・職歴：ほぼ工場。そしてほんの少しだけ音楽教室の運営を経験。
・学歴：高卒（工業系だんしーこう）
・英語力：グーグル翻訳最高！現在ちょびちょび勉強中。
・好物：天丼、とろサーモン（寿司）、家系ラーメン、徳用チョコ、うすしおポテチ、ダブルチーズバーガー、（見たらわかる全部太る奴やん）
・趣味：プログラミング（3日前から）、映画鑑賞（ほぼ洋画）、音楽鑑賞（オールジャンル）、昔はギターとかDTMとか。
・座右の銘：完璧より前進
・あこがれる人：レオナルド・ディカプリオ、
・最近気になる人：エドワード・スノーデン、
・悩み：プログラミングも覚えたい、英語も覚えたい、映画も見たい、ゲームもやりたい、仕事も探さなくちゃ、家事もしなくちゃ、などやる事が多すぎるので分身の術を使いたい昨今。
・現在のタスク：プログラミング学習、ポートフォリオ作成
・目の前の目標：Webエンジニアになる。
・ちょっと先の目標：リモートワークする。
・その先の目標：面白いWebサービスを作る。とにかく面白いものを作りたい。
・感化された本：サピエンス全史（ざっとしか読んでない（笑）でもオススメ！）
・プログラミング教材：Progate、ググりまくる、後日、参考書等も購入予定。

・プログラミングを始めようと思ったきっかけ：
中学生の時にガラケーで、無料ホームページを利用して掲示板を作ったことがあり（i-mode時代）、学校の友達や他の学校の人達が利用してワイワイとコメントしてくれた。そして今頃になってその記憶を思い出し、またそんな風に色んな人達が楽しめるサービスを作りたい思った。（あの頃、ケータイ代が跳ね上がって親にガチで叱られたのは言うまでもない。。。）あとは、純粋にネットとかPCをいじっている時が一番楽しいため。

ということで、以上がおいらの簡単なスペックでした。

なぜ投稿したのかって？

これからQiitaを、日々の学習内容の備忘録として活用しようと思ったから。

とりあえず今日で勉強をし始めて3日目です。
なので今日まで3日分の勉強内容をここに記そうと思います。

この記事だけなんか長く書いてるのですが、この記事以降の日記は一言日記にしようと思ってます。

19/11/23
・ハローワークに行った。Web系エンジニアの未経験okの正社員求人を相談。結果→収穫無し（その他エンジニア求人情報はゲット）
・ためしにProgateに登録してみる。
・プログラミングおもしろいやんけ＼(^o^)／
・HTML&CSSの基礎を学ぶ。

11/24
・git hubに登録
・環境構築
・gitとgit hubについてググりまくってほぼ1日を使う(泣)
・progateのhtml&css中級編を半分まで修了。

11/25
・html&css中級編を全部修了。
・Rubyの学習を始める。　
・備忘録のために日記を書き始める。

ということで引き続きプログラミング学習したいと思います。
ではでは。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧