読者です 読者をやめる 読者になる 読者になる

アスリート系ですがプログラミング始めました。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

最初にRuby on Railsにサンプルアプリを作るのにおすすめなサイトは「小学生でもわかるRuby on Rails」

f:id:simpledancer:20170511102159p:plain

この1年弱Rubyを独学でやりだして(実際集中してやったのは数ヶ月ですが。。)

やっぱりちょっと離れると全然わからないしRailsってよくわからない。。

いろんな本が出ているけど、書籍で書かれていることもいまいちピンとこない。

そう思った時に以前見つけていたサイト「小学生でもわかるRuby on Rails」をやってみることにしました。

 

 小学生でもわかるRuby on Rails

まず、「小学生でもわかる」てところで簡単かな?なんて思っていますが

冷静に考えると小学生の方が固定観念というものがないので、プログラミングの地頭めっちゃ作りやすいやん。。。とも考えたのですが、それは置いておいて。。

openbook4.me

最初は環境構築から入りますが、私はローカル開発環境よりもcloud9のが便利〜だと思っているので(ファイルの場所がわからなくなるし。。)cloud9で最後までやりました。

各項目が丁寧にわかりやすく説明してくれる

初心者向けのRails本も丁寧なものは多いと思いますが

どちらかというと私は未知の単語が出てくるとパニックになるのでできるだけ噛み砕いて説明してくれる教材が好きです。

simpledancer.hatenablog.com

なんとなくのルールや流れはProgateで学習してからこの「小学生でも。。。」に取り組むとスランプに陥りにくいと思いました。

だけど実は1回目は挫折しました!

f:id:simpledancer:20170504091840p:plain

去年Railsを独学で始めた頃、とりあえずこの教材をやってみたのですが、実は一度挫折しました。この時もcloud9でやっていたのですが確かエラーの対処の仕方がいまいちよくわからなくて、ググってもわからない。

今回もちょこちょこエラーは出たものの冷静にエラーを読めば進めました。

ちなみに周りに聞くことができない時はteratailなどで質問してます。

無料会員登録で質問し放題のサイト

こういうサイトは本当にありがたいと思います!

質問をする練習にもなりますし、かなり詳しく回答してくださいます。

ググってわからないことは自分で悩むよりも経験豊富なエンジニアさんの力を借りましょう!

エンジニア特化型Q&Aサイトに無料会員登録をする 

自分と同じような質問をしている人もいるので、質問を投げる前に過去のQ&Aを見てからにしましょうね(時間の節約!)

とにかく心強い味方のサイトなので登録しておいて損はないと思います!!

挫折したけどなんとかやりきれたわけ

私、やり通すことも大事だと思うんですが、ダメだったら次、って気分転換のつもりで違う教材も試してみることにしたのです。それでテックアカデミーをやったり、Railsチュートリアルをやってみたり。。。などなど一周回ってまた戻ってきて「小学生の。。。」に戻ってきました。

で、戻ってきてやってみたら一番わかりやすかったです!

小学生レベルまでは追いつけた!!

。。という紆余曲折があったのでスムーズにできなくても諦めないでください。

大概の人はできるかもしれませんが、私は1回普通に挫折してますので。

いきなりRailsチュートリアルに取り組むよりはまずはこの「小学生でもわかる。。」をチュートリアルや書籍で挫折した人は試してみてください。

データベースのところが私的にはかなりわかりやすいなと思いました。

 

プログラミングを始めたいと思ったら、まずは無料のProgateがやっぱり一番だと思った件

「小学生でもわかるRuby onRails」、「テックアカデミー」「Ruby onRailsチュートリアル」をやってみて

チュートリアルがややこしくて7章あたりで止まってます。

気分を直して久しぶりに無料のプログラミングサイトProgateを開いてみると、

Ruby on Rails 5のシリーズが出ていたのでやってみました。

prog-8.com

その他、コマンドラインやgitのレッスンも追加されていましたが、とりあえず久しぶりにRailsをやってみた感想です。

 

