プログラマーマの記録

プログラミングを学び、自宅にいながら稼ぐ!プログラマーを目指すママの毎日の記録☆

HTMLとCSSを学んだら目標物を作ってみる

全体構造を把握する

f:id:asktky03:20210414161308p:plain

HTMLとCSSの超基本、さわり部分を学んだところで

次は少しずつサイトを作っていけるように目標物を作っていきます!

HTMLの全体構造

実際のHTMLファイルには決められた型を書く必要がある。

下の画像のように<html>の中には<head>と<body>が必要。

f:id:asktky03:20210414161619p:plain

<head>にはページに関する情報、

<body>には画面に表示したい内容を書く。

今まで勉強してきた要素は<body>の中に記述する。

HTMLバージョン指定

先ほどの画像に書かれている<!DOCTYPE html>の部分は

DOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのもの。

<head>要素

<head>要素にはWebページの設定に関する情報を書いていく。

<head>要素内に記述した内容はwebページには表示されない。

<head>要素には必ず入れる3つの要素がある。

f:id:asktky03:20210414162117p:plain

<head>要素の中身

<head>要素の中では、

文字コードの指定

②ページタイトルの設定

CSSの読み込み

などを行っていく。

 

これらは定型文のようなもので、完全に覚える必要はないけど

どういうものがあるのかは覚えておくと良い。

f:id:asktky03:20210414162326p:plain

文字コードを指定

文字コードを指定することで、ページの文字化けを防ぐことができる。

<meta charset="utf-8">とすると、そのページの文字コードUTF-8に指定することができる。

UTF-8HTML5で推奨されている文字コード

ページのタイトルをつける

<title>要素はページのタイトルを指定。

<title>要素で指定されるタイトルはGoogle ChromeSafariなどのブラウザのタブ上に現れる。

CSSの読み込み

これまで、Progateで学習してきた時には「stylesheet.css」で記述したCSSが結果に反映されていた。

 

本来はHTMLの方で読み込む必要がある。

HTMLからCSSを読み込むためには

<link rel="stylesheet" href="CSSファイル名">

を使う。

f:id:asktky03:20210414163123p:plain

まとめ

書くコードが増えてきて、HTMLとCSSの画面の両方を行き来して…

っとやっていると段々と難しく感じてきてしまいますね。

 

といってもまだまだ初歩中の初歩なのに(笑)

 

そんな今日の学習内容です。

 

1.HTMLの全体構造

2.HTMLバージョン設定

3.<head>要素

4.<head>要素の中身

5.文字コードを指定

6.ページタイトルをつける

7.CSSの読み込み

 

学習スピードが遅くて、出産までに基本をおさえられるのか?!

っと多少不安になりますが、”おさえられるのか?”ではなく、”おさえる!”の気持ちでいかないとですよね。

 

できたら簡単なWebページとかをオリジナルで作れるようになってから出産を迎えたい!!

その意気込みを忘れずに学習あるのみ。

 

夜は画面をみると疲労がすごいので、読書タイムとしてしっかり学習していきます!

超基本!初心者でもわかるCSSの基本

CSSの基本を学ぶ

f:id:asktky03:20210412163643p:plain

HTMLの次はCSSの基本を学んでいきましょう!

CSSとは?

HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語。

CSSを使うと色やレイアウトを整えられる。

CSSにふれる

CSSはHTMLとは別ファイルに記述する。

HTMLで用意した要素に対して、CSSを使って「どこの」「何を」「どうする」かを指定することができる。

 

この時「どこの」の部分をセレクタ

「なにを」の部分をプロパティという。

f:id:asktky03:20210412164458p:plain

↑画像の説明で、最後に } をつけ忘れました…。

文字の色を変える

「color: #dd000;」のようにカラーコードで色を指定。

主要な色はredなどのように指定ができる。

※カラーコードは覚えなくて良い。

f:id:asktky03:20210412164745p:plain

CSSを書く時の注意

CSSを書く時もインデント(字下げ)をする。

また、CSSのプロパティの末尾にはコロン(:)、

行末にはセミコロン(;)をつけること。

 

