choco-ballの日記

勉強のアウトプットのためのブログ

HTML,CSSの前提知識

HTMLとはHyperText Markup Languageの略で

ブラウザ上に表示する情報を記述するためのものです。

 

CSSとはCascading Style Sheetsの略で

HTMLで記述した情報に飾り付けを行うためのものです。

 

タグとはHTMLの記述で<h1>や</h1>などの<>がタグです。

 

要素とは<h1>・・・</h1>といった感じにタグ+タグで囲まれた中身のことです。

 

head要素は画面上に表示されません。

適用するCSSの情報や、エンコード方式の指定などを行います。

 

body要素は画面に表示されます。

今皆さんがブラウザ上で見ているものはbody要素に記述されたものです。

 

要素の細かい種類などに関しては個別で覚えるだけでいいのですが

大前提として理解しておかなければならないことは、

ブロック要素やインライン要素といった括りです。

 

ブロックレベル要素は

中身の大きさに関係なく横幅いっぱいに表示され、その中にテキストなどが入っています。

また、連続した場合には縦並びに表示されます。

 

対して

インライン要素は

中身の大きさだけ横幅が広が理、連続すると横並びになります。

 

この辺りのことを前提として覚えるのではなく理解していないと

CSSでいじった時に思い通りのレイアウトになりません。

 

さらに親や子といったものもあり、

この親と子に関してもブロックレベル要素とインライン要素の違いを

理解していなければうまくいかないかと思います。

(覚えているだけでは要素の特性がわからないとレイアウト時にうまくいかない)

 

なのでこの辺りは最低限理解しておくようにしましょう。

捉え方一つで変わる

プログラミングを学習する中で、少しでもコードを読みやすくするにはどうすればいいかと悩んでいたところ。

 

. ドットは〜のという意味と捉える。

: コロンは〜はという意味と捉える。

()とかは〜の中にといった形で捉える。

 

上記を意識したらわかりやすくなりました。

 

例えばrailsのコンソールでテーブルを作って中にレコードとカラムを作成するときに。

Test.create(name: "suzuki", text: "こんにちは")

といった具合に記述しますが、

これに先程の解釈を適用すると

Testの作成 中にnameはsuzuki  textはこんにちはを入れる。

というような形になります。

大分イメージを捉えやすくなったのではないでしょうか。

 

少しでも力になれれば幸いです。

 

コロナの方は大分おちついてきました。

コロナァスゥパァトゥルァァァァイ‼︎

とか言えるくらいには回復しました。

deviseの取り扱いでデータの流れが追えず壁にぶち当たってますが、本日も頑張ります。

凡ミス!

railsMVC記述でeditアクションによって編集したデータをupdateアクションに送って更新処理をするつもりでしたが、なぜか更新されない!

 

あれ?エラーもなにも出てないぞ!?

 

まずはeditが正常に動作しているかを確認するため、edit内の記述を変えてみた。

すると無事にエラーがでた。

ということは記述は間違っていないしeditへのパスも通っているということ。

 

じゃあどこなんだ・・・・・・。

 

しばらくコードと睨めっこして気づきました。

 

updateメソッドがprivateメソッド下に記述してあった!

そのせいでupdateの記述がスルーされてしまっていた。

updateメソッドをprivateより上に置いて、無事に解決しました。

 

余談ではありますが、Gemのdeviseは工夫する意味の方です!

deviceじゃないですよ!

自分は初導入時にそこに気づかずインストールが通りませんでした!

 

本日はこのへんで・・・・・・。

初学者がHTML・CSSで気をつけること

まずは自分へのダメ出しを。

 

ちゃんと要素の大きさを意識してCSSの記述をしなさい!

 

 

CSSを適応するときに一番意識しなければいけないのは個人的には要素だと思います。

 

要素といっても個別の要素とかではなくて、インライン要素とブロックレベル要素という区分のことです。

インライン要素は指定しない限りは必要最小限の大きさである。

〈おはよう〉

〈〉内がインライン要素です。

 