Progateが初心者にうってつけの教材だと思った点

2017年5月現在で公開されているのがRails5のシリーズの4までですが

やっぱり初心者に優しくて心が折れない教材だと思ったので初心者がまずはドットインストールよりも何よりも先にProgateをやるメリットを書いてみます。

スライドは動画や長いサイトよりも集中しやすい

Progateは細かくスライドをめくっていくタイプなので集中しやすいですし、達成感があります。

通常のオンラインスクールの教材は一つの章ごとに結構長い文章があるので心が折れやすいです。

また、ドットインストールはレッスン数も豊富ですし、実際手を動かしてコードが書かれているのでそれをを見られるというのがいいのですが、早口なのと、かなり展開が早いので初心者にとっては???になります。3分未満の動画なので集中しやすいとは思いますが本当の初心者にはハードルが結構高いなと思いました。

 

レベルが上がっていく達成感

f:id:simpledancer:20170518215607p:plain

同じ教材を繰り返しやっていたのもあり、レベルが121まで上がってました。swiftやpythonは全然やってないのでいびつなグラフですが。。。

レッスンの課題をやるたびにレベルが上がっていくのを見るのがちょっと嬉しいのです。

語り口が優しい

イラストがかわいいというのはもちろんですが、説明文中で

「今はわからなくても大丈夫です」「〇〇というようなもの、というくらいの認識で今のところは大丈夫ですので進めていきましょう」など、初心者にハードルを一気に上げるような難しいことも無理やり理解させようとせずにおいおいでいいよ〜と言ってくれてるのが安心します。

環境構築をしなくても良い

ターミナル、サーバー、エディタ、ブラウザが全部揃っていてプログラミングするのに必要な環境構築をせずともすぐに学習に入ることができます。

テキストエディタさえも要りません!環境構築って本当にめんどくさいです!

Rubyは普段cloud9で勉強しているのですが、ローカル開発環境も一応構築しました。

経験者の知人に手伝ってもらったので30分くらいでできましたが、それまでに一人でやろうとしたら何度も失敗してしまいましたので放置を数ヶ月してしまっていました。

f:id:simpledancer:20170518220145p:plain

その環境構築の手間をとりあえずは省けて(いずれ必要にはなりますが)まずはプログラミングってこういうもの!というのが勉強すぐにできるので(鉄を熱いうちに打つ感じですね)個人的には全く初めて勉強する人や久しぶりにプログラミングに触る人にはProgateがいいなと思いました。

まとめ

有料のプログラミングスクールもいいけど、まずはProgateをお勧めします!いろんな言語があるのでざっとやってみて自分がまず合いそうな言語を深く勉強してみるのもいいと思います。

余談ですが今度こそテックアカデミーのアプリコンテストにエントリーしたいのでアプリを開発しなくては。。とちょっとお尻に日がつきました!

「82歳でswiftでアプリを開発・リリース!」記事を読んで思ったこと

昨日たまたまmailで登録しているcodeキャンプから来た記事でかなりびっくりしましたのでtweetしました!元記事是非読んでください!他のブログでも書いてますがプログラミングネタだったのでこっちのブログにもちょっと追記してupsしました!

 

82歳未経験でswiftでアプリリリース!

元の記事はこちら↓

82歳にしてSwiftでアプリ開発からリリースまで!スーパーシニアがいると聞いてお話を伺ってきた! | Tech2GO

f:id:simpledancer:20170513125335j:plain

画像:Tech2Go

若宮さんは82歳のエンジニアです。去年の夏、81歳でXcodeを使ってiPhoneアプリ開発を学習し始めた1935年生まれ。

えーっと私の倍以上の年齢です。うちの母親よりも一回り以上上!ちなみにうちの親はスマホさえ使いません!

もともとエクセルで絵を描くということをされていたそうですが、PCに触れ出したのは60を過ぎてから。

f:id:simpledancer:20170418092933p:plain

同じPCでする作業と言ってもエクセルとプログラミングって全然違うし!

