プログラミング未経験が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

    radius * radius * pai

end 

calcurate_area(3)

前回と違って、calucurate_area(radius) と、メソッドの後に()がついてますよね。これはのちのメソッドに(radius)をつけることによって、引数をつけてその場によって値を定義している。

戻り値

return をつけて定義する　または、return なしだと原則１番最後の値が返り値になる。

def calucurate_area(radius)

    pai = 3

    radius * radius * pai

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-list {                               .flex-list li {

 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プロパティが徐々に分かるようになりすこしプログラミングが面白く感じるようになりました。

今は、模写の段階ですが、まずはプログラミングになれることを目標に引き続き後半も取り組んでいこうと思います。

後半もお楽しみに！！

Progate 初級編 HTML・CSSの学習を終えて

Progate 初級編　HTML・CSSの学習を終えて

こんにちは。Tushiです。今回は、Progateにて、HTML・CSSの学習を一通り実施しました。

実は、以前に他のスクールの教材で動画を見ながらサイトを模写していたのですが、タグや要素の意味、Webサイトの構成やCSSの意味が全くわからずで…。

いざ自分でやってみてとなったら何からやっていいかわからない状態になって、勝手にニガテ意識を植え付けちゃってました！

ですが、今回アウトプット前提で繰り返しやっていると少しずつ全体像が掴めて何をやったらいいかがわかるようになってきました。

今回は、アウトプットとリマインド用にHTML・CSSの振り返りをしていきたいと思います！！

html 振り返り

すべて暗記する必要はなく、調べられる程度に覚える。

<タグの種類>

タグ名+Tabキーを使用すると、補完してくれる。

hタグ：heading の略。<h1>から<h6>まで見出しがある。見出しの大きさや重要性に応じて使い分ける。

例：　<h1>見出し１</h1>

pタグ： paragraphの略。段落を表す。

例：　<p>段落を表しています</p>

hタグやpタグで囲んだテキストは、改行される。

aタグ→リンクの作成。

<a>タグにリンクの飛び先を使用するときは、href属性を使用する。

例：　<a href="https://xxxxx.com">Googleへ</a>

imgタグ→画像の表示。

画像を表示されるには、imgタグを使用します。

画像のURLを指定するときには、src属性を使用する。

<img src="https://xxxxx/xxxxxx/image.jpg"> 終了タグは不要。

liタグ→箇条書きリストを作成する

<li>Ruby</li>　　　　　・Ruby

<li>Python</li>　　　　 ・Python

<li>PHP</li>                   ・PHP

ul ol タグ

→liタグを小タグとして、urタグで・をつけたり、olタグで数字をつけたりする。

タグをタグで囲むことを入れ子と言う。
囲む方の要素を親要素<ulタグ>、囲まれる要素を子要素<liタグ>と呼ぶ。

<ul>

  <li>Ruby</li>　　　　　・Ruby

  <li>Python</li>　　　　 ・Python

  <li>PHP</li>                   ・PHP

</ul>

入れ子構造があるときは、字下げ <インデント> をつける。Tabキーを使えば、簡単にできる。

<!-- これはコメントです -->

<!-- -->で囲んだテキストのことを「コメント」と呼ぶ。ブラウザ上では表示されないので、コードの記述にコメントを残したい時に役に立つ。

HTMLの基本構造

HTMLの基本構造は、HTML要素の中に、head要素とbody要素をつける必要がある。

ブラウザに表示される内容を書きたいときはbodyタグに書く。

HTMLを記述するときの決まり

・<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれる。HTMLのバージョンを宣言するためのものになる。

・<head>要素には、Webページの設定する内容を書く。

head要素に必ずいれる3つの要素

1. 文字コード

指定することで、ページの文字化けを防ぐことができる

例:  <meta charset="utf-8"> 文字コードを "utf-8" に指定。utf-8 は、HTMLで推薦されている文字コード。

2. ページのタイトル

ページのタイトルを指定。ページの検索に出てきた時に、表示されるタイトルを指定する。

例: <title>ページのタイトル</title>

3. cssの読み込み場所

本来は、cssはHTML上で読み込むので、.cssの個別ファイルで読み込む場合は別途、指定してあげる。

例: <link rel="stylesheet" href="stylesheet.css">

全体のレイアウト

<div>タグ→divisionの略で、全体のレイアウトを指定したい時に使用する。

例えば、header,main,footerで構成されているとき、以下のように記述する。

<div class="header">　

</div>

<div class="main">

</div>                           

<div class="footer">

</div>

css振り返り

cssはhtmlで指定した要素に対して、「どこの」「何を」「どうする」かを指定することができる。

図では、

どこの→h1要素に対して、何を→文字の色に対して、どうする→赤に指定してというように指定している。

css のコメント

cssのコメントは、

/*  文字の色を指定 */ というように指定している。

font-size font-family 文字の大きさや文字の種類を変える

例: /* h1要素の文字の大きさを30pxに指定  */

h1 {

font-size: 30px;

}

例: /* p要素の文字の種類を" Avenir-text "に変える

p {

font-size: "Avenir-text";  

}

background-color 背景色を変える

例: /* footerクラスの背景色を黄色に変える */

.footer {

background-color: yellow;

}

横幅高さを変える→要素の横幅は「width」,高さは「height」を使う。

例: /* h1要素の横幅400px,高さ100pxにする */

h1 {

width: 400px;

height: 100px;

}

例: /* mainクラスの横幅80px,高さ40pxにする */

.main {

width: 80px;

height: 40px;

}

終わりに

いかがでしたでしょうか。HTML・CSS問わず、プログラミング全般にいえることですが、1. 全体像をまずざっくりと掴む。2.すべてを暗記しようとせず、調べられる程度に覚える 3. 完璧を求めず、6〜7割を目指す が大事だと思ってます。

HTML・CSSはLinuxやコードと違いエラーが出力しませんが、Googleの検証ツールやLiveServerの挙動を見ながらつくっていくことが１つ１つあてていくことで、必ず作りたいものができると感じています。

1回で覚えようとせず、2回3回と立ち返りながら覚えていきたいと思います。

最後まで見ていただきありがとうございました！

次回は、道場編で実際に今日の内容を使用して、簡単なサイトを模写しようと思っていますので、お楽しみに！！

Linuxコマンドの振り返り2/2

はじめに

こんにちは。tushiko23です。今日は、Linuxコマンドの振り返り2/2です！

ここでは、知らないコマンドがたくさんありました！

ユーザを作成したり、ユーザグループを変更したりコマンドを実行したり、

複数のファイルをまとめて圧縮したり。

特に、scpコマンドを使用して、AWSのEC2サーバからローカルにダウンロードするコマンドはややてこずりました。

が、こちらも秘密鍵を使って認証し、ファイルのログ・ファイルを持ってくる一連のコマンドは非常に勉強になり、実務でも活用したいと思いました！

それでは、１つ１つコマンドを振り返っていきたいと思います！

ファイルを圧縮・解凍

gzip [ ファイル名 ] ファイルを圧縮する　

-d オプション　解凍する　-f オプション　ファイルを上書きする

-k オプション    圧縮する前のファイルを残す　-v オプション 処理内容を残す

zcat zless zmore zgrep zdiff コマンド

圧縮したファイルの中身を確認する→解凍せず見ることができる

圧縮された.gzファイルに対して、コマンドを実行し操作したい場合は、前にzをつけてあげると実行できる。

tar コマンド

ファイルのアーカイブ　ファイルをまとめたり、展開することができる

アーカイブとは、複数のファイルやディレクトリを１つにまとめること。Youtubeの再生リストのようなイメージ

オプションは、展開と圧縮でまとめて覚える！

圧縮:  tar -zcvf xxxxx.tar.gz <ディレクトリ名>

展開:  tar -zxvf xxxxx.tar.gz <ディレクトリ名>

ユーザグループ・ユーザの作成

groupadd [ グループ名 ] グループを作成する

groupdel  [ グループ名 ] グループを削除する

usradd [ ユーザ名 ]  ユーザを作成する　-g [ グループ名 ] 指定したグループに属すようにする　設定しない場合、ユーザ名と同じグループ名が作成される

passwd [ ユーザ名 ] ユーザのパスワードを作成する　

ユーザ名を指定しない場合は、今ログインしてるユーザのパスワードを変更することになる

usrmod [ ユーザ名 ] ユーザの設定情報を変更する

-g [ グループ名 ] オプション→属するグループ名を変更する

usrdel [ ユーザ名 ] ユーザを削除する　

-r オプションでユーザのホームディレクトリも削除する

権限の付与→ディレクトリはx (実行権限)がなければ開けません。

見られなくないディレクトリに関しては、実行権限を省いてあげればいいでしょう。

chown コマンド　

chown [ ユーザ名 ] [ ファイル名・ディレクトリ名 ]

→グループも同時に変えることができる ex: chown user:study filename

シェルスクリプト

udemyの素材が自分のLinuxではバイナリファイルとみなされ文字化けしたので、表示を変えた。

iconv コマンドにて、変更。

iconv -f sjis -t utf8 shell_ensyu.sh

Windowsの改行コードが\r がコマンドとして認識されるので、Sedコマンドで置き換えを実行。

$'\r': command not found

sed "s/\r//g" fix_shell_ensyu.sh > shell_ensyu.sh

sed コマンド　ファイルのある文字列置換できる

sed -i  "s/置換元/置換後/g" -i オプションでファイルに実行を反映させる

ex: sed -i  "s/\r//g" fix_shell_ensyu.sh

\r という文字列を空白(この場合はなくす)ように置き換え 

ユーザの切り替え

sudo su ログイン機能を引き継いだまま、rootユーザに切り替える

sudo su - <ハイフン> 

ログイン機能を引き継がずに、rootユーザに切り替える

sudoを使えるユーザやグループの設定が入っていいるファイル

/etc/sudoers

パッケージ管理

→アプリケーションの動作に必要な「設定ファイル・実行ファイル・ドキュメント類・依存関係など」が含まれている。

apt コマンド

パッケージのインストール情報を確認する   apt info <パッケージ> 

インストールしたパッケージを確認する　   apt list --installed

OS Amazon linux 2023 パッケージ dnf コマンドにて Apacheサーバのインストール確認

インストールできるパッケージ httpd の情報確認            sudo dnf search httpd

インストールしたパッケージhttpdが使用できるか確認   sudo dnf info httpd

シンボリックリンク

→ ファイルへ別名をつけることができ、ファイルへのリンクを作ることができる。

ln -s [ リンク元<実体> ] [ リンク名 ]

シンボリックリンクの削除ファイルと同じように考える rm コマンドを使用。

ネットワークコマンド

ifconfig コマンド 自分のIPアドレスを確認する

ping 特定のIPアドレスに対して疎通確認する

traceroute 指定したサーバへのネットワーク経路を特定できる

IPアドレスのホスト名をつける

etc/hostsで設定。

<IPアドレス>　<つけたい名前>　ex: 106.154.153.115 Linux-server

scpコマンド　特定のファイルを転送する

オプション

-i ファイルの転送に使う秘密鍵を指定する

-P ポート番号を指定する

前置き　ファイル転送に使う公開鍵・秘密鍵は確認しておく。

ローカル:

・scpコマンド実行の際に、自分が指定した秘密鍵のパスが合っているか

→通常は、~/.ssh/xxxxxxx.pem

・秘密鍵の名前は正しいか。

・秘密鍵のユーザ名・権限は正しいか

・秘密鍵の中身はEC2の公開鍵のものとなっているか→なくしたら作り直す

EC2側:

・公開鍵が登録されているか

→通常は、~/.ssh/authorized_keys

・セキュリティグループは22番ポートのインバウンド ローカルのIPアドレスを許可してるか

・EC2がパブリックサブネットなら、IGWがルーティングされているか

「今回は、パブリックサブネットでやります」

今回は、LocalPCのLinux<Debian>とAWSの仮想サーバEC2<Amazonlinux2023 >間でのファイル転送を行います。

1. Local→EC2にファイル転送

これは、EC2サーバを踏み台サーバにして、別のサーバにSSHで入りたいときに秘密鍵が必要でこれを転送して渡したい場合を想定して行いました！

ex: scp -i ~/.ssh/test-key.pem -P 22  ~/.ssh/test-key.pem ec2-user@18.179.12.25:~/.ssh/test-key.pem

コピー元のファイル名　ユーザ名@IPアドレス:コピー先のファイルのパス 

・コピー元のファイル名はローカルPCで転送したいファイルのパスです。

・ユーザ名はEC2のユーザ名、IPアドレスはEC2のパブリックIPを設定。: のあとは保存したいEC2上のパスを指定。

今回は、ローカルPCのLinuxファイルである ~/head.html をec2インスタンス上の~/head.htmlに保存する。使う秘密鍵のパスは、~/.ssh/test-key.pemを使用するという意味になります。

2. EC2→ローカルにファイル転送

今回は、ローカルにEC2上で出た、nginxのエラーログをローカルにダウンロードします。EC2が共用サーバでログファイルをローカルにコピーして使用したいときを想定しています。

ex:

sudo scp -i ~/.ssh/test-key.pem -P 22 ec2-user@18.179.12.25:/var/log/nginx/error.log /home/youren-tushiko-0223/

前回は、転送したいファイルをec2-userの前においてコマンドを実行しましたが、今回は転送したいEC2上のファイルのユーザ名・IPアドレス・ファイルパスを先に指定して、あとに受け取りたいローカルPCのLinuxファイルパスを実行しています！

sudo をつけているのは、nginxのエラーログのファイルユーザとグループがともにrootであるため、Permissiondeniedにならないように指定しています。