CSS関連オススメサイト
こんばんは、GASSYです。
緊急事態宣言明けから毎日がものすごいスピードで過ぎていってます。
振り落とされないように脳味噌フル回転です。
聞き慣れないワードのオンパレードで毎日クタクタですが、
こういった後には成長が待ってますので頑張り抜きたいところです。
さて、今回ですが、CSSの終わりとして私がよく参考にするサイトを紹介させていただきたいと思います。
フォント、カラー、画像、フレックスボックス、この辺調べる時大体見に行くサイトです。
特にフォントとカラーは見てるの飽きないです＾＾；
カラーを紹介しているサイト『原色大辞典』
Webサイトのカラーリング考えたりする時に良く見に行ってるサイトです。
私は和系の色が好きみたいで、このサイトの和色系を良く使ってました。
色味もさることながら、色の名称がカッコ良くて気に入ってます。笑
フォントを紹介しているサイト『Font-familyメーカー』
Webサイトで使うフォントを紹介してくれています。
フォントも奥が深くて、このサイトずっと眺めてられるくらい楽しいです。
フォントひとつで本当ガラリと印象が変わりますよね。
https://saruwakakun.com/font-family
flexboxの使い方を紹介しているサイト
レイアウトを行うためによく使われるプロパティ、display:flex。
このテクニックをわかりやすく紹介してくれてるのが
『もう迷わない！CSS Flexboxの使い方』です。
やり始めた当時全然うまく使えなくてかなりネットで使い方を紹介したサイトを探し回ったのですが、
個人的にはこれが一番わかりやすくて、後々まで見続けてました。
最近はさすがに見なくてもだいぶ使えるようになりましたけど、
やっぱりたまに見に行ったりして確認してます。
https://webdesign-trends.net/entry/8148
サンプル画像をランダムに当てる時に使うサイト『Unsplash』
サイト構築時にサンプル画像としてあてに行く時のソースとして使ってます。
CSSの方で読み込むと反映してくれるようになるのですが、
これのランダムが結構便利で、ポートフォリオサイトとかにそのまま使ってました。
写真もちゃんとしたフォトグラファーが撮ったものが多いのでカッコいいやついっぱいあります。
以上、個人的にお世話になっているCSS関連サイトになります。
また何かいいもの見つけられたら紹介したいと思います。
ではでは！
CSSの基本③
こんばんは、GASSYです。
最近はもっぱら本業で手一杯。
副業したいなって思ってましたけど、時間の使い方や何をやるか、
改めてしっかりした設計が必要だよなと痛感しています。
時間は有限。その時間を何に換えたいのか。
最近は本業やりながらちょっとした時にそのことを考えてしまいます。
本業はライスワークであることはもちろんですが、
結構貴重な経験をたくさん積ませてもらってるよなって思います。
その経験を生かしつつ、自分のやりたいことや興味のあることをベースとして、
副業で何かしらやりたい！って気持ちだけはあるのですが。。
これは改めて考えをまとめていきたいなと思います。
さて、今日はCSSの基本第三回目です。
今回はレイアウトの配置とかその辺りを指定するプロパティを紹介していきます。
前回同様、以前簡易的に作成したサンプルページのソースコードを参照頂きながら紹介したいと思います。
配置などレイアウトを調整する主なプロパティ
padding
ボックスの中の幅を調整してくれるプロパティです。
サンプルページで例えるとヘッダーの「GASSY BLOG」という文字と、
その文字を囲っている黒い四角の枠との隙間の距離を指定して余白をつけています。
margin
ボックスの外側に対して幅を持たせてくれるプロパティです。
よく使うプロパティですが今回私のソースコードでは使ってない。。
display
レイアウト配置でめっちゃ使います。
gridっていうプロパティの方がわかりやすい みたいなんですけど私はまだ使い切れてないです。
このプロパティを使ってflexとか組み合わせることで要素の配置がしやすくなります。
text-align
テキストの配置を揃えてくれます。私のソースコードだと、
フッターの配置をtext-align:centerとして中央揃えに指定しています。
position
要素の位置を固定したりするのに使います。
私のソースコードだと、フッターの位置を固定するためにposition:absoluteとしています。
と、本日はここまで。
CSSってやりだすと結構楽しくて実はいろんなことができます。
今回紹介したものも、正直使いこなせるようになるまでかなり苦労しましたが、
CSSは目の前で変化がすぐに出るので比較的楽しんでやれるんじゃないかと思います。
もっともっとわかりやすいページたくさんありますので、
興味を持たれた方は是非試しにWebサイトのトップ作ってみてはいかがでしょう＾＾
ではでは！
CSSの基本②
こんにちは、GASSYです。
今日は珍しく外でBLOGを書いてます。
私には５歳（今年６歳）の娘がいるのですが、
娘のバレエ教室が今週から再開となったので教室に向かったところ、
なんと今日は定休日だったっていう＾＾；
教室に預けてる間に隣のコンビニのイートインでBLOG更新しようと思ってましたができなくなってしまったので、
娘と公園に移動して公園のベンチでマック開けてカタカタしてます。
たまにはこういうのもいいもので、今度テレワーク外でやってみよかな、なんて。笑
さて、今回は前回に引き続きでCSSの基本その②です。
前回はCSSの基本構造について触れました。
今日はCSSのプロパティをいくつかご紹介したいと思います。
せっかくだし、ちょっと前に作ったサンプルHPのソースコードの中から紹介します。
文字や背景の見た目に反映させるプロパティ
background-color
ページの背景色を指定します。16真数使ったりして指定しますが、
私はカラーパレットだけを取り扱うサイトにものすごい種類の色とその表示のための値を調べて使うことが多いです。
カラーパレット眺めてるだけで結構幸せを感じるGASSYです。
無駄に時間食うときも多々あるけど。笑
background
背景に画像とか差し込みたい時に使ってます。
こちらのページはbackground: url("https://source.unsplash.com/random") fixed;と記述することで、
unsplashという画像無料提供サイトの画像を自動的に飛ばしてます。
ランダムで画像が切り替わっちゃいますけど、サンプルページだしこれでいっかなと。。
color
文字の色を指定します。色の指定方法はbackgroundと同じです。
font-family
文字の書式を指定します。こちらのページはデフォルトのフォントですが、
好きなフォント探して使うのもページ制作の醍醐味だよなって思います。
真面目にやるときは書式集サイトから探して反映させます。
これまた眺めていろいろ探してるときが結構楽しくて幸せです。笑
font-size
文字の大きさを指定します。
font-weight
文字の厚みを指定します。font-weight:bold で太字になります。
と、Macbookがめっちゃ熱くなってきてやばそうなので今回はここまで。
次回はプロパティの中で配置を指定するものを紹介したいと思います。
ではでは！
CSSの基本①
こんばんは、GASSYです。
最近本業に追われていままでみたいに学習時間を取れていません。
追われてる状態ってあんまりよくないと思ってて、一時的ならいいんですけどあまり長いと色々よくない。
気持ちに余裕なくなりがちですしね。。
そんな時は逆にそういう状態であるかとを意識する方が落ち着いたりするようです。
本業は徐々に落ち着きつつありますので、学習のペースをこれまた徐々に戻していきたいです。
さて、今回はCSSの基本について書いていきたいと思います。
私のブログは初学者の方やこれからプログラミングを学んだ方に少しでもわかりやすく伝わることを意識して作成しています。
今回の記事が少しでも誰かのお役にたったならこれ幸いにございます。
CSSって何？
まずCSSって何？って話です。
みなさんが普段見られてるWebページの見た目の部分は、
主にHTMLとCSSの2つのマークアップ言語を使って作られていることが多いです。
HTMLがページの骨格や文書の内容を作ってくれて、CSSはその骨格に色づけを行ってくれます。
昔はHTMLにCSSみたいなスタイル指定もできたみたいですが、
HTML５になってからそれらの機能は無くなってHTMLとCSSでそれぞれ書く仕様になったみたいです。
CSSの基本の「き」
CSSには基本的に3つの要素を使います。
①セレクタ：CSSの内容を反映させたいHTMLのテキストを指定するためのもの
②プロパティ：HTMLに反映させたいCSSの内容（背景の色とか文字の大きさとか）
③値：プロパティで文字のサイズの指定をした場合、その文字の大きさを決めるもの
要は、どのHTMLに、どんな内容のスタイルを、どのくらい反映させたいか、ってことです。
ちなみにこんな感じで書きます。
p { font-size : 15px }
解説すると、、、
p →セレクタです。これから書くCSSを反映させたいHTMLの箇所を指定しています。
font-size→プロパティです。font-sizeはフォントの大きさを指定します。
15px→値です。この場合、フォントの大きさを15pxにすることを意味します。
となります。
こんな感じでHTMLとCSSをたくさん組み合わせてWebページを作っていくことができます。
ということで、今日はここまで。
次回はCSSにどんなプロパティがあるか紹介させていただきます。
ではでは！
HTMLの属性タグについて②
こんにちは、GASSYです。
今日も朝から晩まで本業で必死のパッチでした。
私がどんなに追い込まれて必死こいてやっても、当たり前だけど結果だけで評価されます。
できてなかったらダメ。期待に届いてなかったらダメ。
私もそらプロだから仕方ない。
プロとして、顧客の求めるものを常に全力で出し続けていくしかないってことですね。
認められなくてモヤモヤしてる時点で、私はプロとしては２流ってことなのだろうなぁ。
承認欲求からの開放は永遠の課題なGASSYです。
さて、今回もHTMLの属性タグについて書いていきます。
前回の続きで主に使用されるタグの種類を紹介したいと思います。
主なタグの種類
＜p＞タグ
段落を定義する時に使うタグです。
<p>＊＊＊＊＊</p>みたいな感じで書きます。
このタグで囲われた部分までがひとつの段落の扱いになります。
＜h1〜h6＞タグ
見出しに使うタグです。h1から順に大きくて、h6が一番小さくなります。
このブログの見出しもhタグで書かれてます。
＜img＞タグ
画像を表示させるためのタグです。
<img src = "gassy.png">と書くことで画像を指定し、表示させられます。
リサイズなどはCSSでやることが多いです。
imgタグは</img>みたいな閉じタグは使いません。使うとエラーが出ちゃいます。
＜a＞タグ
他のページへのリンクを生成したい時に使います。
<a href="https://blog.hatena.ne.jp/gassy1985/gassy1985.hatenablog">BLOG</a>
と書くことで、BLOGにGASSYBLOGのリンクを生成できるようになります。
＜ul＞タグ ＜liタグ＞
リストを生成するためのタグです。
ul=unordered listの略で、順番のないリストを作成する際に使用します。
liと組み合わせて使うことが多いです。
<ul>
<li>theme1</li>
<li>theme2</li>
</ul>
こんな感じ。テーマ１、テーマ２というリストをulの中に持たせてます。
＜form＞タグ
文章入力フォームとか情報を入力できるフォームを生成します。
データのやりとりはRuby on Railsとかで行います。
HTMLはあくまで書いたりできるようになるフォームを作ってくれます。
＜button＞タグ
ボタンを作成してくれるタグです。デザインはCSSで変えられます。
<button type = "submit" value = "SEND">
みたいに書きます。ボタンの機能にデータ送信機能をつけ、名前をSENDとしてます。
＜select＞タグ
セレクトボックスを作ってくれます。セレクトボックスはプルダウン式。
JavaScriptとか他の言語と組み合わせることでよく見るセレクトボックスのような動きをさせられるようになります。
と、大きくはこんな感じです。
属性タグはものすごい数ありまして、プロのエンジニアの方でも全部覚えてるなんてことはほぼないそうです。
それよりも用途に応じて検索して使うということが多いとのこと。
エクセルの関数とかと似てますね。
mozillaというサイトを見るとHTMLのリファレンスがあって、
そこで属性タグについても詳細に書かれてます。
興味を持たれた方は是非。
ではでは！
参考：Mozilla
HTMLの属性タグについて①
こんにちは、GASSYです。
最近本業がかなり立て込んでおり、プログラミングから遠ざかってしまってます。。
改めて、リソース配分が下手というか、リソースの限界値が低いというか。
本業にリソース全振りすると、疲れてそれ以外への余力が一切残らないっていうね。
効率化だの何だのはもちろんですが、
新しいプロジェクトってこともあって自分の中で予測出来ないことが起きまくってて。
それを柔軟にかわすこともできずとりあえず受け止めて打ち返すのに必死、みたいな。
球筋見極めれんけど飛んできたやつはとりあえず振りに行け！って一番あかんやつ。笑
これまた特打と思ってリソース拡張に努めていくしかないです。
あともうひとつは、リソースを自力の拡張だけで行おうとしないこと。
つまりは仲間を引き入れて自分のリソースにしてしまうということですが、これがほんっっっっとうに下手くそで。
ですがこっちの方が明らかに仕事に効くと思いますので、意識的に習得に努めたいと思います。
さて、今日なんですけどフロントエンドのHTMLについて、属性タグの説明をしたいと思います。
自分の復習メモ的要素強いですので初学者の方にはちょっとよくわからないかもしれないですが、
ご容赦頂けたらと思います。
タグって何？
HTMLでコードを書く際、ブラウザ上での「役割を定義づけるもの」がタグだと解釈しています。
ブラウザで普段私たちが見るページは大体がHTMLとCSSで形作られています。
HTMLでブラウザに表示するための骨格を作って、CSSで色を塗って形作っていくような感じです。
その骨格にもいろいろな役割があります。
例えばページのトップに固定表示させるヘッダーとか、コンテンツの見出しとか、コンテンツの種類とか。
その役割を定義づけするのがタグです。
書き方はこんな感じ
↓
＜h１＞GASSYのブログ＜／h１＞
この記述により、「GASSYのブログ」には「h１」という役割が定義づけされます。
ちなみに前の＜h１＞を開始タグ、＜／h１＞を終了タグとよび、
この開始タグから終了タグまでの定義を「h１要素」と呼びます。
主なタグの種類
＜html＞タグ
これからコーディングする文書がHTMLであることを宣言するタグです。
＜html＞＜／html＞の間に様々なコードを書いてページの骨格を作ります。
＜head＞タグ
HTML文書全体の基本情報を書くためのタグです。
サイトにタイトルとか読み込みたいCSSの指定などを、
この<head></head>の中に別のタグを組み合わせて記述していきます。
＜title＞タグ
Chromeのタブに表示させる名称を設定するためのタグです。
<head>タグ内に以下のような形で記述します。
<head>
<title>サイトのタイトルです</title>
</head>
こんな感じで書くと、Chromeのタブに「サイトのタイトルです」と表示されます。
＜link＞タグ
指定した文書を参照するタグです。
今書いているHTMLファイルに反映させたいCSS情報などを指定することが多いです。
<link rel = "stylesheet" href = "style.css" type = "text/css">
みたいな感じです。終了タグはなくて、つけると逆にエラーになります。
＜body＞タグ
<body></body>の間にページの中身を書いていきます。
＜header＞タグ
ページのヘッダーを設定します。Webサイトの一番上にくるやつです。
主にサイトのメインの説明とか、ナビゲーションを表示することが多いです。
＜main＞タグ
ページのメインコンテンツを定義づけします。
この中にサービスなどメインで使ってもらう内容を書いていきます。
＜footer＞タグ
ページのフッターを設定します。フッターはサイトの一番下部ですね。
よくあるのは著作権とか注意事項的なやつが書かれます。
今回は以上になります。主にページ全体の骨格を作るためのタグを紹介しました。
次回はその中身を作るためのタグについてご紹介したいと思います。
ではでは！
私のプログラミングに対する考え
こんにちは、GASSYです。
昨日、本業の方で嬉しいことがありました。
これまで頑張ってきたことが明確な形で、しかも自分が望んだ形で評価されたっていう。
4年前、どん底からのスタートで、ダメダメな自分と向き合いながら歩いてきました。
周りに認めてもらえなくて、何回嫌になって辞めようと思ったか。
ただ、辞めたい理由を探すんだけど納得いくものが見つからなかったり、
結局のところ現状に納得しないまま辞めるのが何か嫌だったのかな。
古臭いかもしれないですが、
感覚的に「ここで評価されないようなら他でもダメな気がする」ってのがずっとありまして。
仮に出て行った先で評価されても、今の会社の人らに「逃げた」とか「アイツはここではダメだった」とか、
そんな風に見られるのが何か許せなかったのかもしれない。
結局のところ、自分の中で辞めること＝逃げっていう感覚が強かったんだと思います。
これは逃げることを否定したいわけではなく、あくまで私の中の納得度の話です。
逃げたくなったら逃げようってのは常に思ってたんですけど、耐えられないほどの何かもなかったですしね。
正直、今回の評価を得るまでに自分が当初思っていたより多くの時間がかかったし、
その割にまだまだ課題は残ってます。
ですが、独立するにせよ、復業するにせよ、私がいま思っている課題は解消するに越したことはないので、引き続き頑張らないとです。
そして、こんな自分をここまで指導してくれた上司や、関わってくださった偉大な先輩たちに感謝しかないです。
さて、前置きが少し長くなってしまいましたが、
今回は私のプログラミングに対するスタンスや、副業について思うこと、
プログラミング学んだ先に何をしたいのか、現時点での考えを残しておこうとおもいます。
そもそも、なぜプログラミングを始めたのか
ちょうど19年の１月に、
・今の会社に大きな不満はないけど、収入とかもっと短距離であげられないか
・今の会社でのし上がっていくのは、自分の力以外の要素も大きくて簡単ではなさそうだ
・そうなると、例えば今の会社に業務委託契約とかにしてもらって、複数企業と仕事をやれるようにした方がいいかもしれない
・ただ、自分には肩書きとかそういうものもないから、今できることや興味あることで肩書きとか手に職つけるのがいいかも！
そんなことを考えるようになりました。
で、ちょうどコンサルみたいな仕事を本業でやってたので、学校通って中小企業診断士の資格を取ろうって思ったんですね。
MBAと迷ったんですけど、コスト的な問題で中小企業診断士にしようと考えました。
ただ、学校の応募始まるのが19年９月とかで始まるまでの間に時間があったので、
そんな中、まだアンニュイな感じだった頃のマコなり社長の動画を見始めて、プログラミングを知りました。
なんでプログラミングにしたのか
で、なんで中小企業診断士をやめてプログラミングにいったかというと、
簿記の時に感じてたんですけど資格試験の勉強って本当にそのための勉強って感じで、
あんまり実践的じゃないなって思ってました。
簿記３級のときは勉強開始時期が試験まで1ヶ月しかない時だったんで勢いで勉強して合格できたんですけど、
簿記２級までは結構間も空いて、その間勉強はするんだけど試験のための勉強をしてる感覚が拭えませんでした。
中小企業診断士のテキストとか本屋で読んだりしてみるわけですけど、簿記２級でこの感じだったら中小企業診断士とか絶対無理だなってなり。
これは私の性格や、勉強苦手だったことも大きく影響してると思いますが、
モチベーションを維持できなくなりそれで続かなくなっちゃったんですよね。
でも何かしら、勉強して自分の能力を拡張したい思いだけがあって、
エクセルとか得意だし、VBAはちょっとできるし、これから需要ありそうだからプログラミングやってみるか？と考えるようになりました。
プログラミングを学び続ける理由
で、19年10月から旧テックエキスパートに通ってプログラミングを学び始め、無事4月中旬に卒業しました。
20年５月末現在はフリーランス案件獲得期間なのでその活動に勤しんでいます。
プログラミングの技術力は正直イマイチですが、それでも続けていこうと思ってます。
その理由ですが、
・ITはどの事業領域においても切っても切り離せないものであるから
・プログラミングを続けることでITの最先端の知見を得続けるきっかけになるから
・その知見があることで、本業におけるPMO業務や、システム系会社との商談時に話がある程度対等にできるため
・続けていくことで技術が向上し、プログラミングだけで収益をあげられるようにできると考えているため
みたいな感じです。
他にもプログラミングをやっていることで、
例えば何かのITサービスを生み出すプロジェクトがあればそこに参画することもできるかなとか。
担当エンジニアというよりできればマネジャーとして入れるようになっていたいものです。
本業続けながら学習を続けるのはなかなかに負荷もかかりますが、
自分の人生においてプラスになることしか考えられないので頑張ろうと思います。
副業について
個人的な意見ですが、本業続けながら副業プログラミングがいいと思ってます。
本業を続けながら勉強するのはかなりしんどいところもあるんですけど、
特に私はいま３５歳だったり、エンジニアで一発逆転！みたいな人生よりも
本業やりながら副業でプラスアルファを生む方がベースの安定した収入ありながらもリスクヘッジができるしいいかなと考えています。
ベースがあった方がチャレンジしやすいというか。
あと、エンジニアに求められる価値もどんどん変わっていくと思うんですけど、
正直フリーランスのコーディング的な仕事って減っていくと思ってまして。
（言語学ばなくてもサービス作れるようになると思ってて）
中長期的に見た時によっぽどの覚悟を持ってエンジニアを目指さない限り、
それ一本で食ってくのは意外と簡単じゃないかなと思っています。
YoutubeとかTwitterで簡単に儲かる！みたいな感じの話をよく目にしますけど、
それがもし本当ならつまり簡単に取って変わられるってことを指してるのかなって。
短期的には良くてもなぁ、と。
それに限りあるリソース、やりたいことも色々あったりするのでどれに割くかはしっかり考えて決めないとね。
はい、色々と書きました。。
何が言いたかったかわかんない感じになってしまった。
適時編集しながら改良したいと思います＾＾；
ではでは！