ただ「パソコンを触る」ということに抵抗がない。というのは大きいですがなんとmacを触ったのは半年前だそうです。すごいとしか言えない。。

なぜ未経験でシニアの若宮さんがアプリをたった半年でリリースできたのか 

f:id:simpledancer:20170423034259j:plain

  • 作りたいものがはっきりしていた
  • メンターが基礎を忠実にするより早く作れるように無駄を省いて指導した
  • 情熱があった
  • ipadとiphoneを買って自分を追い込んだ

他にもたくさんあるとは思いますが主に上記だと思います。

メンターさんの言葉で

今回は半年間、しかも遠隔というの中で何故アプリリリースできたかというとゴールが明確になっていたからです。いかにして3月3日のひな祭りまでにリリースするかだけを考えました。

やはりゴールが明確でないとだらだら先延ばししてしまいます。

この記事を読んで、始めるのに遅すぎることはないし、始めないのは言い訳してるだけだと思った。

f:id:simpledancer:20170122140420j:plain

いや、本当。

年齢が」「時間が」「お金が」って言い訳絶対してしまうし、それに伴い

自分がそれをやって失敗した時のことを考えてしまう方も多いのではないでしょうか?

私もそうです。そういうこと多々あります。

やったのに失敗したらどうしよう。って。

だけど人って、やった失敗って後になって笑い話になったり忘れちゃったりするけど

やらなかった失敗の後悔ってズーーーっと残るんだって。

思い返してもそうじゃないですか?

なんであの時あれしなかったんだろう。とかありませんか?

私は今まである程度やりたいことやってきたけど、それでもたくさんあります!

実現するには効率化

f:id:simpledancer:20170130013623j:plain

非常に当たり前ですが時間もお金も有り余ってる人なんてそうそう居ません。というか有り余ってるひとこのブログ読んでないですよね。。

若宮さんのやり方でいくと

  • ゴールの明確化
  • 情熱
  • 諦めない
  • 的確に指導してくれるメンターを持つ(独学の場合書籍など)
  • 追い込む

作業をその、自分のやりたいことを実現するために落とし込むのが成功の秘訣。

後になって後悔するより、今計画を立てて実行してみませんか?

 

就活するより若年層はこういう企業で勉強して会社をうまく使おう!

f:id:simpledancer:20170212114830p:plain

 

なんだか年中就活生を見ている気がします。。

黒いスーツに就活用の黒いバッグ。

私も一瞬だけ就活をしましたが、なんだか無理かも〜〜って思って早々にやめてしまいました。(一応当時葛藤はありましたよ)

それで30をすぎて思ったのは

  • 新卒で就職しなくても生きていける
  • 新卒は実際一番下っ端の仕事をさせられて即戦力にならない
  • 中途の派遣からでも大手企業に正社員になる可能性は十分ある
  • 新卒で就職すると人間関係が限定されやすくなる(染まってしまう)

です。

で、このブログはプログラミングブログ、且つこのご時世、エンジニア不足で企業は若年層だと全くの素人でも一からお給料を払いながらプログラミングを学ぶ機会を与えつつ雇ってくれます。またはタダでスクールを受講してある程度になったら卒業、就職というルートです。

メリット

そう、これは若年層しかできないカリキュラムなのです。

そしてその言語はだいたいJavaになりますがメリットとしては

  • タダでプログラミングの勉強ができる
  • 周りに勉強してる同志がいる(年齢も近い)
  • 企業によってはお給料も払ってくれる

もちろんプログラミングはご存知の通り難しいですし、Javaなんて特に脳みそが溶けそうになります。私は35で半年程度やりましたが脳内沸騰したのと、ダンスを諦めたくなかったためそこのスクールはやめてしまいましたが、同年代の全く初心者の方はちゃんとカリキュラムを終えて卒業し、就職を勝ち取りました。

そして、若年層であれば【未経験からプログラマ】完全無料であなたの就職をサポート というようなサービスを利用しない手はありません。だって。。

  • 途中で嫌になってやめてしまってもある程度までかじれば他の言語にうつりやすい
  • ちょっとjavaやってましたって言えばできなくても取ってもらいやすい
  • インターンに行ったようなものなので企業の様子が垣間見れる
  • 人間関係が本入社までにある程度把握できる

