文系、社会人２年目、プログラミング始めました

Progate HTML&CSSを完了

Sun, 23 Jun 2019 16:36:13 +0900

ProgateのHTMLとCSS

の学習を完了しました。

とりあえず

第一関門突破

といったところでしょうか？

とはいえ

道場編はまだできていないのですが…

一周してみて

プログラミングは

考えるべきことは多いけど

何も複雑なことではない

というのが今のところの所感です。

道場編に取り組もうとしたら

全くコードが書けなくて

一瞬愕然としてしまいましたが

はじめて学んだことを

身につけるには

反復が必要ですからね

ずっと勉強してきた英語だって

未だに単語は

使わなければ忘れるし、

繰り返し見て、発音して、書かないと

身につかないですもの

始めたばかりの

プログラミングが

一回で完璧にはなりませんね

と自分を励まして

頑張ります、はい。笑

プログラミングに限らず

何かを始めたばかりの方

すぐにうまくいかなくても

継続すれば必ず上達するので

一緒に頑張りましょうね！

条件文

Sun, 09 Jun 2019 21:59:02 +0900

高校の情報の授業で

一度はExcelを使ったことありませんか?

SUMとかIFとか

勉強したと思うのですが、

JavaScriptでも同じようなことができます。

SUMは前回の記事で上げた

変数に足していく感じ。

let number = 1

number += 1

こう書くと

まずnumberという変数を設定し、

それを１と定義したことになり、

その後numberに１を足して

変数を１から２にしたことになる。

IFは条件だから

もしこうだったらこう表示する

といった指定ができる

条件文はIF以外にもいくつかあって

ELSE

SWITCH

WHILE

FOR

等といった表現がある

JavaScript 初級

Sun, 09 Jun 2019 21:51:13 +0900

JavaScriptで文字を表現するには

