CSSでGridを使ってみた①
こんにちは、GASSYです。
緊急事態宣言がボチボチ解除される・・・のかな。
いろんな意見があると思いますが、コロナによって時代が5年とか10年とか進むんじゃないかって感じてます。
テレワークやオンライン会議、学校だとオンライン授業とかもそうか。
いや5年とか10年時代が進むってそんなもんじゃないと思うんですけど、パッと思いつくことがその辺。笑
移動コストって結構かかると思ってたので、これが大幅にカットされることは大歓迎です。
一方で対面のコミュニケーションがゼロになることはたぶんないと思っていて、
オンラインでのやり取りが増えると改めて対面の良さも価値が見直されるんじゃないかと。
ただ、これまで 対面オンリーだったところがオンライン併用になるだけで、
業務効率化は大きく改善できんじゃないかって期待してます。
さて、今回はCSSで使えるGridレイアウトについて書いてみます。
flexboxを今まで使っていた私としては、このGridは衝撃的なものでした。。
って言っても、今のところまだ使いこなせておらんのですが＾＾；
今回は触りを紹介して、次は以前私が作成したページをGridで書いたバージョンで比較したものを紹介したいと思います。
まだまだ使いこなせていませんので、Qiitaの記事を参考に要約しています。
また、Youtubeで私がお世話になっているしまぶーさんのIT大学が非常にわかりやすく紹介していますので、是非参照頂けたらと思います。
（リンクは本記事の最下部にてご確認ください）
Gridレイアウトとは何か
CSS Grid Layout（グリッドレイアウト）は、比較的新しいCSSの機能のようです。
CSSでレイアウトを作成するときはfloatやflexboxを使うことがこれまでの主流でしたが、
Gridは今までのやり方よりもより簡単にレイアウトができるようになります。
私はまだ慣れてないのでうまいことできませんが、慣れればかなり簡単に配置ができそうです！
GridレイアウトのGOOD／BAD
＜GOOD＞
・HTMLのコードがシンプルになります
・VS Code上で視覚的にレイアウトがどのように設定されているかわかりやすくなります
レイアウト配置だけでなく、幅や高さ、ブロック間の幅もまとめて設定できます
・DOM構造の自由度が上がるので、デバイスごとのレスポンシブ対応しやすくなります
＜BAD＞
・最新のブラウザでしか使えないです（IEとかはひと工夫必要とのこと）
・レイアウトの切り替わりにアニメーションを入れられないらしいです
と、簡単に書きましたがこんな感じです。
すごい便利そうなんですけど、新しい技術なので若干細くしなきゃいけないこともあるみたい。
ですが、flexboxに比べれば遥かにわかりやすいですし、
これからプログラミング始める方はこっちから学んで行かれた方がいいのかなと思います。
次回は実際に私が以前作ったページをGridに置き換えて作成して、
コードの違いなどを比較紹介できたらと思っています。
ではでは！
【参考にした動画】
【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】
【Qiita参考記事】
https://qiita.com/kura07/items/e633b35e33e43240d363
【その他、参考にした記事】
UI/UXに関するオンラインセミナーに出てみた
こんにちは、GASSYです。
先日、UI/UXに関するオンラインセミナーに出てみました。
私が出たやつは堅い感じのものではなく、ラジオっぽいフランクなやつであんまりセミナーぽくはなかったですが。
現役のUI/UXデザイナーさんたちが登壇して、自分たちのサービスの紹介や、
経験談を5分でプレゼンしていく形式で、内容としては非常に面白かったです。
（途中聞き逃したこともたくさんあったけど）
そんな中で特に印象に残ったことを書いておこうと思います。
それは何かっていうと、、、、
・結局のところ、IT業界も最後は人間力なんじゃないかってこと
・良いUI/UXとEQの高さは切っても切り離せないのではないか
・技術は大事、でも結局ヒトが使うものだってことを忘れない
という、この３点。
当たり前だけどプログラミングで作られるプロダクトもユーザーがいるわけで、
これはマーケティングがプログラミングにも必要であることを意味していると思います。
しかしながら今回のセミナーでとある登壇者の方がご自身の事業の失敗談として、
上記3つができていなかったことを要因に挙げられていました。
テクニカルなことを重視しすぎて、ユーザーに提供したサービスが受いれられなかったと。
エンジニアとしてのコーディング技術だけ高めても、
結局のところユーザー視点で開発できなかったりするとせっかくの技術も水の泡になってしまうということです。
私は３５歳でプログラミングを習得している最中で、
世の中的にエンジニアとして活躍できるようになるのはなかなか時間もかかると思ってます。
（そもそもエンジニアとして技術で勝負する気もあまりないのですが）
ただ、企業に勤めてきたことでマーケティングや企業の業務フローなどある程度理解できてると思います。
なのでエンジニアとして最低限の技術さえある程度身につけば、意外とやれるかもな、なんて思ってます。
自分ができないことはできる人の力を借りて補えばいいと思いますし。
ただ、そうはいってもある程度の技術がないと相手と会話にならないので、今日もエラーと格闘です＾＾；
ではでは。
統計学セミナーに出てきました
こんにちは、GASSYです。
ビジネスマンの多くが読んだことがある「統計学こそ最強の学問である」は
私もしっかり読んだものの、結局実戦で生かしきれないまま・・・。
GASSYは本業でデータをかなり扱うことが多いので、この技術は必修なのにね。
というわけで、セミナーの学習メモを残しつつ、これを機に統計学ちゃんとやろうと思います！
統計超入門セミナー＜目で見てわかる統計学＞
・統計学は最強の学問である→統計学が２０１２年にすごく流行って注目されたみたい。
この本は私も読みました。続編も買ったけど途中で読むのやめちゃったな。。
・統計学の歴史①：国の実態を捉えるために始まった学問（国勢調査）
世界最古の統計は古代ピラミッド建設のときの人口調査とか、
日本だと班田収授法のときらしいです。
近代だとナポレオン時代に統計局が設置されて政府によって統計が整備された
→戦争するためには他国のことより自国を正しく捉えるために行ったとか。
・統計学の歴史②：大量の事象を捉えるための統計
偶然とみられる現象に規律を探究する手法としての統計が用いられたようです。
→母集団・標本の概念
→入り口は志望に一定の規律性があること発見したことが発端にあるとか
（エドモンドハレー氏）
そのデータを元に保険というサービスが生まれたとか。
・統計学の種類は２つ
→記述統計学：データを整理し、数値や表、グラフなどを用いて特徴を捉える
（全体の労力の80％がここに当てられる）
→推測統計学：標本から状況を推理する。推定・検定・相関・回帰分析
・データ分析について
→質的データ：数字でないデータ（文字型）
例）資格の有無、性別とか
→量的データ：数値データ（整数型、実数型）
例）メール送信数、売上とか
※自分が扱うデータがどっちか理解することは大切。扱うグラフや分析手法、難易度が変わってくる
・統計学って必要なの？
平均への回帰から逃れるために統計学が必要になります。
（施策がうまく機能しているかを検証し、正しく改善を加えることが大切）
・データ分析とは
データの要約、データ間の関係性、予測する、結果の検証を行うこと
・分析の第ゼロステップ＝何を目的として分析するのか？
これがないとロスに繋がる・・・何事もイシューが大事ってこと。
・データの要約：この結果を一言でいうとどういうことなのか？
・データ間の関係性について調べる：別のデータと比較することで傾向が見えてくる
・予測する：データの関係性を把握することで予測が可能になる場合が出てくる
・信頼性について検証する（推測統計学）
・量的データの要約
平均値：次に見る（データの中心を捉える）
中央値：次に見る（データの中心を捉える）
→平均が常にいいとは限らない。四分位範囲を活用する（箱ひげ図）
データの偏りやばらつきを視覚化することが大切！
最大値：まず最初に見るとこ（データの異常値チェック）
最小値：まず最初に見るとこ（データの異常値チェック）
標準偏差：データの散らばり具合を表現した数値
金融の世界だと標準偏差が大きい方がリスクが高いと言われるとか。
→データを可視化する【ヒストグラム】の活用
・科学的思考による問題解決（分解と統合）
「分解し、網羅的に調べ、後に統合する」
分解と統合の哲学＝問題解決の共通のアプローチ（ルネ・デカルト）
データの切れ目、変わり目は課題にたどり着くチャンス！
→ロジックツリーの活用なども効果的
★タイタニックデータを学ぶ（面白いらしい）
以上、学習MEMOでした。
無料セミナーは大体その学校のサービス紹介のためのPRですが、
ものの見事に釣られて有料セミナーに申し込みました。笑
エクセルを使ったデータ整形はかなりやるのですが、
一段上に行けるように統計分析を使えるようになりたかったので申し込みました。
今日のセミナーもすごく面白かったですし、改めてこういうの好きなんだな、私。
５月も本業で強制的に休みを取らないといけなくて、
セミナーが全部そことかぶってたのでいいタイミングです。
この時期にしっかりと技術研鑽しておかないとね！
ではでは。
とりあえずHTMLとCSSからやってみよう③
こんにちは、GASSYです。
今日は先日に続き、HTMLとCSSについてです。
どんな記事にしようか悩んでいたのですが、細かいコードの解説ではなく、
それぞれの言語がどんな関係性にあって、
それがどうページに反映されているかにフォーカスして書くことにしました。
（コード自体の解説も最後に入れておきます）
おさらい：今回作るページとそのコード
前回の記事でお見せした、HTMLとCSSを使って私が作ったページのトップとそのコードです。
コードは左側がHTMLで右側がCSSになります。
個人的な解釈ですが、HTMLがページの構図というか、骨組みみたいなイメージで、
CSSが構図の上に載せる絵具というか、筋肉みたいな、そんな感じで考えてます。
プロから言わせればもっと違った表現もあると思うのですが、私はそんな解釈でいまのところ捉えてます。
ちなみに、HTMLはマークアップ言語と呼ばれるのですが、ちゃんと調べたところ、
HyperText Markup Languageの略称をHTMLと呼んでいることがわかりました。
日本語で表すなら、「ハイパーテキストに目印をつける言語」くらいの意味で、
ハイパーテキスト（HyperText）とは、ハイパーリンクを埋め込むことができる高機能なテキストのこと、
そしてハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。
まぁ、、、Webに表示するページの下書きみたいな感じでいいかなと思います。笑
HTMLだけで書くとどうなるか
ページを作る時、HTMLだけでなくCSSも必要だとお伝えしました。
HTMLだけだとどうなるかというのが以下の画像になります。
テキストだけで、画面の左上に寄った状態で書いたコードが順番に羅列されるだけになってしまいました。
ちなみに、コードとページ上の表記はこんな感じのブロックで分けてます。
HTMLでは<body>とか<div>とか、役割に応じて決められたタグで囲って、
その中にコードを書いていくことで左側のような表示を作っていきます。
タグごとにブロックができる感じです。
CSSはこのブロックに対してコードを書いて装飾してくような感じになります。
CSSを当てることで見た目が出来上がる
HTMLで書いたブロックに対し、CSSでもそのブロックごとに装飾したい内容を書いていきます。
私が今回書いたコードだとこんな感じの関係性です。
色事で分けてみてるのですが、イメージを掴んで頂けたらと思います。
それぞれのコードの解説（間違いあったらすみません）
こちらがそれぞれのコードの意味の説明を書いたものになります。
使ってるタグや書き方については自分なりに工夫して修正したつもりですが、
怪しい箇所ありましたらすみません＾＾；
HTML／CSSに興味が沸いた方にオススメの動画
いかがだったでしょうか。
あまり細かいことを書いてもなと思いなるべく視覚的に伝わるよう意識したのですが、
自分の力量の問題も相まってなかなか難しかったです＾＾；
そんな内容でも、少しでも興味を持っていただいた方には是非
私がよく見るエンジニアユーチューバーのしまぶーさんが運営されている、
「しまぶーのIT大学」を是非見てみてください。
これらのことをものすごくわかりやすく紹介してくれています。
私がスクールで学んだ内容よりも遥かにわかりやすく、実践的で内容も濃いと思ってます。無料で見れるのが本当ありがたいです＾＾
他にもIT業界界隈のことなども紹介してくれてます。
私もいつか彼のようにわかりやすく紹介できるようになれるよう、日々積み重ねていこうと思っています。
いつになるやら。笑
ではでは！
とりあえずHTMLとCSSからやってみよう②
こんにちは、GASSYです。
緊急事態宣言が出てからというもの、週４日出勤、週３日休みです。
週４日のうち、１日は出社してますが３日は在宅、
在宅の日は時間有休を取得していつもより１時間短く働いています。
空いた時間で多方面に勉強して力を蓄え、自分のベースアップに努めています。
原則怠け者の私はひとりだけで動機付けするのがいつもだと大変なのですが、
いまはプログラミングを通して出会った２人の素晴らしい仲間のおかげで
以前よりずっと学習を続けることが容易になりました。
その２人が引くほどの努力家なのでついていけてるかどうか怪しいですが、
そこは自分は自分的な感じで、自分のできる範囲でできる限りの努力をし、
仲間からは刺激をもらって自分ができる努力の範囲を少しずつ広げていけたらいいかなと思ってます。
さて、今日は前回につづきHTMLとCSSについて書いていきます。
私のブログは、これからプログラミングを始めようとしてる方、
プログラミングのことは知らないけど興味がちょっとある方に向けて書いています。
プログラミング歴7ヶ月のヒヨッコプログラマーですが、少しでもお役に立てたら幸いです。
例えばこんなページを作ってみる
今回、どこかのページをコピーして解説してみようかとも思ったのですが、
うまく説明できないかもと思い、自分で準備してみました。
ホームページのトップっぽいイメージで作ってみました。
サラッとやりたかったのですが、私自身まだまだヒヨッコなので3−4時間と結構かかりました＾＾；
人様にお見せする以上コードも適当に書けないなと思い色々調べながらやったのもありますが、
それでも始めたばかりの頃は何かを見ながらでもものすごい時間かかってたので、
そこからはかなり成長したのかな。
にしても、改めてですがアウトプットってめっちゃ大事です。
私自身、最近インプットばっかりでしたが今回アウトプットすることで非常に勉強になることが多かったです。
やっぱりやってみてなんぼで、もっと書いて経験積もうと思った次第。
先ほどのページを表示するためのコード
私が作ってみたページのコードは以下になります。
左側がHTML、右側がCSSです。VSコードを使って書きました。
私はいつも左右表示させながらそれぞれ書いてしまうので、今回もそうしてます。
解説しやすいようになるべくシンプルに書いたつもりですが、
如何せん技術や経験が足りない部分もありリファレンスに則ってない使い方をしてるかもしれませんが、
逆に言うとそこまで細かいことを理解していなくても先ほどのようなページは作れるということです。
コード解説までやるつもりだったのですが、
解説入れたりしてたら思ったより長くなってしまいそうだったので、
今回はここまでにしようと思います。
ではでは。
とりあえずHTMLとCSSからやってみよう①
こんにちは、GASSYです。
今日はプログラミングのことについて書きます。
プログラミングにはいろんな言語がありますが、スクールではHTMLとCSSから学びました。
なので私もHTMLとCSSについて書いていきます。
今回の記事では、この言語がどんな言語で、どんなことができるようになるかを
私の言葉で紹介したいと思います。
私も言うてプログラミング歴7ヶ月目のヒヨッコですが、
そんなヒヨッコが7ヶ月間一生懸命勉強して学んだことが誰かの助けになるようなら、此れ幸いにございます。
HTMLとCSSって何？どんなことができるの？
HTMLとCSSはどちらもWebページの「見た目」を作ってくれる言語です。
私のなかでは、HTMLで絵の構図を作って、CSSによってHTMLで書いた構図に色や形をつけて絵に仕上げていくような感じで捉えています。
HTMLだけでもCSSだけでもWebページの「見た目」は作ることが基本はできないです。
両方を掛け合わせて「見た目」になっていきます。
どんなコードを書いたらどんな見た目になるのかは、次回書いていきます。
なぜHTMLとCSSから始めたのだろう？
スクールでこの言語から始めた理由について少し考えてみたのですが、
プログラミングの入り口としては比較的簡単だし面白いって感じやすいからなんじゃなんじゃないかと考えています。
どう面白いかというと、個人的には書いた言語による変化をすぐにChromeで視覚的に確認できる点ですかね。
ノートとかに下書きでこんなイメージのページを作ろう、構図はこんな感じ、ここの色はこんな感じ、フォントは・・・みたいな設計書をざっくり書いて、
それをプログラミングで書いていって、ブラウザに反映させて確認して、
カッコよくできた、うまくできたって時は嬉しかったりします。
私は特にフロントエンドが好きなので、やってて楽しいです＾＾
※ちなみに、厳密にいうとHTML／CSSはマークアップ言語であってプログラミング言語ではないらしいですが、そこの違いが私はあまりわかってません・_・；
JavaScriptを併用するともっと色んなことができる
いや、JavaScriptってなんやねんって感じかもですが、JavaScriptはHTMLとCSSで書いたWebページを動的なページに変えてくれる言語です。
よくECサイトとかでNEWSのバナーがクルクル入れ替わったりするのとか、
Twitterのいいねボタンとかあると思いますが、あれはJavaScriptで書くことができます。
最近のWebサービスではJavaScriptやそれに近い言語をHTML、CSSと併用して作っていると言われてます。
JavaScriptはHTML、CSSと比べてかなり難しいですが、
これができるようになると他の言語への転用もすごくできますし、
何よりカッコいいページを作れるようになりますので何とか習得できるよう毎日取り組んでいます。
いつかこのブログで内容について書けるくらいになりたいと思います。
まずはHTMLとCSSからやってみよう
というわけで、ものすごく簡単ですがHTMLとCSSがどんな言語で、
どんなことができるのか、なぜこの言語からやるのがいいと思ったかを書きました。
次回はコードを実際に書いてご紹介しようと思います。
ではでは。
プログラミングを始めるための下準備をしよう
こんにちは、GASSYです。
テレワークが始まって早1ヶ月。普通に仕事ができる、普通に買い物ができる、
普通に仲間と飲んだり、普通に家族ででかけたり、
普通って本当に尊いなと最近毎日思ってます。
自粛って言葉が最近の中で一番嫌いな言葉になりそうです。
この自粛については個人的に色々と思うことはあるけれど、
一日でも早く普通が取り戻せるようにできることをやるしかないし、
いつもより時間が浮いた分でプログラミングやその他周辺知識をたくさん吸収して、
力を蓄えておこうと思います。
好きな漫画やアニメ、音楽もたくさん楽しもう。笑
話がものすごい脱線しました。
私のブログではプログラミング初心者の方に向けたプログラミングのことや、
その周辺情報を紹介することをテーマにやっています。
今日はそもそもプログラミング始めるために必要なもの、準備しなきゃいけないものを紹介したいと思います。
Macを買おう
Mac買いましょう。いや、Windowsでもいいと思うんですけど。
でもなんだかわかんないですがエンジニアとかクリエイターはMac使います。
私もプログラミング始めるにあたってMacを使い始めたのですが、
慣れたらめっちゃ使いやすいし何せ速いです。本当速い。
そして見た目がシンプルにかっこいいです。笑
ちなみに、私はMacBookPro買いました。当時2019が最新モデルでしたが、
私は2017のProにしてます。価格は値切って12万くらいだったかな。
当時の最新のMacBookAirと同じくらいの値段でしたが、
PCとしてのスペックは旧式でもProの方がいいとのことでそうしました。
ちなみに、Airは軽さをウリにしてるんですけどProと比べて100グラムも変わらなくて、
正直体感的に気持ち軽いかなくらいだったので私はスペック&コスパを取りました。
VS Code（Visual Studio Code）をインストールしよう
これがないと始まらないのがVSコードです。
これはテキストエディタと呼ばれるものの一種になりますが、
テキストエディタとは文書やプログラムのコードを編集するためのソフトです。
VS Codeはそのテキストエディタの一種になります。（無料）
プログラミング特化型のエディタで、エンジニアに非常に人気の高いエディタの一種とのこと。
私はこれ以外まだ使ったことない初心者ですが、
スクールでもこちらを推奨されたのと、
Yahoo出で現在はユーチューバーエンジニアのしまぶーさんなんかも
とりあえずわからんかったらVSCode使っといたら間違いないってことでした。
なので、とりあえずこれ使ってみましょう＾＾
https://code.visualstudio.com/download
※今更だけど、Microsoftのソフトだったのか。笑
VS Codeの拡張機能を追加しよう
さて、VS Codeですが便利な拡張機能が多数用意されています。
ここではその一部でとりあえず初心者はこれやっといた方がいい、みたいなものを紹介しておきます。
以下、Qiitaと呼ばれる日本のプログラマーが良く使うサイトから
拡張機能24選という相当な方が読まれた記事があったので引用してます。
https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234
その２４のうち、とりあえず入れといた方がいいかなと思ったものが以下です。
（ナンバリングはリンク先の24の機能から取っています）
１）vscode-icons
３）Prettier
５）Backet Pair Colorizer
１１）Japanese Language Pack
あたりでしょうか。
（機能の説明などはリンク先を参照ください＾＾；）
とりあえずは以上です。
データを扱い始めるとMySQLとかコマンドラインの使い方とか諸々出てきますけど、
とりあえず次に私がご紹介したい言語をやるにあたってはVS Codeがあれば大丈夫です。
ではでは。
