10/2 - 10/9 の週報
10/2 - 10/9 の週報
どうも、Tushimaです😊
私は、フィヨルドブートキャンプに入会して、現在エンジニア転職を目指しています。
4ヶ月が経ち、メンターさんや受講生さんが出している記事で交流を深めたり、気づきを得ることが出来たのに刺激をうけて今、アウトプット記事を書いています☺️
これから、週報と月報を欠かさずつけていって、現場に必要とされるエンジニアに転職できるようにインプットのあとのアウトプットもしていきたいと思いますのでよろしくお願いします👌
📚 学習に関して
学習時間（10/2 ~ 10/9）目標: 27.5h 実績 22h
目標達成に5.5時間届かず！原因は、10/5(日)に1日中ゴロゴロ寝てしまったことです...
ですが、次の仕事休みの日（10/8）にコワーキングで11時間取り組んで挽回！といったところでしたが、あえなく届かず。
今週(10/10 ~ 10/17) は、絶対に達成して見せます！
取り組んだ課題や書籍(5つ)
・カレンダーのプログラム（プラクティス）のプルリクエストを受けて修正
・プログラムの修正 （プラクティス）のプルリクエストを受けて修正
・Rubocop を vscode に導入し、使用する
・debug.gemを使い、デバックしてみる
・Rubyコードレシピ集（書籍）1〜114
・新人プログラマのためのエラーが怖くなくなる本（書籍）
・Rubyプログラム
九九表プログラム・Fizzbuzzプログラム・偶数表示・うるう年判定・桁の和(桁の和が15になる数)
学んだこと
- 配列操作(map, select, each)
- メソッドチェーン(to_s.chars.map(&:to_i).sum)
- 論理演算子の優先順位(&&, ||)
- each_with_index で配列に index をつける
- 配列の要素を入れたり削除したりする(.pop .push .unshift)
気づき・学び
インプット教材では、コードの理解ができるが、Rubyのプログラムでアルゴリズムを考えるのが、難しくもあり楽しいところでもある！cluadeに問題を出してもらい、30分考えてわからなかったら、ヒントを出してもらって、それを元に実装している。フィヨルド生がいう「人のプログラムを見るのは楽しい」という領域までいきたい！
🎯 次週の目標
・素数判定プログラムの完成 ・Rubyコードレシピ集 115 ~ 175 まで
🏠 プライベート
10/ 7にほっとひと息ステーション｜はるやま オンライン【公式通販】のコワーキングスペースを利用している！仕事ありの日は18 ~ 20時まで、仕事がない日は10時から20時まで利用したいと思っている。うちの住んでるとことで学習できるところは限られているので、集中できる環境を運よく手に入れることが出来たのは大きなプラス。
こんなこと書こう、あんなこと書こうと思ってこのブログを書こうと思っているが、文章書くときになると手が止まってしまうのはなぜだろ？伝える力を養うためにもアウトプットしたり、発言したりする時間を少しずつ増やしていきたいと思う。
仕事では、農業関係の外回りや配達で1日100km以上運転してたのにはびっくりだぁ！
💭 所感
フィヨルドブートキャンプのメンターさんのレビューは妥協がなくて、すごく丁寧。
未経験の身からすると、コードを書く際に意識したいことや確認してほしいことがわからないので、こういうところも指摘してくれたり、こうしてみました！というコメントに対して、こうした方がいいですよ！というコメントが来るのもとてもよかった！
あと、プラクティスをやった後にメンターや他の受講生の提出物で参考になったり、良いものも示していてくれていて、そこを見てもかなり学びになる。calのプログラム実装するだけでも人によって実装や考え方にこんなに違いがあって、深い学びになった。
実務をやる時も自分でコードをかけるようになるだけでなく、コードを見て実装の意図をくみ取ったり、レビューできる力も必要だと思うので、プラクティス終わった後の振り返りも大切にしていきたいです。
プログラミング未経験がDockerを完全攻略する１
はじめに
こんちはー Tushimaです。8月もいよいよ中盤に入り、お盆を満喫してる人も多いのではないでしょうか？
私もここ最近、家族と海鮮丼を食べてきました！
そんな前置きはさておき。今日は、プログラミング学習中の私が、Docker完全攻略しましょうーということでアウトプット記事を書こうと思います！
私も最初、「Dockerってなに？」「なんのために使うの？」と思っていました。「現場で使う・必要だから」という思いでこれは学習する必要があるなぁと思い、怖そうだけどUdemyと書籍をポチってやることにしました！
最近のXでも、こんな投稿が。
今って未経験の方ですらGitとDockerは勉強してるのに、ITエンジニアで知らないは流石にまずいでしょ。
— ひさじゅ@RUNTEQの代表 (@hisaju01) 2025年8月11日
めっちゃバズってますね！なんと、５０万インプ越え！要約すると、「ITエンジニアでDocker知らない」はマズイってことですね。
というわけで「Dockerって初めて聞いたよー」って人も「Dockerって聞いたことあるよ！」って人にもできるだけイメージを掴んでもらえるように書きたいと思います！
そもそもDockerとは？
Dockerを15字以内で表すと、コンテナを使った仮想マシン。
早速、そんなコンテナとか仮想マシンとかいきなり使ったら、わからんですよという声が聞こえてきそうです笑
まず、仮想マシンから触れていきましょう！
仮想マシンを触れる前に、仮想マシンの反対である物理マシンから触れた方がわかりやすいので、物理マシンから触れていきます！
物理マシンとは、皆さんが使ってるパソコンmacやWindowsをイメージしてもらえればと思います！CPU・メモリ・ストレージといった物理的な実物があるコンピュータのことを物理マシンといいます！
CPU・メモリ・ストレージの解説はこちら
CPU→パソコンの頭脳。大きいほど、複雑な動作もスムーズに処理できる。
メモリ→作業する机の広さ。データを一時保管する場所。電源を切ると保管したデータは消えてしまう。大きいほど同時に行える作業の数が増えたり、処理の負担が大きい動作も行える。
ストレージ→作業する机の引き出しの大きさ。電源を切ってもデータの保管は維持される。大きければ大きいほどデータを多く保存できる。
に対し、仮想マシンというのは、CPUやメモリをソフトウェアで実現した、実物はないけど物理マシンと同じように動くものです。
これだと少しわかりにくいのですが、人間が物理マシン、人間の形をしたVtuberが仮想マシンという例えを使うと少し解像度が上がるかもしれません。
Vtuberは人間のように実物はないけど、人間と同じようにしゃべったり、手を振ったりといった人間と同じように動くようにできています。
じゃあコンテナを使った仮想マシンのコンテナってなに？
と言いますと、
・アプリケーションの管理する単位
を例えた表現になります。
コンテナはDockerのアイコン通り、船の上に乗ってるコンテナや貨物列車の上に乗ってるコンテナを指します。
ソフトウェアのインストールする場所は2つあります。そう、物理マシンの中か仮想マシンの中になります。人間？Vtuber？という話になります。
次はなにを管理するかという話です。具体的には、仮想化したソフトウェアを管理するかアプリケーションを管理するかになります。仮想化したソフトウェアを管理するとなると、Dockerアイコンのコンテナと船全体を管理するという意味になります。
コンテナだけの管理だと、コンテナの中の荷物とコンテナの形状といったところの管理だけで済みますが、船の管理も、となると大変そうですね。燃料の管理もしないといけないし、エンジンの管理や積載量といった管理する場所の数も量も増えて大変そうです。
Dockerは、ソフトウェアのインストール場所は物理マシン。つまりパソコンにソフトウェアをインストールして、コンテナという単位でアプリケーションを管理しています。
1つのコンテナで1つのアプリケーションを管理するというイメージです。例えば、Railsのアプリケーションを１コンテナ、MySQLのデータベースサーバを起動するのに１コンテナという具合です。
Dockerを使うメリットは？
Dockerを使うメリットとして、挙げられるのは大きく分けて2つなんじゃないかと思います！
1. アプリケーションを開発するときにWindows・macといった色んな人のパソコンの環境差異を考慮せずに開発できる。
2. １台のパソコンで複数のサービスを開発する際にそれぞれの開発時に予期せぬトラブルを防ぐことができる。
1のメリットは、Dockerで作成した仮想マシンを使えば、みんなが使ってるパソコンの種類や年式によって動く・動かないといったトラブルを避けることができます。
後になって、「俺が開発したRailsのバージョンと君の実行環境のRailsのバージョンが違うんだけど。」といったトラブルを防ぐことができたり、この「俺のmacでは動いたのに会社のmacでは動かない〜」といったトラブルも防ぐことができます。
エンジニアはチームで開発することが一般的なので、チームのみんなが同じ環境で開発やテストの実行を実現できるDockerはめちゃくちゃありがたいですね。
2のメリットもすごく大きいです。このプロジェクトではRails7系、このプロジェクトではRails6系といったプロジェクトやサービスごとにバージョンを変えたり、設定ファイルを編集して反映させる過程で、なにがどうなってしまってるのかがわからなくなってしまい悲しい結末も迎えたくないですよね。
Dockerの仮想環境を導入すれば、プログラミング言語のバージョンが衝突したり、ある目的で作成した設定ファイルが他の設定ファイルに影響してしまうのを防ぐことができます。
プロジェクトごとに仮想環境を立ち上げることができるので、それぞれの環境が独立し、エラーやトラブルシューティングも容易になるのは、とてもいいですよね。
アプリケーションでさえも複雑に絡み合ってるのに、実行環境まで絡み合うのはごめんだよ！っていうのが私の本音です！
終わりに
今日は、Dockerとは、なに？というところと導入によってどんなメリットあるのか？
というところにフォーカスしてアウトプットしました！
使っているパソコンが違うにも関わらず、コマンド1つで同じ実行環境を実現できるのは凄いことですよね。
すごく画期的で、現場でも一般的になっているという事情もよくわかります。私も、最初は「難しそうだなぁ」、「怖いなぁ」というマイナスなイメージを持っていましたが今では欠かせないものとして重宝しています！食わず嫌いせず、もっと早くから触れればよかった〜とさえ思ってます！
次回はDockerの準備とコマンドについてアウトプットできればと思います！
Rubyの学習の振り返り 〜Progate＆デイトラ初級編にて〜
はじめに
こんにちは。Tushiです。今回は、約１週間かけて行ったRubyの学習の振り返りについてアウトプットしていきたいと思います。
振り返りを一言でいうと、用語や意味が「わからないことだらけ」で課題の実装にものすごく苦労しました。
変数、引数、メソッド、クラス、インスタンス、インスタンスメソッド、クラスメソッド、返り値、インスタンス変数、配列、ハッシュなど何いってんのか全然わかんないよーってなってました。
動画の通りインプットだけで手を動かして、実装はできましたーというだけでは身につかないと思ったので、今回アウトプットして、つまずいたところを中心に定着を深めようと思います。
変数
プログラミングでは、無数のデータを扱います。無数のデータを扱うとなると、いかんせん数が膨大なのでどのデータが何を表しているかがわかるとものすごく便利です。
変数は、膨大なデータをラベリングする役割を果たし、データの１つ１つが何であるかを明確にしています。
例えば、「51」という数字のデータがあるとします。これは、数字であることはわかるのですが、一体何の数字を表しているでしょうか。「テストの点数なのでは？」と考える人もいれば、「イチロー選手の背番号じゃね？」と考える人もいれば「国道の番号だ」と考えることもできるわけです。
このとき、変数にて、score = 51 と書いたり、ichiro = 51と書いたり、national_highway = 51 と書いたりすることができます。scoreならテストの点数だし、ichiro = 51 ならイチローの番号なんだなと命名によって変数を使用して区別することができます。
Linux でも JavaScript といったプログラミングでもそうですが、データを扱う時に何をしてるのかを明確にする必要があって、数値に命名することによって何の計算をしてるかわかるようにしたりもできます。
私も、当初は命名や変数の記述がめんどくさく、変数を使わずコードを書いていたこともありました。(例えば、PATHやRubyVersionみたいなのを使えばよかったと思っている)
が、コードをレビューする人や訂正する人のことも考えて、変数使わなかやな！と思いました！やってみると、意外とそんな難しい概念ではなかったので徐々に慣れていきたいと思います！
変数の命名の仕方：
・スネークケース test_score といった、ある単語とある単語の間を_で区切った命名の仕方。見た目がヘビに似てるからこのような名前がついてます。
・キャメルケース TestScoreといった、ある単語とある単語の最初を大文字で定義した命名の仕方。見た目がラクダみたいにコブになってることからこの名前に。〇〇Techとか〇〇Campといったプログラミングスクールの名前にめちゃくちゃ多い！
・コメントのショートカット
Rubyの定義では先頭に#をつけることでコメントを残すことができることは知っていたが、ある範囲を指定して、ショートカットキー ctrl + ?・/め キーを押すと#の追加と削除ができることがわかり、コメントインとコメントアウトができることがわかった。
メソッド
この概念もめっちゃ大事です。簡単に言うと、処理をまとめたもの。書き方は以下の通りになります。
def メソッド名
処理したいこと
end
先頭のdefはdefineの頭文字を取ったものになります。つまり「これから処理を定義しまっせー」といってます。
例えば、helloworldの出力をしたいとして、
def hello
puts hello world!!
end
とコードし、実行するとhello worldが出力されます。
メソッドに引数を指定してあげる
例えば、以下のメソッドがあるとします。
def calucurate_area(radius)
pai = 3
end
calcurate_area(3)
前回と違って、calucurate_area(radius) と、メソッドの後に()がついてますよね。これはのちのメソッドに(radius)をつけることによって、引数をつけてその場によって値を定義している。
戻り値
return をつけて定義する または、return なしだと原則１番最後の値が返り値になる。
def calucurate_area(radius)
pai = 3
end
だと、radius * radius * pai が最後の戻り値になる。
引数の複数指定と返り値
図のように、引数の複数指定をすることもできる。
def full_name(first_name, family_name)
return "#{first_name} #{family_name}"
end
puts full_name('Steve','Jobs')
return は返り値と呼ばれるもので、図のようにfull_nameメソッドを定義したときに、引数の値を、渡せるようにし、"#{first_name} #{family_name}" で出力できるようにしている。
返り値の複数指定
返り値の複数指定もできる。
def test
return 1,2
end
a,b = test
puts a
puts b
返り値 1,2 を指定して、testメソッドから起こすために変数として定義している。
キーワード引数
引数に名前とセミコロン:をつけることで意味を持たせている
図は、ビックマックの値段と数をキーワード引数として指定してあげている
def rails_test(number: 5,big_mac: 700)
big_mac * number
end
puts rails_test(number: 6,big_mac: 1000)
HTML・CSS レスポンシブ対応＆Flexboxの考え方
はじめに
こんにちは。Tushiです。
今日は、Flexboxモデルの対応と先日作成した静的ページのサイトのレスポンシブ対応をしたいと思います。
Flexboxは今までfloatで要素を並びを変えていたものをもっと簡単に変えることができるCSSのレイアウトです。現場でも、floatよりもこちらのほうが主流とのことです。
レスポンシブ対応とは、スマホ・タブレットに応じて表示範囲を変えるように設定する対応のことです。スマホやタブレットの普及が当たり前になってる今、必須の設定になっていますよね。
それでは、１つずつ確認していきましょう！
Flexbox
Flexboxで主にできることは次の２つです。
１.並び向きを指定する。２.折り返しを指定する。
１.並び向きを指定する
→例えば、図のように親要素・子要素があったとして横並びさせたい子要素の親要素にdisplay: flex; を設定してあげれば、横並びになります。
ex: index.html style-sheet.css
<ul class="flex-list"> .flex-list {
<li class="li1">item1</li> display: flex;
<li class="li2">item2</li> }
<li class="li3">item3</li>
<li class="li4">item4</li>
</ul>
横並びにした要素をいっぱいに広げる
→ .flex-list {
display: auto;
}
2.文字の折り返し
文字の折り返しは、flex-wrap: wrap; を使用します。
ex: <ul class="flex-list">
<li class="li1">item1</li>
<li class="li2">item2</li>
<li class="li3">item3</li>
<li class="li4">item4</li>
</ul>
親要素→flex-list 子要素→li
stylesheet.css
flex-wrap: wrap; width: 50%;
} }
これで、上図のような折り返しができるようになります。
flex-direction
横に並べた要素を縦に並べます。例えば、「WEBサイト上では横並び表記だったのを、スマホでは縦にしたい。」なんてときに使えます。
親要素に flex-direction: column; にして、子要素に margin: 0 auto; を設定する
.flex-list { .flex-list li {
flex-direction: column; margin: 0 auto;
｝ }
レスポンシブ対応
viewpointの指定
まずはhead部分にviewpointを指定してあげます。これを指定することで、スマホやタブレットで表示サイズが変わっても、レイアウトが設定されるようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
なお、暗記する必要はありません。レスポンシブするときに、設定が必要だ、調べようくらいで理解しましょう！
なお、cssの読み込みを指定するときは、viewpointの下に必ず設定するようにしましょう！
幅の範囲とブレイクポイント＜どこで切り替えるかを決める値＞を決める。
@media (max-width: 1000px) {
/* h1のcolorをblueに指定してください */
h1 {
color: blue;
}
この場合だと、max-width 最大値 1000px以下であればh1タグの文字の色をblueにするという表記をしています。
次の場合はどうでしょうか。例えば、
h1 {
color: red;
}
@media (max-width: 1000px) {
/* h1のcolorをblueに指定してください */
h1 {
color: blue;
}
@media (max-width: 670px) {
/* h1のcolorをgreenに指定してください */
h1 {
color: green;
}
}
この場合だと、
→670px以下 文字色 green →671~1000px 文字色 blue 1000px~ 文字色 red
になります。
レイアウトを整える。
タブレット・スマホ版のレイアウトを整えるために、width: を設定するとレイアウトが崩れてしまうことがあります。
例えば、タブレット版でwidth: 25%; を指定した際、padding が左右にあると、枠からはみ出て下に回り込んでしまいます。
これを防ぐ方法を見ていきましょう！
これを防ぐには、box-sizing: border-box; を設定することで防ぐことができます。
box-sizingを使うと、width→padding+要素+border になります
通常だと、padding border が入らずwidth が反映されます。
marginはここに入らないことだけは気をつけましょう。
box-sizing: border-boxは通常、すべての要素に指定することが推奨されているので、
* {
box-sizing: border-box
}
となります。
重要！ floatで回り込んでいるレイアウトを直す
htmlにdivタグを追加して、cssにclear: left; を追加して適用させてあげる
サイズが大きくなっても、適切な大きさで収まるようにする。
max-width: 1170px; といった具合に設定する。
おわりに
flexboxモデルとレスポンシブ対応はいかがでしたでしょうか。
どちらも現場で使う必須の知識なので、わからなくなったら調べられるようにまとめてみました。
レイアウトが崩れた時や思いがけない挙動のときにどのcssが原因なのかまずはしっかり探っていきたいと思いました！
HTML・CSSは後日udemyでもじっくり学びます。
習得にはまだまだですが、これから毎日学習を継続して習慣化していきたいと思います。
それでは、また〜
Progate HTML・CSS 初級・中級道場編の振り返り
はじめに
こんにちは。Tushiです。
今日は、ProgateのHTML・CSSの初級編・中級編の道場編ということで振り返りを行っていきたいと思います。
正直にいいますと、１から自分でサイトを作成するとなると難易度が一気に跳ね上がり、作成が難しかったです。
htmlの要素の作り方、cssの当て方にかなり苦戦し、１週間近く時間を要しました。
しかし、サイトを構築し、htmlやcssの当て方を調べていくうちに少しわかってきました。やっぱり暗記ではなく、理解が最重要なんだと再認識されられました。
このCSSを当てると、なんでこの動きになるのかをきちっと説明できる状態にしてすすめていきたいと思います。
今日は、その中でも特に学びになったことをピックアップしてアウトプットしたいと思います。どうぞよろしくお願いします。
初級編
問題文をよく読まず、仕様書を見ずに作成した結果かなり、時間を要しました。
その分学びになったことはたくさんありましたが、実際の実務で仕様書があるのに、ない想定で進めるのはさすがにまずいので以降気をつけていこうと思います。
まず、Webサイトにはおおまかなレイアウトパッターンがあり、レイアウトごとに記述していくことがわかりました。
具体的には、① header ② コンテンツ ③ footer の３種類に分類して考えて記述していきました。
① header
headerでは、widthの%表示がどの親要素に対しての％適用なのかわからず、苦戦しました。親要素と子要素を見極め、widthをまず適用できるようにしたいです。
次は、float text-align の違い。 どちらも文字を左に右に寄せたりできるのですが、floatは要素単位でしたいとき。text-alignは文字を左・右に寄せる時に使用する(厳密にいうと回り込みなどあります)が今回はざっくり調べられる程度に理解したいと思います。
以下のサイトを参考にしました！
② コンテンツ
・Top部分では特定の文字に装飾をつけるspanタグがわからず、aタグやdivタグをつけてしまい、改行になって苦戦しました。
spanタグ、aタグ、pタグの違いをもう１回復習し、理解を深めます。
spanタグ→span(しばらくの期間)の意味。文章や要素の何かを装飾したいときに使用します。div や a タグのように改行が入らないです。
aタグ→Anchor(出発点)の略でリンクを飛ばしたり、ボタンを指定したい時に使用します。
pタグ→p = paragraph(段落)の略。改行＆１行空白が入る。インライン要素なので、間隔調整には、基本的にmarginを使います。
③Lessonコンテンツの作成
Lessonコンテンツの作成を行いました！まずは、borderを設定しました。
あとは、paddingを設定し、空白を指定。borderによって空白の位置がpaddingとmarginで違っていて、borderが外、paddingが内側となっています。
あとは、lessonの言語のところ。floatで適用できなかったので、display: flex;で横にして、margin-rightでの要素間の空白の指定をして、サイトの見た目を整えました。
この原因は、１つ１つのhtml・cssやrubyの要素に対して、floatを適用させたのではなく、rubyやhtml・cssの一括りの要素に与えていたため適用されていないというものでした。
④お問い合わせコンテンツの作成
初級編で最も苦戦したところです。marginとpaddingの違いがわからず空白の取り方が思うような動きがせず苦しみました。
仕様書がないと、１番きついところだと思います。ですが、input textarea要素のpaddingを調整すれば思うような動きになるだろうなということでpaddingで大きさ調整。
最後ボタンのwidthが違う。と理不尽に怒られ、widthを調整。なんとか、次に進むことができました。
答えと照らし合わせると、各要素にdivで囲っていて、その中に要素を構成してたのでインライン要素とブロック要素で適用できるcssがあり、ものによっては当てても反映されなかったり、違う挙動をしていたことが判明した。
⑤フッターの作成
フッターの作成は、ヘッダーの作成と同じようにlogoとlistを使用してつくりました。
要素を使うときは、floatで配置方向を揃えました。
最後、text-alignにしていたため、模写コーディングと微妙に右配置がずれてしまい、paddingやmarginでも直らなかったので結局スライドで確認しました。
何がなんでもスライドを見ずにやろうとしてて時間がかかったのは反省点。
しっかりわからないことを明確にして、スライドで振り返ってなぜそうなるのか理解することをまたしっかりやろうと思います。
次から中級編いきます！
中級編
Top画面
最初のTop画面は、HTMLタグの分け方が重要だと考えタグの実装から仕様書を参考につけていきました。
widthをどこのタグにつけるかによって位置が変わってしまっていたので、widthのタグを調整して、imgをbackground-size: cover; で画面いっぱいになるよう調整。
文字列は、pタグのインライン要素だったので、margin: 0 auto;を使用して中央寄せをしました。
そして、ボタン部にpaddingを適用させるために、inline要素をinline-block要素に変更。
font-awesomeでのアイコンの実装についても学びました。
こちらはみようみまねでやったので、自分のパソコンでつけたいアイコンではやっていませんが、つける機会があったらやってみようと思います。
Header画面
position: fixed;でスクロール時にヘッダーが固定されるようにしたのと、z-indexで同じ要素が重なり合わないように設定しました。
その後、hover時にopacityとpointerをつけてhover時に効果をつけました。
Lesson部分
中級編で１番沼ったところです。cssの原因が掴めず、３回くらい実装のやり直しとスライドの見直しを行いました。
特にイメージと文章の配置が仕様書を見てもできなくて、widthのところのアイコンを80％にしていて何回もやり直しました。
アイコンと文字の重ね合わせはposition: relative; と absolute; で指定。重ね合わせた部分はwidth: 100%にし親要素の1170pxいっぱいに広がるように設定しました。
この実装に２日かかりました。
message部分
message部分はボタンに影をつける、クリックした時にへこませる動きをつけるという工程を実施しました。アニメーションつけるときは:acriveプロパティを使用して実装することもわかりました。こちらはググって解決することができました。
footer部分
仕様書をみて、borderの作成とmarginの指定。同じタグを指定してると他の部分で使用したCSSの指定が反映されていてこれが原因でエラーになった。
最終的にopacityが適用されていたので、これを1にして透明度をなくすよう設定したら直りました。
終わりに
HTML・CSSは、エラーメッセージを出してくれない言語なので、面倒だなあと思っていたのが本音でした。
ですが、こうやってタグの付け方やCSSの当て方を１から学習すると学びになるものが多くめちゃくちゃ勉強になりました。
また、HTMLやCSSの当て方を変えることによって同じ実装ができるものもあるなとおもいました。違う実装でも表示がしっかりされることも大事ですが、レビュワーやメンバーが見ても見やすいコードにできるように今から心がけていきたいです！
明日から、レスポンシブ対応のアウトプット・flexboxに入りますので、お楽しみに！
それではまた！
Progate HTML&CSS学習 中級編の振り返り1/2
はじめに
こんにちは。Tushiです。今回は、Progate HTML・CSS中級編の振り返りということで、学習内容のアウトプットと、学習した所感と感想について述べていきたいと思います。よろしくお願いします。
学習した感想と致しましては、HTMLのタグの付け方やどの要素をどういう順番で作ればいいかが、初級編より定着してきた気がしてうれしいです。
一方で、CSSの適用がより高度になり、プロパティを設定しても適用されない・思い通りにならなかったり、実装の内容を写経するもこれが何をやってるかがわからない、ということにもなり、アウトプットしてより復習が必要だとも感じていました。
今日の、アウトプットでCSSのプロパティや挙動がわかるようになって、道場編の実際のコード模写でも活かせるようにしていきたいと思います。
HTMLの内容のタグ
xxxxx-wrapperとつける。wrapperとは直訳で「つつみもの」という意味。理解としては、headerタグとfooterタグに包まれてる内容なのでxxx-wrapperを使うイメージでしょうか。自分はこんなイメージで覚えていこうと思います。
background-image
背景画像の指定をします。書き方は以下の通りです。
.div{
background-image: url(top.png);
}
初級編で、要素の背景色を指定する「background-color」というセレクタを学びましたが、それの画像版です。urlのあとの()は丸括弧を使うことに注意して活用していきましょう！
background-size
先ほど触れた、background-image の性質として、画像の大きさが表示されるページよりも小さかった場合、残りスペースをもう一度同じ画像で表示して埋めるという性質があります。これを防ぐために、background-size: cover; にしてあげましょう。
背景のサイズを cover 覆う ようにする。とてもイメージしやすいですよね！
margin: 0 auto;
要素を中央に揃える
要素を中央に揃えたいときは、margin: 0 auto; に設定してあげます。なおこのとき、必ずwidthで幅も一緒にセットで指定してあげる必要があります。
上下を０にして、左右を自動で同じ間隔にするので真ん中になるので中央揃えになるよという意味になります。
なお、上下のautoは設定できません。
一方向のpaddingを指定する
一方向にpaddingを指定したいときは、上は padding-top 下は padding-bottom
左は padding-left 右はpadding-right を指定してあげます。
opacity
文字を透明にします。opacity を使えば文字を透明にすることができます。
ちなみに、opacity: 1; が完全に不透明で、0が完全に透明になります。
opacity →透明性という意味なのでこれも直感的に理解できると思います！
.div{
opacity: 0.7;
}
といった具合に指定します。
letter-spacing
文字の間隔を調整する。
letter-spacing で文字の間隔を調整することができます。具体的には次のような例で指定してあげることができます。
.div {
letter-spacing: 2px;
}
letter→文字、spacing→間隔を空けるなのでこのような設定になります。英語の意味が設定に直結するので英語も大事ですね！
HTML aタグ
ボタンと作る。
aタグを使えば、ボタンを作ることができます。a とは、 anchorの略です。
リンクの出発点や到達点を示すためのタグです。href 属性を使えば、文字にリンクを設定することもできますし、汎用性が高いタグで、重要なタグです。
display
インライン要素をブロック要素やインラインブロック要素に変更する
いきなり何いってるかわからんくなった人、大丈夫です。落ち着いて見ていきましょう。
さっきのaタグの話とつながるのですが、aタグはインライン要素と呼ばれ、CSSの設定なしでは、width や height 、 上下のmargin が使用できないようになっています。
aタグに widthやheight を指定して表示の位置を調整したり、marginを使用して、空白を調節するには、displayプロパティを使います。
displayのイメージは以下の通りです。
aタグやpタグで表示位置を調整したいときは、displayプロパティを使えばよさそうです。今回は、配置を横並びにするので、
.div{
display: block;
}
といった具合に指定します。
HTML 要素内で複数クラスを指定したい。
ボタンのように、共通部分はあるが、それぞれで小さい変化をつけたいといった場合に指定します。classのところに「半角スペース」でそれぞれのクラスを区切ってあげることでクラスを複数指定します。例えば、こんな感じです。
<div class="btn blue"></div>
共通である、btnクラス<ボタンクラス>と個別に小さいクラス、blueクラス<ブルークラス>の２つを指定してあげているという例になります。
<セレクタ>or<クラス>:hover
ボタンにカーソルを合わせたときに色を変える
カーソルが乗ったときの状態を hover といいます。
<セレクタ>or<クラス>:hoverといった具合にhoverしたときの設定をすることができます。今回は、hoverしたら背景色が赤色に変わるという例を示したいと思います。
div:hover {
background-color: red;
}
border-radius
ボタンの角を丸くする
角を丸くするには、border-radiusを使うことができます。borderとは境目、radiusは半径を示すので、半径の境目xxx pxで角を丸くします。記述例は以下のとおりです。
.div {
border-radius: 10px;
}
text-align
テキストを寄せる
text-alignを使用することで、テキスト、インライン要素、インラインブロック要素を中央に寄せることができます。ブロック要素は縦並びになるのでこの場合は適用されません。ちなみに、alignは整列する・並べるという意味があるので、text-align: left; で文字を<左に>並べるになります。
左寄せは left 中央寄せは center 右寄せは right を指定します。
.div {
text-align: left;
}
margin: 0 auto; と text-align: center; の違い
top-wrapper や containといった広い範囲を指定する場合は marginを指定します。
一方でテキストやボタンのようなインライン要素・インラインブロック要素は、text-alignを指定します。イメージ図は以下のとおりです。
アイコンを使う。
図のようにボタンにアイコンをつけます。
アイコンの表示は、Font-awesome を使用していれるのがよいでしょう。
使い方としては、設定時にhead 部分で Font-awesomeを読み込むように設定し、
使いたいアイコンを調べ、HTMLのクラスを指定してあげるという流れになります。
rgba
背景色のみを透明にする
opacityは要素のすべてを透明にしてきましたが、rgbaは、背景色を透明にするというプロパティになります。
rgbaを理解するために、まずrgbについて触れておきましょう。
rgb
３種類の値を指定して色を表示させる
rgbを色の表示の仕方の１つで、例えば background-color プロパティを使用して、値を指定して色を表示させます。
.div {
background-color: rgb(200, 150,45);
}
rgba {
background-color: rgba(200,150,45,0.7);
}
aで透明度を指定すると、背景色のみ色を指定することができます。
transitionでアニメーションをつける
transitionプロパティを使用して、変化の対象に対して、アニメーションをつけることができます。多くの場合、hoverと組み合わせてつかいます。
div {
transition: all 1s;
}
div:hover{
background-color: red;
}
line-height で文字間隔をつける
line-heightで行の文字の間隔をつけます
line-heightは要素の縦方向の中央に文字を配置させる役割も果たします。
line-heightプロパティの要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになります。
aタグでクリックできる範囲を、文字だけから枠全体にする
<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持たず、枠の指定ができません。結果として、<a>タグをクリックできる範囲はテキストの部分の枠だけになってしまいます。
<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、枠全体をクリックできるようにしたいときは display: block; を指定してあげます。
終わりに
今回は、Progate HTML&CSS学習 ~中級編~の振り返りの前半を振り返りました。
displayやtext-align、aタグなど今までよくわからなかったCSSプロパティが徐々に分かるようになりすこしプログラミングが面白く感じるようになりました。
今は、模写の段階ですが、まずはプログラミングになれることを目標に引き続き後半も取り組んでいこうと思います。
後半もお楽しみに！！
