マガジンのカバー画像

初心者がゼロから始めるプログラミング学習

9
プログラミング未経験の私が、学習内容を短くわかりやすいをコンセプトに、実際に自分が学んだことをアウトプットして自分の復習➕読んでくれる方がわかりやすいと思ってくれるようにまとめま…
運営しているクリエイター

#プログラミング初心者

初心者がゼロから始める【CSS】プログラミング【学習9日目】背景色をいじってみよう

初心者がゼロから始める【CSS】プログラミング【学習9日目】背景色をいじってみよう

こんにちは、ryomaです。

今回は文字の背景色をCSSを使って変えてみたいと思います。
CSSは目に見えて分かる部分を変えることができるので、学習していてたのしいのですね!

それではさっそくいってみましょう

CSSを使って文字の背景色を変えてみようまずは外部参照を用意します。
外部参照については、以前の『外部参照を使ったCSS』という記事でまとめていますのでよかったらごらんください。

もっとみる
初心者がゼロから始める【CSS】プログラミング【学習8日目】外部参照を使ったCSS

初心者がゼロから始める【CSS】プログラミング【学習8日目】外部参照を使ったCSS

こんにちは、ryomaです。

今日からCSSの学習に入ったので、CSSについてまとめていきたいと思います。

CSSはHTMLで構造化された文章を装飾する言語です。
HTML➡️文章構造
CSS➡️見た目

ざっくりと説明するとこんなイメージです。

CSSが実装される前は、HTMLタグのtable要素を使っていましたがメンテナンスがしずらかったりSEOに弱いなどの問題点がありました。
以上の点

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習7日目】ログイン画面とお問い合わせフォームを作ってみた

初心者がゼロから始める【HTML】プログラミング【学習7日目】ログイン画面とお問い合わせフォームを作ってみた

こんにちは、ryomaです。

今回はHTMLでログイン画面とお問い合わせフォームを作ることを学習したので、その内容をまとめていきたいと思います。

SNSにしてもAmazonなどの販売サイトでも必ず見かけるもので、『自分で作れるようになるのか!』と思うとワクワクしてしまいました。
実際にサービスを作った時にも、会員登録やログイン情報が必要なものであれば必ず使うものになってくるので、しっかりとマス

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習6日目】要素について

初心者がゼロから始める【HTML】プログラミング【学習6日目】要素について

こんにちは、ryomaです。

今回は<span>要素についてを学習したので、それについてまとめていきたいと思います。

そもそも<span>要素とはどんな意味?かというと『文章の特定の部分をCSSで装飾したいときに使う要素』です。

今まで学習した内容だと、文字全てが赤くなっていましたが<span>要素を使っていくことで「特定の場所」だけ赤くすることができました。

実際のコードがこちらで、<s

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習5日目】強調表示と著作権表記

初心者がゼロから始める【HTML】プログラミング【学習5日目】強調表示と著作権表記

こんにちは、ryomaです。

今回は、文章の一部を強調したり著作権表記について学習したのでまとめていきたいと思います。
強調表示については本来CSSでデザインすることが一般的なので、「HTMLでも一応できますよ」という感覚で読んでください。

文字の強調表示について

ブラウザ表示がこちら

上記のように「noteにまとめる」の部分が、<strong></strong>要素によって強調された表示

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習4日目】見出しと外部リンクと内部リンクのまとめ

初心者がゼロから始める【HTML】プログラミング【学習4日目】見出しと外部リンクと内部リンクのまとめ

こんにちわ、ryomaです。

今回は外部リンクと内部リンクの貼り方をメインに、学習内容をまとめていきます。
HPを作る上でリンクは必ず必要になってきますし、ブログなどでも公式サイトへのリンクやアフィリエイトリンクなどを貼ることがあると思いますので、参考になればと思います。

今回の記事内容
・見出しの付け方
・画像の入れ方
・外部リンクの貼り方
・内部リンクの貼り方

上記4つの学習内容をまとめ

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習3日目】リストの作り方

初心者がゼロから始める【HTML】プログラミング【学習3日目】リストの作り方

今回はHTMLを使って【リストを作成】する方法を学んだので、使った要素などをまとめていきます。

改行方法について

pの要素の中に入力した住所を見やすくするために、改行要素の<br>を入れて改行をしました。

実際にブラウザ画面に表示すると、<br>のところで改行されています。

区切り線を入れてみるブログ記事などでたまに使われている区切り線を入れてみます。

TwitterとInstagram

もっとみる
初心者がゼロから始める【HTML】プログラミング【学習2日目】構文チェック方法解説

初心者がゼロから始める【HTML】プログラミング【学習2日目】構文チェック方法解説

こんにちはryomaです。

HTMLの学習を初めて、2回目の動画学習が終わりました。
教材通りに進まずに「何が違う」のかがわからずに止まってしまうことありますよね。
実際に私も</body>の『/』が抜けているだけだったりして「なんだ・・これかぁ」となりました。

学習する上で、自分で間違いに気づくことは重要なことではあると思いますが、時間の無駄にもなってしまいます。
例えば上記の</body>

もっとみる
初心者がゼロから始める【HTML】プログラミング学習

初心者がゼロから始める【HTML】プログラミング学習

みなさまこんにちは、ryomaです。

先日とある教材のセールが行われていましたので、以前から学習してみたいと考えていたプログラミングの教材を初めて買ってみました。

この記事では、スタートから初めてのHTMLを入力してブラウザ上に表示させるところまでを、まとめていきます。

Visual Studio Codeの導入
まずはプログラミングのコードを書くためのエディタの導入から始めました。
プログ

もっとみる