h1 {

  color: #ff000;

CSSのコメント

HTMLと同じく、CSSファイルにもコメントを記述できる。

CSSの場合は /**/ で囲んだ行がコメントになる。

 

h1 {

 /*文字の色を赤にする*/

 color: #ff000;

}

文字の大きさを変える

文字の大きさを指定するにはfont-sizeプロパティを使う。

font-sizeはpx(ピクセル)という単位を使って指定する。

pxを書き忘れないように注意する。

f:id:asktky03:20210412165823j:plain

文字の種類を変える

font-familyプロパティを使うとフォントの種類を指定できる。

「font-family: フォント名;」とすると要素にそのフォントを適用できる。

 

フォントにスペースがあればダブルクォーテーション(”)で囲む。

f:id:asktky03:20210412170051p:plain

背景色を変える

背景色を変えるにはbackground-colorプロパティを使う。

色の指定方法はcolorプロパティと同じ。

「#dddddd」のように同じ値が続く場合は「#ddd」と省略できる。

 

※HTML

<h1>プログラマーマ</h1>

CSS

h1 {

  background-color: #dddddd;

}

横幅・高さを変える

要素の横幅を変えたいときはwidthプロパティ、

高さを変えたいときはheightプロパティを使う。

width、height共にpxで指定。

f:id:asktky03:20210412170959p:plain

特定の要素にCSSを適用する

<li>要素が複数ある場合、classをつけて文字に名前を付けてあげられる。

classをつけることでそれぞれの要素を識別し、別々のCSSを適用することができる。

 

class名でCSSを指定する時、先頭にドット「.」が必要。

f:id:asktky03:20210412171357p:plain

classに同じCSSを適用する

複数の要素に同じCSSをつけると、それら全て同じCSSが適用される。

f:id:asktky03:20210412171542p:plain

f:id:asktky03:20210412171554p:plain

classにCSSを指定する時の注意

classに同じCSSを指定する時、先頭に(.)をつけないとCSSが適用されない。

classの場合は(.)が必要で、タグの場合はいらない。

まとめ

少しずつ基本が頭に入ってきたような気がします。

今日の学び。

 

1.CSSに触れる

2.文字の色を変える

3.CSSを書く時の注意

4.CSSのコメント

5.文字の大きさを変える

6.文字の種類を変える

7.背景色を変える

8.横幅・高さを変える

9.特定の要素にCSSを適用する(タグに名前を付ける)

10.classに同じCSSを適用する

11.classにCSSを指定する時の注意

 

次の勉強は再びHTMLに戻り、HTMLの全体構造に移ります。

 

ここが終わったら、HTMLとCSSを組み合わせながらWebサイトなどの目標物を作っていくための練習になるはず。

段々と複雑になってくる…

 

一歩ずつ、着実に。

明日も頑張りましょう!!

 

超基本!初心者が学ぶHTML

ProgateでHTMLの超基本を学ぶ

f:id:asktky03:20210409175129p:plain

初心者はまず、イヤにならずに楽しく勉強することが大切!

ということで、とにかく今日はHTMLの超基本、簡単すぎ~!

っといわれるかもしれないレベルのところをひたすらに繰り返しました。

 

Progateの初級のHTMLのところをアプリ版で演習

アプリ版をみながらノートに書いて復習

パソコンで再び初級のHTMLのところを演習

 

何回も繰り返すと覚えてきますね!

このペースでいったら全然進まないだろうけど…

 

私の場合はわからないまま通りすぎるよりかは、この方が身になる。

今日のHTMLの超基本をまとめたいと思います。

 

HTMLの超基本

f:id:asktky03:20210409180403p:plain

HTMLの仕組み

テキストをタグ<>で囲む。

そうすると見出しやリンクの意味をもつようになる。

テストをタグで囲む時は、開始タグと終了タグで挟む。

 

<h1>プログラマーマ</h1>

※終了タグには「/」が必要。

見出しをつける

見出し要素は、

<h1><h2>........<h6>がある。

<h1>が一番大きくて、<h6>が一番小さい。

f:id:asktky03:20210409180554p:plain

段落を作る

段落を表すのは<p>。

<h2>要素や<p>要素で囲んだテキストは改行される。

 

<h2>プログラマーマとは?</h2>

<p>プログラマーを目指すママです</p>

コメント

<!--  -->で囲んだテキストをコメントという。

コメントとして書かれたテキストはページに表示されない。

メモとしてつかえる!

 

<!--これはメモ-->

※”これはメモ”の部分は表示されない。

リンクを作る①

リンクを作るには<a>要素。

テキストを<a>タグで囲むとリンクを作れる。

実際に表示されるテキストは<a>タグに囲まれた部分だけ。

 

<a>日記</a>

日記

リンクを作る②

<a>要素に飛ぶ先を指定するには、href属性を追加する。

<a href="url">と書き、urlの部分にリンク先のURLを入力するとそのページへのリンクが表示される。

 

<a href="http://〇〇-〇.com">日記</a>

※リンクURLはブラウザには表示されない。

属性の書き方

HTMLでは多くの属性がある。

開始タグの中に書く値を指定する時はダブルクォーテーション(”)をつけるのを忘れずに!

 

<a href="〇〇-〇.com">日記</a>

画像を表示する

画像を表示する時は<img>要素。

<img src="url">のようにsrc属性のurlの部分に画像のURLを指定すると画像が表示される。

<img>要素はテキストを囲まないので、終了タグがない。

 

<img src="△△-△.jpg">

リストを作成

下記のようなリストを作る。

・4月

・5月

・6月

 

この場合は<li>要素を使う。

箇条書きにしたいテキストをそれぞれ<li>タグで囲むとリストができる。

<li>4月</li>

<li>5月</li>

<li>6月</li>

※・を付けるには<ul>要素が必要。

 

<ul>要素で囲むと黒点(・)が先頭につく。

このように要素を要素で囲むことを入れ子という。

囲む方の要素を親要素、囲まれる方の要素を子要素という。

<ul>

   <li>4月</li>

   <li>5月</li>

   <li>6月</li>

</ul>

 

入れ子構造の要素がある場合はインデント(字下げ)する。

行の先頭で「TAB」キーを押すと簡単にインデントができる。

 

※ちなみに<ol>で囲むと数字が連番でつく。

 

まとめ

f:id:asktky03:20210409183927p:plain

まずは基本中の基本をおさえた本日。

 

1.HTMLの仕組み

2.見出しをつける

3.段落をつくる

4.コメント

5.リンクをつくる

6.属性の書き方

7.画像を表示する

8.リストを作成

 

何事も基本!そして積み重ねが大切。

すぐに忘れてしまうから、寝る前にもう一度復習しておきましょう!

初心者にもできる!HTMLの効率のいい勉強法とは?!

HTMLの効率のいい勉強法は?

f:id:asktky03:20210408132145p:plain

とりあえずProgateのHTMLとCSSの初心者コースを一周しました!

手ごたえは……なし(笑)

とりあえずHTMLとCSSってなんだ?っていうのに触れた感じです。

 

ただやっても学べたのか?

っと時間の無駄になってしまうので、効率よく、しっかり身になるような勉強法で進めていかなくてはいけないと思います。

とにかく毎日Progateを実践!

f:id:asktky03:20210408134348p:plain

やはり実践あるのみ!

Progateではコードを実際に書いて、どのように表示されるかも確認できるので慣れるためにも何回も挑戦しようと思います。

一回やってもリセットをしたらまた最初からできるのでいですよね。

 

色々なサイトがあるけど、Progateの色合いとかキャラクターとかがかわいいから私好み♪(笑)

やはり大切なのは挫折せずに、楽しく継続することです。

気分がノッテくるものを選ばないとね!(笑)

 

もちろんProgateは内容も分かりやすいので、初心者の私でも楽しみながら一周できました。

 

一周目の学習ではほとんど答えと照らし合わせながらやったので…

二周目は答えじゃなくて、ヒントをみながら挑戦します!

 

もう一回初級コースをやってみて、終わった時の感じをみて中級に進もうかな。

 

基礎から学べる本を熟読

あとはやっぱり本を読む!

今、気になっている本はこちらです↓↓↓

 

 

本を読むだけでは実際に手を動かせないので、この本を選びました。

この本では読んで学ぶのはもちろん、実際にサイトを作っていくらしい。

 

 レビューや口コミをみてみると、Webページの仕組みから実際に作る過程までまとまっているようです。

この本を読んだだけでは仕事につながるレベルまではいかないけど、初心者にはやさしくわかりやすい一冊のようなのでファーストステップとしては安心な本かな。

 

何冊もあっても読み切れないと思うので、ひとまずこちらの近日中に購入して熟読しましょう!

 

サンプルをみながらサイトを作ってみる

とりあえずこの1か月はとにかくインプット!

HTML(CSS)に慣れて、ある程度の理解ができるようになってきたら次のステップへ。

 

本に載っているものやネットなどから使えるサンプルを探して、まずは真似てWebサイトを作ってみます。

何事も真似から始まりますよね~?!

いきなりオリジナルを編み出す必要はない!!

f:id:asktky03:20210408165223p:plain

演習を重ねて、サンプルを真似っこして…

インプットした知識を今度はアウトプット!

 

サンプルに少し手を加えたりして、ちょっとオリジナルを入れてみる。

インプット→アウトプット…

トライ&エラーだ!!

 

まとめ

毎日、最初に決めた目標を見て、そうなるためにはどう行動していくのだったかをしっかり思い出すようにする。

2つの具体的な目標、ゴールをしっかりみながら進めていきたいと思います。

まずはHTMLを効率よく学ぶことが今月の目標。

 

1.Progateで繰り返し演習

2.基礎から学ぶ本を熟読

3.サンプルを真似てWebサイトを作る

4.サンプルに手を加えてオリジナルに変更してみる

 

自由で有意義な在宅ワーカーママを目指し、精進あるのみです。

インスタで勉強アカウントを作りました!

ブログ更新をインスタでお知らせ

f:id:asktky03:20210407173632p:plain

今日はインスタを開設するのに手こずってしまいました…

よって、プログラミングとは関係のないブログの更新です。

 

使っていないアカウントを削除したいのに、なんだかログインを連携する設定になっていたようで、それが厄介でした!

パスワードを直してもログインできない状態が続いて、削除したいアカウントが出てこない!

しかもアプリ上ではできなくて、パソコンからログインしないといけないし…。

 

無駄に時間を費やしてしまいましたが、なんとか勉強アカウントを開設できました!

↓↓↓

f:id:asktky03:20210407173616j:plain

はてなブロガーさん以外からもアクセスがきたら、やる気がさらにUPするだろう…

という作戦です(笑)

 

ブログを更新したらインスタも更新!

更新するためにはしっかりプログラミングの勉強もしなくてはっ!!

 

勉強につかれたときにインスタ投稿用の画像を作ろうかな~っと思っています。

 

まだまだ慣れないことばかりで、あんなにたくさんあった時間が全然足りなくなっています。

いいことですね~

でも今度は効率も考えながら、貴重な時間を有効活用していきましょう。

 

インスタをやっている方がいらっしゃいましたら、応援の意味もこめて、

ぜひこちらもフォローしてください♪

無料学習!Progateでプログラミング学習を始めてみた

初心者は一体どこから始める?

f:id:asktky03:20210406155737p:plain

プログラミング学習を始めるぞ!

 

気合は十分。

でも一体どこから手をつければいかしら…

 

独学では無理だろうな…

でも誰かに習うにしてもスタート地点にも立ててないから、まずは少しプログラミングに触れてからにしようと考えました。

 

先週末、まずは本屋へGO!

本棚を見て固まる。

果たしてどれがいいのか全くわかりません(笑)

とりあえずその場で口コミを調べてみました。

 

HTMLとかを学ぶとかいったくせにPython1年生の本を購入←

イラストがかわいくて、カラーで見やすかったのでついつい…

でも一通り読んでみたけど理解はできず!そりゃそうだ!!

 

でも言語は比較的シンプルに感じました。

 

そんな話は置いておいて~

帰宅後、どこからはじめるかをまた悩む。

とりあえずYouTubeとかでよく出てくる、今、話題のテックアカデミーをチェック。

 

この業界の相場にしては安いんだと思いますが、無職の私にはやはりちょいと足踏みしてしまう金額。

ん~。

 

っと悩んでいたら、ちょうどネットに詳しい友人からの何気ないLINEが。

そして相談してみたら、まずプログラミングに触れるって意味でこれがいいよ~!

っとProgateというサイトを教わりました。

 

テックアカデミーもいいと思うんだけど、全くの初心者だと少し難しく感じるかもしれないから、

苦手意識をなくすためにもまずはProgateがおすすめ!とのことでした。

 

Progatedeで無料学習スタート!

f:id:asktky03:20210406162734p:plain

ということで、友人に教えてもらったProgateというもので学習スタート!

私の好きな色使い~♪

結構、そういうところ私にとっては大事です(笑)

モチベーションの継続に繋がります。

 

Progateは初心者向けの学習サイトで、結構充実しているのに基本的には無料。

月額を払ったとしても¥980なんだそう。

 

無料バージョンは、とりあえず初級編の基礎部分だけの学習なようで、月額を払うプラス会員になると基礎から実践までの全プログラムができるらしい。

アプリ版とWeb版

パソコンでやるときはWeb版、出先とかでちょこっとやりたいときにはスマホからアプリ版でやってみました。

アプリ版でやると自分でコードを入力するわけではなく、あるものを選択して入力するだけなのでゲーム感覚で楽しめました。

 

なんだ~!そこまで難しくないじゃん♪

これなら私にもできそうじゃん♪

 

なんてアプリ版で楽しんでいましたが、自宅に戻ってパソコンからWeb版でやってみたら…アレ??やっぱり難しい??と手が止まりました(笑)

 

といっても、本で読むよりも理解はできる!

なにより説明も丁寧

初心者にも大分わかりやすいように作られています!

 

ただ、これまでコードと触れ合ったことがない私は、説明を読んだだけではなかなか覚えるところまでいけなくて…

演習スタート!ってコードがたくさん書かれた画面が出てくると頭が真っ白になります(笑)

 

一番最初はこんな感じで本当にシンプルなところからはじまります↓

f:id:asktky03:20210406164448p:plain

 

簡単~♪

なんてサクサク進んでいったのですが、

レベルが上がってくるにつれて、画面に暗号のようなものがたくさん出てくるとね…(笑)

f:id:asktky03:20210406164632p:plain

 

初心者の私はあっという間に脳みそがショートします(笑)

でも何回もヒントや説明画面を読んで、

時に、答えと自分のページを比較してみながら、まずはイヤにならないように!

ということを自分の中のテーマにして取り組んでいます。

 

まずは何回もやって慣れよう!

f:id:asktky03:20210406164955p:plain

今までやったことがないんだから、わからないのは当たり前!

大事なのはわかろうとすること!

そう思っています。

 

ヒントや説明、答えも見れることですし、確認しながら何回もやってみるしかないですよね。

しかも無料版でも一回やったらもうできません、もう戻れない!っとこともなさそう。

リセットというところをクリックしたら、またチャレンジできるようですね。

なんて親切なProgateさん。

 

まだ学習1周目の途中ではありますが、毎日開いてとにかくコードに慣れていきたいと思います!

プログラミングを学ぶ上での目標設定

挫折しないための目標設定

f:id:asktky03:20210405194139p:plain

プログラミングの目標を立てる前に…

まずは挫折しないために、モチベーションがあがる目標を立てます!

 

自由に仕事ができるようになる

コロナウイルスがが大流行してしまった去年…

そしてまだまだ治まることを知らない今年…。

それでいて私は妊娠し、これから出産を迎えます。

 

明らかにこれまでとは働き方を変えていかなくてはいけません。

 

現に夫はコロナ以前からずっと在宅ワークをしているので、場所を問わずに仕事ができています。

自宅で仕事はもちろんながら、気分を変えてカフェで仕事、旅行にいっても実家に帰省しても仕事はできています。

そんな働き方、いいですよね~。

 

夫婦でそんな働き方ができたら自由度が増します!!

 

家族との時間もしっかりと確保しながら、そして思い出をたくさん作りながら仕事もする。

 

理想ではなく、現実のものにします!! 

しっかり稼ぐ

 妊娠する前までは自分でも仕事をしていたので、娯楽費は自分の財布から出ていました。

今現在は専業主婦なので、金銭面はすべて夫の収入に頼っています。

ありがたいことに全然生活はできるのですが、やっぱり自分の自由なお金が入ってこないって心が寂しくなりますよね。

 

何か買いたいと思っても夫にお願いするしかないし…(収入がないのでできるだけ貯金は使わないと決めている(笑))

本当に必要最低限のことにしかお金を使わないってマインドになってます。

 

それはそれで大切なことではありますが、やっぱりお金を自分でもしっかり稼いで心に余裕が欲しい!

子供が生まれたらなおさら!

子供に不自由な思いはさせたくないし、何かチャレンジしたいこととかができてきたらためらわずに経験を積ませてあげたい。

そのためにはやっぱりお金の余裕って重要。

 

大体の家庭をみていてもケンカの原因だったり、悩みってお金から始まっているといっても過言ではないような…

お金が全てではない!

そうは思うけど、でも現実ってお金がないと何も始められない(笑)

 

夫に頼り切らずに家計をしっかり支えながら、自由なお金も持つ!

ジムにもいきたい!美容室やボディメンテナンスにだって行きたい!

旅行もしたいし、親孝行もしたい。

 

この半年で最低15万、最高はいくらでも~!!

 

収入を確保できるようになる!!

 

プログラミングの目標

f:id:asktky03:20210405195757p:plain

プログラミングといっても様々な言語があるんですね…

色々リサーチしてみたけど、やっぱり超初心者の私はWebデザインから始めるのがいいかな~っと思いました。

 

AIとかアプリ開発とかもすごく興味があるし、やってみたいし、これからますます需要があるだろうな…とは思うのですがね。

 

まずは自分の中で理解できそうなもの、

そしてお仕事として案件をとれそうなもの。

そこからスタートしようと思います。

HTML、CSSの習得

 まずはプログラミングってなに?

言語って覚えるものなの??

 

そんな初心者の私ですが、Web制作などには必ず必要となってくる基本、

HTML CSSから始めていこうと思います。

 

YouTubeとかでみてると色々で、最初にやるべきじゃないという人もいれば、

初心者でも収入を得られるようになりたいならまずはこれから!っていう人もいる…。

 

どっちが本当ですか~?

っと悩みましたが、オリジナルのWebサイトを早く作れるようになりたいので、まずはこの言語からスタートさせていこうと決心しました!

 

Webサイトを作り、仕事を受ける

まずは1か月である程度の基本コードをマスター!

 

完全に暗記は難しい…というか完全暗記は必要ないんだそう?!

それよりも検索できるような知識やタイピング力が大事。

 

初めの1か月はコードをマスターして、2か月目にはオリジナルのサイト制作を始める!

 

自分のサイトが完成したら、3か月目にはクラウドソーシングなどでお仕事を受ける!

 

それ以降はどんどんサイト作成の案件を取れるように、チャレンジあるのみ!

Pythonを学ぶ

 本当は最初にPythonを始めようかと思っていたんですよね。

今、まさに熱い!!

しかも覚えるコードは結構シンプルなような気がして…

 

体験アプリでPythonをやっても楽しかったんですよね~。

 

でもこれを学んでも今すぐにお仕事を取れるレベルにはなれないな…と判断致しました。

Pythonは、まずはプログラミングに慣れて、収入も増えてきたら挑戦していく言語にしました。

 

そのころには今ほど熱くないというか?

プログラマーもゴロゴロ出ていて、参入の余地なし?!

になっているかもしれないけど(笑)

 

目標を立てたら実行するべし!

f:id:asktky03:20210406134448p:plain

いつも目標は立てるけどね…

きちんと実行、達成できたものは果たしてどのくらいあるだろうか…

 

今回は挽回のチャンスでもあるのだ!!

 

この目標をすべて達成するべく、今、この瞬間からあとは学んでいくだけ。

 

この妊娠期間を無駄な期間にせず、出産後も在宅で仕事ができるという環境を整えるためにも頑張るぞ!