対してブロックレベル要素は指定がなければ横に最大限広がる。

〈     おはよう     〉

〈〉内がブロックレベル要素です。

 

横幅にこれだけの差がでてしまいます。

 

また、インライン要素は連続すると横並びになり、ブロックレベル要素は連続すると縦並びになります。

 

このあたりを抑えていないとflexboxを使ったときに、想定通りのレイアウトになりません。

 

以下おまけ

 

連続したブロックレベル要素を横軸の中央に表示したいときには親要素に

display:flex;(要素を横並びにする)

flex-direction:column;(縦並びにする)

align-items:center;(縦軸の中央は配置)

といった記述をします。

何故横軸を動かしたいのに縦軸を動かす記述をするの?

と思ったそこのあなた!

紙に縦軸線Yと横軸線Xを描いてみましょう。

それを目の前で90度回転。

縦と横が入れ替わりましたね?

その状態こそがflex-direction:columnで縦並びにした状態です。

 

ではではまた次回

なぜ30歳過ぎからSEを目指すのか

さて、まず結論から言ってしまうと今後約30年間働き続けるにはどうすればいいか?

今の仕事を続けて自分の幸福を追求できるのか?

と考えた際に、今の仕事では今後30年内に失職する可能性があるし自分の幸せにはつながらないと考えました。

また昔からプログラムに興味があった。

現状のソフトウェアに不満を抱くことが少なくないので、もっと使いやすいものを作りたいという思いが強かったなどの理由があります。

 

私はもともとプログラムに触れる機会が全くない職場ばかりで働いていました。

物流や警備業などです。

それぞれの仕事でやりがいを見出しある程度の地位を確保できてはいたのですが、

働いていく中で、使用するソフトウェアに対して不満を抱くことが少なくありませんでした。

 

GUIに対する不満がメインですが、警備業時代には監視カメラのシステム設計自体に不満を抱きました。

監視カメラの表示レイアウトを自分で9等分、16等分などと決められるのですが、

設定ファイルでレイアウトの情報を保持していないので、等分数を切り替えるたびにレイアウトが崩れる!!

メモリもバカ喰い状態!!

ふざけるな!!

古いソフトウェアじゃないですよ?

2022年のソフトウェアです。信じられますか?

 

とそんな不満を抱いても何もすることができないのです。

ならば自分がより良いものを作ろう!

文句など言わせないレベルのものを作り出してやろう!

という思いからプログラムの勉強を始めました。

 

さて、色々と言いましたが物流や警備が今後失職する可能性があるのか?というと必ずしもそうとは言い切れません。

ただ、求められる人材は変化していくと思います。

物流では自動運転が発達して乗車する人間はドライバーとしてではなく、車に乗りながら自分で積み込み等の手配をするようになるのではないでしょうか?

今まで事務所側とドライバー側という形で分かれていたのもが一緒になりそうな気はします。

警備業ではAIの発達により現場に詰める人間は減っていくでしょう。

また、より多機能になったシステムを使いこなせるような能力も求められるでしょう。

 

上記のように求められる人材の変化のことも考え、

現職を続けるにしてもIT関係の知識は必要だと思いました。

そこから、どうせ学ぶなら使うより作る側になりたい!

そういった思いから転職を目指すこととなりました。

 

趣旨としてはアウトプット用のブログですが、

転職成功という結果を出して30オーバーからIT業界転職を目指す方々の

励みになれれば幸いです。

 

 

あ、コロナは陽性でした・・・。

体調はそこまで悪くないので、本日も勉強頑張ります!

プログラミング一年生

30オーバーでプログラマへの転職を考え現在勉強しています。

 

先週からはじめたのですが、

 

 

まさかの

 

 

 

 

コロナ陽性ぽいです。

 

四人家族で陰性は私だけだったのですが、熱、体の痛み、頭痛、鼻水、喉の痛みと完全にアウトのようです。

勉強が軌道になってきただけにこのタイミングは勘弁してほしかった!

 

あ、これから勉強のアウトプットとしてブログを更新していくので、よろしくお願いします!😷