というメリットがあります。

これがダメでも次があるって大きいですよね。

完全独学よりは断然集中しやすいと思います。

デメリット

  • 時間の拘束がある
  • やめにくい(だから続けやすいというメリットでもあるが)
  • とにかく時間がかかる

ある程度素養のある人なら問題はないかもしれませんが、プログラミングをかじったことのある方なら分かるようにプログラミングって一筋縄ではいきませんよね。。

でも、だからこそ追い込みたい、身につけたい(しかもタダorお給料をもらって)と考えるのならば一時期の修行としてチャレンジしてみるのは良いのでやないでしょうか??

学生ならではのプログラミングスクールの割引もある!

数あるプログラミングスクールの多くは学生にはかなり安価でコースを受けることができます。

私が以前受講していたTechAcademy [テックアカデミー] は半額です。社会人の私は11万円かかるところが学生だと6万円弱。。。

やるなら好きな言語を勉強したい!

そういう方はぜひプログラミングのスクールを学生のうちに受講してください。社会人で受けるよりも断然やすいです!学割が羨ましいです。

就職活動で下手に対策を練るよりはプログラミングを学ぶために時間を使ったほうが今後の人生に役に立つんじゃないかな〜なんて思ったりしてます。私が学生時代に今戻ったら間違いなくプログラミングやってると思います。

 

改めてプログラミングができたら人生が広がると思った。今の私と今後の目標。

モチベーションの維持と自分の確認の意味を込めてプログラミング関連で今やってること今後やりたいことをまとめてみました。

 

今やってること

  • TechAcademy [テックアカデミー] の再勉強(Ruby on rails)
  • エンジニア派遣登録(明日1件登録と面談に足を運びます)
  • ワードプレスで作ってるポールダンスのサイトで

    Poledance × Trip |のカスタマイズ

  • はてなブログのcssのカスタマイズ当ブログと

    人生をシンプルに☆というミニマリストな自分のブログ(一番私の作ってるサイトの中でpvも収益も多いです←雑記ブログです)

今やってる中でブログを書いたりカスタマイズするのがすごく楽しいです。ワードプレスはプラグインを試したりしていますがイマイチうまくいかないことが多くてサイトがイマイチ落ち着かないのが現状です。。

中期目標

  • エンジニアの仕事を(派遣or バイトで!)やってみる。
  • 途中でやめたrailsチュートリアルを再開する
  • 自分でアプリを作る

やってみたい勉強はたくさんあって

webデザインもやってみたいしUnity面白そうだしiosもやりたいし。。とやりたいことはたくさんあるんだけど一気にって難しい。今は独学でできる環境が整っているので自分次第ですよね。。なかなか進まない。unity難しいよう。

長期目標

  • フリーランスエンジニアになること
  • ブログで食べていける程度の収益を得ること(20万円)
  • 自分の好きなことを反映したアプリケーションをリリースすること
  • ワードプレスのサイトを「ポールダンスといえばこのサイト!」と言われるくらいまで成長させる。

こんな感じです。

長期目標を書くとちょっとハードル上がったな〜と思うけれど

実際これらをやってる人が私の周りにゴロゴロいて

全く畑違いの仕事なので不安はありますがとにかくやるのみ。。です。

私の人生計画の「冬は暖かい国で楽しく暮らす」というのが長期目標が達成できたら叶うので。後半の人生は冬の寒さに愚痴りながら暮らすのをやめたいです!

改めて思うこと、プログラミングできたら人生が広がる

f:id:simpledancer:20170215134654j:plain

私がプログラミングの存在を知ったのは気がつけば2年前。

そっからすぐに行動したけれど

何度も

何度も

何度も

何度も

挫折したんです。

だって難しいし。文系だし。エラーでるし。

何度もやめようと思ったし、今でも全然わからないし、いまだに全然仕事つけてないし(w)でもやっぱり何か作りたいです。