console.log("テキスト”）；

コメントは

//コメント

プログラミングは

文字だけでなく、

数字も扱うことができ、

計算もできる

この時“数字”にすると

文字として認識される

足す+

引く‐

割る/

かける*

余り％

JavaScrpitには変数があります。

変数とは

数字や文字の纏まりのことです。

たとえば

６７５８４９４６２

という数字を繰り返し使用した場合、

「number１」と名付けることで

繰り返し数字を打つ手間を

省くことができます。

よほど意味のある数字でない限り

６７５８４９４６２

と繰り返し打つよりも

number1

と打った方が

間違いにくそうですよね。

let number1 = 675849462;

で変数を定義し、

console.log(number1)

で使用出来ます。

文字列でも

let name1 = Ayako

console.log(name1)

のように使用できます。

変数の他に定数も定義できます。

変数はプログラミングの過程で

変更可能ですが

定数は変更できません。

たとえば、

5行目までは

number１は78697として

6行目以降では

number1は69152として

使用する

といったことが変数ではできますが

定数ではできません

定数は変更ができないため

ミスは少なくなるというメリットがあります。

本日の成果物

Sat, 08 Jun 2019 16:47:49 +0900

【HTML】

Progate

HELLO WORLD.

プログラミングの世界へようこそ

学べるレッスン

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">

HTML & CSS

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">

PHP

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">

Ruby

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">

Swift

お問い合わせ

メールアドレス（必須）

お問い合わせ内容（必須）

※必須項目は必ずご入力ください

【CSS】

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

.contact-form {
padding-top: 100px;
}

/* inputとtextareaのCSSを指定してください */
.contact-form input, textarea {
width: 400px;
margin-top: 10px;
margin-bottom: 30px;
padding: 20px;
font-size: 18px;
border: 1px solid #dee7ec;
}

/* contact-submitのCSSを指定してください */
.contact-submit {
background-color: #dee7ec;
color: #889eab;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

全体構成

Sat, 08 Jun 2019 14:51:58 +0900

実際にここまで書いてきたことを生かすには

全体の構成を整える必要があります。

タイトル

というように

まず、一行目で

HTMLのバージョンを指定し、

と入力し、

その間に

を入力します。

では

文字化けを防ぐために文字コードや

タイトル

CSSを読み込む設定などをします。

タイトル

以上のように

全体構成を整えて初めて

形になります。

CSS 初級2

Sat, 08 Jun 2019 14:30:05 +0900

【HTML】

ABCDE

12345

abcde

【CSS】

li {

color: red;

}

.selected {

color: green;

}

同じ要素でも違う特徴を与えたい場合、

HTML内でそれぞれ名前を持たせ

名前ごとに特徴を与えることができます。

例のように

という同じ要素の

ABCDE

１２３４５

abcde

のうち

１２３４５と

abcdeは赤、

ABCDEは緑

にしたい場合は

selectedという

class（名前）を与えることで

ABCDEを他の2つと区別します。

そして、CSSで

li {

ではなく

.selected {

とclassを入力することで

色を指定できます。

CSS 初級1

Sat, 08 Jun 2019 13:13:36 +0900

CSSはHTMLで作成したものの

見た目をおしゃれにするもの

字の色を変えたりすることが

出来ます。

HTMｌとCSSは別の言葉なので

HTMLトと同じファイルに

書くことはできないので

別のファイルを作成します。

イメージとしてはExcelに近く

HTMLを書いていたシートの隣に

新しいシートを作成するようなものです。

書き方は

まずHTMLのどの部分を

脚色したいかを指定します。

たとえば、タイトルの色を変更したなら

HTMLではタイトルは

タイトル

ですので

CSSで指定するには

ｈ１

と書きます。

ここで指定されたものを

セレクタ

と呼びます。

ちなみに、名前なんてどうでもよい

と思うかもしれませんが（私みたいに笑）

覚えておくと便利です。

英語を勉強するときに

前置詞、副詞、動詞などを覚えておくと

現在完了形などの文法が

学習しやすくなるのと同じです。

といっても、

私は副詞と言われても？？？ですが、、、

帰国子女なので英語は

それでも問題ないですが、

プログラミングは

全くの初心者なので

こういう基礎も

大事にしていきたいです、はい

話を戻して、

セレクタを指定したら、

｛と入力して改行し、

セレクタの何を変更したいのか

を指定します。

色であれば、

color

と書きます。

これをプロパティと呼びます。

プロパティの後ろに

コロン：を入力し、

色を指定します。

色は16進数で表現しますが、

主要な色であれば

red, blue, green

などのように英語で入力できます。

指定したら

セミコロン；を入力し、

改行して｝を入力します。

また、HTMLにもあるコメント機能は

CSSでは

/* コメント　*/

で表現できます。

プロパティ―を変更することで

様々なことができます。

color

を

font-size

に変更すれば

文字の大きさが変わります。

font-sizeの後ろに：を入力したら

文字の大きさをpixelという単位で

指定します。

たとえば、タイトルの字の大きさを変えるなら

h1 {

font-size: 10px;

}

で文字サイズを

10pixelに変更できます。

また、

font-familｙ

でフォントの種類を指定できます。

フォント名にスペースがある場合は

“”で囲んでください。

h1 {

font-family: “arial next”;

}

プロパティ例：

背景色　background-color:　px

幅　　　　width: px

高さ　　　height: px

HTML 初級2

Sat, 08 Jun 2019 12:17:38 +0900

HTMLでは

テキストに役割を持たせることができます。

たとえば、

タイトルを書きたいときは、

タイトル名

と入力します。

この

を

タグと呼び、

特に

は開始タグ

は終了タグと呼びます。

開始タグは

役割の開始位置を

終了タグは

役割の終了位置を

指定します。

ここでは、

どこからどこまでが

タイトルなのかを示します。

ちなみに、タイトルは

と6段階あり、

が一番大きいタイトルです

タグ例
リンク　
　画像
リスト

また、リンク先や
使用する画像を
ＵＲＬで指定する場合は、
のように
hrefやsrcといった属性と
=イコール
“”クォーテーション
を入力する必要があります。

要素は、
を前につけると
黒点の箇条書きに
前につけると
数字の箇条書きになります。

このように
要素は、
前につける要素を変えることで
特徴が変化します。

要素のように
ある要素を別の要素で
特徴を変えることを入れ子と言います。

などの
特徴づける方の要素を親要素、
などの
特徴づけられる方の要素を子要素
と呼びます。

プログラミングを学ぶと何ができるようになるのか

Wed, 29 May 2019 21:33:22 +0900

プログラミングを学ぶとできること

・エンジニアになれる

・現在の仕事を部分的に簡略化できる

・アイデアを形にできる

・時流への理解が深める

・子供にプログラミングを教えられる

プログラミングを学ぶと

仕事に生かすと、

時短や新たなキャリアを歩めたり、

フリーランスになって

自由な場所で働くことも

現実的に可能です

今後は学校でも

プログラミング教育が

盛んに取り入れられるようになるので

将来、子供の勉強の

お手伝いもできる

プログラミングは

人生をより豊かに

してくれそうです。

プログラミングの勉強始めました。

Tue, 28 May 2019 21:02:53 +0900

プログラミングの需要が

高まり続ける今日この頃

いろいろ調べてみて

面白そうで役立ちそうなので

私も勉強を始めました。

このブログでは

学んだことを発信していきます。

言語はRubyです。

プログラミングに興味ある！

という方や

既に勉強中！もしくは

お仕事にしている！

という方

共感したことや

アドバイスがあれば

お気軽にコメントしてくださいね！

【プログラミング１日目】

・Cloud9が便利

プログラミングの

最初のステップに

「環境構築」があります。

詳しくは

「プログラミング　環境構築」

等で検査してみてください。

要は、

今使っているパソコンで

プログラミングをできるように

環境を整えることです。

実はなかなかめんどくさくて

ここで挫折してしまう人も

いるほどなのですが

Cloud9を使うと

一瞬で完了してしまいます。

使わない手はないですよね！

・ターミナル

Cloud9の左下のエリアを

「ターミナル」と呼びます。

個々を使うと

マウスではなく、

文字でパソコンに命令できます。

ここで「＄」は、

「今パソコンに命令できます」

と待機状態であることを

示します。

「irb」を入力し

Enterキーを押すと

Rubyが起動し、

「exit」を入力し

Enterキーを押すと

Rubyが停止します。

実際の業務でも

使えてしまうほど

便利なCloud9

しかも無料！

使いこなせるように

なりたいですね！