2020年には小学校の必須科目?になるようですので今の子供は当たり前のようにプログラミングを使いこなすと思います。だからその子達に比べたらスキルで追いつくのってまあ無理ゲーだとは想像に難くないです。

だから諦めるという選択肢もあるけれど

やっぱり諦めきれないので地道に勉強を続けます(仕事も朝起きるの辛いけど一旦派遣で未経験で働けるところを経験してこようと思います!)

余談ですが未経験でやろうとするとJavaの案件の会社が多いですね〜Javaはやりたくないな〜〜

プログラミングの愚痴はこのブログで吐きます!

 

テックアカデミーのWebアプリケーションコース・Bootstrap編を再度やってみた。

こんにちはオドリコ@acro_y)です!

今日はTechAcademy [テックアカデミー] Lesson2のBootstrap編を再勉強してみます♪

LESSON2/Bootstrap編

f:id:simpledancer:20170411134018p:plain

ドロップダウンリストを追加したりテキストを変更したりアイコンをサンプルと変えてみたりしてみました。

f:id:simpledancer:20170411134124p:plain

 

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。 - アスリート系ですがプログラミング始めました。

 

Bootstrapとは?

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書いていく場合は全てのスタイルを自分で作っていく必要があるのですが、このフレームワークにはよく使われるスタイルを予め定義してあるので、それをルールに沿って利用するだけで素早く整ったデザインを作成できます。

 1.Bootstrapを使う準備

  • すでにホストされているファイルをインターネット経由で読み込む

という方法でbootstrapとjqueryを読み込みます

フォルダとファイルの作成

cloud9上に新たにフォルダを作成します!

その中にさらにindex.htmlファイルを作成します。

f:id:simpledancer:20170409103528p:plain

index.html内に記述

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

新たに登場しt登場したコードが沢山あります

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IEブラウザではバージョン毎にことなるレンダリング(画像や画面の内容を指示するデータの集まり(数値や数式のパラメータ、描画ルールを記述したものなど)をコンピュータプログラムで処理して、具体的な画素の集合を得ること。)をされてしまっていて崩れる心配があるので互換表示をさせないために設定するmetaタグです。

<meta name="viewport" content="width=device-width, initial-scale=1">

 レスポンシブ・ウェブデザインにするために必要なmetaタグです。

<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootstrapのJsよりも先にjqueryを先に読み込むこと。そうしないとBootstrapのJavaScriptを使う動きが動作しない

グリッドシステム

全然理解してなかった領域です。

使用ルールのところ

  1. class=”container”か”container-fluid”の中に
  2. class=”row”の中に
  3. class=”col-{prefix}-{columns}”の形式で
  4. {columns}は合計値が12になるように指定

特に合計値が12になるように指定

このルールでスタイルをつけると、簡単にレスポンシブ・ウェブデザインに対応した横幅を分割したスタイルを作れます。

↑ちゃんと読んでなかった。。!

getbootstrap.com

この後TechAcademy [テックアカデミー] のbootstrapのレッスンでは

  • テーブル
  • ボタン
  • フォーム作成

が続きます。めちゃめちゃ長くなるので端折りますが、再度勉強してサンプルソースをちょっと変更してみたりすると理解度が深まります。

プログラミングを数ヶ月随分おろそかにしていたので、相当忘れてるし。。

引き続き勉強していきます〜

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。

 

こんにちはオドリコ@acro_y)です!

先日より再勉強を開始しました!

simpledancer.hatenablog.com

時間はそんなにないので本当はサクサク進めたいのですが細切れになります。

だけど1回やっているので前回の半分くらいの時間で終わると(多分思っている)

教材内容はテックにバレると怒られるかも??ですが

勉強した内容と併せて載せていきたいと思います。

Lesson1 HTML CSS

やる内容としては

  • コードの基本的な書き方
  • 画像やリンクの入れ方
  • 色や配置、文字のデザイン的要素
  • タグの説明
  • ホームページのプロフィールを作る
  • お問い合わせページを作る

がざっくりとした内容です。

まず完成系がこちらの感じです。

f:id:simpledancer:20170408120733p:plain

写真や文章内容は私仕様に変更してます。

about.htmlとabout.cssを書くだけでこんなページが1枚出来上がります!

htmlのコードはこんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>odorico | About</title>
<link rel="stylesheet" href="about.css">←cssを読み込むコード
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="selected">About</a></li>←各ページにリンクする
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="logo">
<img src="profile.png" alt="">
<h1>Odorico</h1>←見出し
</div>
</header>
<div class="container">
<section>
<h2>About</h2>
<h3>自己紹介</h3>
<p>Odorico(プログラマー)</p>
<p>兵庫県神戸市出身。フリーランスで活動しています。</p>
<p>最近は、<span class="red">Ruby on Rails</span> を使って仕事をする機会が多くなりました。</p>
<p>私のポートフォリオを見て気になった方は、<a href="contact.html">Contact</a>よりご連絡お願い致します。</p>
<h3>リンク</h3>
<ul>
<li><a href="https://www.facebook.com/odorioco" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/odorico" target="_blank">Twitter</a></li>
</ul>← a href でfbとtwitterのリンクを挿入(urlは適当です) 
</section>
<footer>
<p>&copy; 2015 Yumiko Tezuka.</p>
</footer>
</div>
</body>
</html>

cssページ

ページ内の色つけや配置を調整していきます。

ルールとしては

 {
  : ;
}

こんな感じで

どのタグの{

色: 色指定;

}

例えば

p{

color: blue;

}

 

基本は文字も配置も配色も同じようなルールで書いていきます。

色の値を表現する方法は3つあります。

  • 言葉: red, green, blue, …
  • RGB(16進数): #000から#fffまで
  • RGBA関数: rgba(0,0,0,0)

以上の3つがあり、一番わかりやすいのは言葉でしょう。
red, green, blue, gray, black, whiteなど実に様々な色が用意されています。

次に、RGB(16進数)です。16進数とは、0から数えて0123456789abcdefまでが1桁になる数え方です。
つまり、a=10, b=11, …, f=15で最大値となります。アルファベットは大文字でも構いません。
RGB(16進数)は左からRGB、つまり、#RGBとなっていて、#f00だと赤だけ最大値なので、赤色となります。
他には、#f0fだとRとBが最大値なので、紫色になります。
更に細かくなった#RRGGBBで2桁ずつ使えるものもあります。この場合は00=0からff=255まで使えます。

次に、RGBA関数の場合は、rgba(R,G,B,a)となっており、R,G,Bは0から255の範囲、aは透明度のことで0.0から1.0まで扱えます。

#dddは全ての色が同じ値なので黒#000〜白#fffの間となり、つまりグレーになります。

あとは文字サイズ、画像サイズの変更、余白の調整、文字をふと文字にする。。

などです書き方のルールは全て同じです。

あと私が苦手なのが余白の調整です。

  • margin - 外側の余白
  • border - marginとpaddingの境界線
  • padding - 内側の余白
  • コンテンツエリア - widthプロパティやheightプロパティで指定される内容領域

これらが私は慣れていなくていつも手間取ります。previewを見ながら徐々に調整していきます。

ちなみに画像を丸くするのはborder-radiusを使います。

テキスト通りに

#logo img {
  max-width: 120px;
  border: 5px solid #fff;
  border-radius: 100%;
}

 でプロフィール画像が丸くなります。

  • 画像の大きさを調整するために、max-widthプロパティを使って最大の横幅を決めます。
  • borderプロパティでボーダーラインの幅を5pxでラインの種類をsolid(一本線)、色を#fff(白)にします。

 再度作成してみた感想

細かいバランス、配置などがまだ全然理解できてないけれど

大まかな流れや言葉の意味は結構覚えていた!

多分ブログのカスタマイズをしているうちにこの辺りは覚えてきたのではないか?と思います。

それでは引き続きブログにも勉強内容をupしていきます!