Ruby学習振り返り インストール〜四則演算 (190709)
fjordbootcampのプラクティス、Nginxが終わり、いよいよ昨日からRubyの学習に入りました💪嬉しいです❗️
Rubyの学習は、Ruby入門を読みながら実際に手を動かしながら進めています。 自分にとっては中々分量が多く、「覚えることがたくさんあって大変だな💦」と感じます。そのため、今日から学んだ内容を簡単にでも振り返っていこうと思い、ブログに学習内容を簡単に載せたいと思います💪
まずはインストール
インストールは、【macOS Sierra】Mac OSX 10.12 macOS Sierra にRuby + Rails4 開発環境の構築 【初心者必見】を参考に進めました❗️ とても分かりやすく書かれていて有り難かったです😆
文字列について
Ruby入門で、KCODEでの文字コード設定内容が挙げられていましたが、私がインストールした2.6.0では廃止されたようです。参考
数値と四則演算について
以上、昨日はこのような感じで学習を進めました💪
Linuxのシェルスクリプト作成で私がつまづいたところ🥶
Linuxゲリラ戦記を読み、挙げられている例を、手を動かしながら進めていたところ、シェルスクリプトの作成で3日間ほど、詰まってしまいました💦 自分の覚書として、その理由をまとめます❗️
何に詰まったのか？
Linuxゲリラ戦記の#38〜#52で紹介されている、APIを利用した画像収集のシェルスクリプトを作成している時です。
私はとてもわかりやすくまとめられた以下のサイトの手順を参考に進めていました。
そして、いざ、自分でシェルスクリプトを以下のように作成してみました。
そしたら、こんなエラーが出てしまいました。
ちなみに、
$ curl "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={api key}&cx={ID}&per_page=20&text=${keyword}&extras=url_q" > response.txt
と、普通にシェルスクリプトに入れず、プロンプトをするとエラーを出さずに実行してくれます🤔 何故だろうか、グーグルで検索しても有力な回答は調べることができず、1日ほど悩みました😱
エラーの原因は？
fjordbootcampの先輩方に教えていただき、エラーの原因が判明！！ それは、シェルスクリプト内の無駄なインデントでした
上記のシェルスクリプトを見てもらうと、curlの2行目から無駄なインデントがあります。これは、私自身が見易さを重視した結果なのですが、\は次の行を単純に統合するメタキャラクタです。そのため、私の無駄なインデントも引数内に統合されてしまい、エラーが出てしまったようです😨
そのため、無駄なインデントを削除した結果、無事にシェルスクリプトが実行され、きちんと、ウェブのファイルを取って来てくれました😆
感想
初めてシェルスクリプト 作成、本当に時間がかかってしまいました。エラーの原因が分からず、ウンウンと頭を悩ませる時間が多かったですが、実行されているシェルスクリプトを見ると達成感が込み上げてきて、とても嬉しかったです💪
ほんの少しだけシェルスクリプトに対して抵抗がなくなったので、シェルスクリプトを用いて作業効率化をしてみたくなりました😆
参考サイト
PostgreSQL、データベースユーザーの設定から外部接続まで💪
データベースユーザーの設定をしましょう。
まずは、PostgreSQLをインストールしたサーバー側で、
$ su - postgres
コマンドにて、ユーザーを切り替えます。
「あれ、パスワードが分からない😰」という方、いませんか？ 私もそうでしたが、postgresユーザーへの切り替えの際にパスワードが分からず、切り替えができませんでした。
そういう方は
$ sudo passwd postgres
コマンドで、パスワードを再設定してみてください。
そしたら、postgresユーザーに切り替えて、データベースユーザーの追加を行います。
$ createuser --pwprompt --interactive ユーザー名
でユーザーの追加ができます。
--pwprompt:このオプションが指定されると、パスワード認証が可能になります。--interactive:ユーザー名の入力を促すオプションです。
ここまでが完了したら、追加したユーザーでログインしてみましょう💪
$ psql -U ユーザー名 -d postgres -h localhost
-U:次に指定されるユーザー名でデータベースに接続するためのオプションです。-d:次に指定されるデータベース名で接続するためのオプションです。-h:マシンのホスト名を指定するためのオプションです。
上記のコマンドを実行して、
postgres=#
と表示されればOKです😆
外部接続の設定をしましょう！！
外部接続とは、ローカル（ここでは自分のMac）で、PostgreSQLを使ってサーバーのデータベースに接続することです！！
postgresql.confファイルを編集します。
PostgreSQLの設定が記述されている、postgresql.confをviで編集します。
※psqlモードではなく、Postgresユーザーで行いましょう。psqlモードは\qで終了できます。
また、ここでは、postgresユーザーのroot権限でコマンドの実行を行なってください🙏
# vi /etc/postgresql/11/main/postgresql.conf
ここで、
--Connection Settings-（60行目あたり）の中の
listen_addresses = 'localhost'
となっているところを
listen_addresses = '*'
と変更を加えてください。
#を消すのを決して忘れないでください。設定が反映されないので！！！
pg_hba.confファイルを編集します。
次に以下のコマンドで、pg_hba.confファイルを編集します。
# vi /etc/postgresql/11/main/pg_hba.conf
90行目あたりの
# IPv4 local connections: host all all IPアドレス md5
のところに、
# IPv4 local connections: host all all IPアドレス md5 host all all 自分のIPアドレス/0 md5
と新たに自分のIPアドレスを追加してください。 これが認証されるIPアドレスになります。
ここまで編集ができたら
# /etc/init.d/postgresql restart
で再起動を行いましょう。
外部接続を試します
自分のMac側で以下のコマンドを実行し、外部接続を試します。このコマンドの意味は前回の記事を参考にしてください🙇♂️
# psql -U ユーザー名 -d postgres -h ホスト名(さくらVPSの)
これで、postgresユーザーのパスワードを入力し、ターミナル画面で
postgres=#
と表示されれば、外部接続完了です😆
今回は、データベースユーザー設定から、外部接続までを自分なりにまとめてみました🙇♂️
参考サイト等
PostgreSQLをDebianにインストールします😆
自分の学んだことの整理をするために、PostgreSQLをインストールの流れをまとめます‼️
PostgreSQLとは？
PostgreSQLとは、フリーなオープンソースデータベース管理システムのことです。つまり、無料で、誰でもソースコードを見ることができる、データベース管理システムということです。 データベースとは、Excelなどと比較にならないほど、膨大なデータを保存しておける場所のことです。 ここで、データベース管理システムの役割を2つ紹介しましょう。
データベースを守ること Excelなどを使っていると、停電やPCがいきなりフリーズしたり不意の事態に見舞われて、「これまでのデータが保存されてなかったー😭やり直しだー😰」なんて言うことありませんか？ データベース管理システムはそのようなことが起こっても、安全確実にデータを保存します。もし壊れてしまったとしても復元が可能です。また、一連の作業を一つの単位（トランザクションと言います）とすることで、不意に行なっている作業が中断されることがあっても、その1単位をやり直すだけで良いので手動で中断前の状態にするよりも手間がかかりません😃
複数からのアクセス、作業が可能 例えば、オンラインゲームなどは1人がプレイしたら、他の人はプレイできないなんてことはあってはなりませんよね。データベース管理システムは、そのように複数からの作業を可能にするのです。
ここまで、説明して、データベース管理システムのことがなんとなく分かったかもしれませんが（私もなんとなくの理解なのですが）、「PostgreSQLは他のそれらとどう違うの？」と思ったかもしれません。
PostgreSQLが他のシステムと比較して優れているのは、日本語対応している、並列実行性能の高さ、独自言語をあまり使用していないなどの点があげられるようです。
それでは、基本的な知識を押さえたところで、早速インストールをしていきましょう。
参考までに、自分が使っているのは、Debian(さくらVPSに導入)、MacbookProです。
DebianにPostgreSQL11をダウンロードしましょう。
早速、Debian側にダウンロードしていきましょう。
まずは、/etc/apt/sources.list.d/postgresql.liというリポジトリを作り、パスを記載します。#はroot権限で実行のマーク！！
# echo "deb http://apt.postgresql.org/pub/repos/apt/ stretch-pgdg main" | sudo tee /etc/apt/sources.list.d/postgresql.li
補足
最初、私は以下のコマンドでリポジトリを作成、パスの記載を行なっていました。しかし、この後に記述する、PostgreSQLのインストール(apt installのところ)で、エラーが出ました。
# echo deb http://apt.postgresql.org/pub/repos/apt/ jessie-pgdg main > /etc/apt/sources.list.d/pgdg.list
2つを見比べてみると、エラーを出した方ではjessie-pgdgとなっております。jessieはDebianのVersion8.0のコードネームのようで、私はDebian version9.0(strech)を使用しているため、ここがエラーを出している原因だったのではないかと考えています。
クライアント証明書をインストールしましょう。
以下のコマンドでクライアント証明書がインストールできます。SSLについたサイトへアクセスするのに必要です。wegetは、URLを指定してファイルをダウンロードするコマンドです。
# apt install wget ca-certificates
そして、以下のコマンドでPostgreSQLの公開鍵を自分のMacに登録します。
# wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | apt-key add -
このコマンドの意味としては
wget:次のhttpから始まるアドレスからファイルをダウンロードします。--quiet:処理結果は表示させません。-O:複数のテキストデータを一つに連結して、標準出力に対して出力します。|:パイプapt-kee:信頼するキーのリストに新しいキーを追加します。
PostgreSQLをインストールしてみましょう。
以下のコマンドでインストールします。
# apt-get update # apt-get upgrade # apt-get install postgresql-11
ここで、前述したようなエラーが出るかもしれませんが、その時は、作成したリポジトリを見直しましょう。
インストールが終ったら
psql
コマンドを実行して
postgres=#
と表示されれば完了。
psqlとは？
psqlコマンドは、PostgreSQLのプログラムで、対話式にPostgreSQLを実行できるのだそう。
とりあえず、インストールまでの流れをまとめてみました。次は、ユーザーの設定から外部接続までをまとめてみます💪
参考サイト
Debian 8.7(Jessie)にPostgreSQL 9.6をインストールし、外部接続を許可する
【 wget 】コマンド――URLを指定してファイルをダウンロードする
SSLとは？🤔
SSLとは何なのか？
SSLとは、Secure Sockets Layerの略。具体的には、WebブラウザやアプリとTCP(IPアドレスよりも一個上の通信方法)の間の情報を暗号化したり、暗号化を解除したりする仕組みのことです。
つまり、Webブラウザやアプリに入力したとき、SSLはその情報を暗号化して、TCPに送ります。そして、TCPを介して受け手に送られた情報はその受け手のもとで暗号を解除するという仕組みのことのことです。
SSLには2つの暗号化方法があります。
共通鍵暗号 これは、送り手と受け手が、彼らしか知らない共通の鍵を持っていて、送り手はこの鍵を使って、情報を暗号化。受け手はその鍵を使って暗号を解除するというものです。処理負荷が軽く、比較的高速でやり取りを行えますが、共通鍵を第三者に知られてしまうと一気に情報が漏洩してしまうという危険性があります。
公開鍵暗号 これは、送り手は公開鍵で情報を暗号化し、受け手はそれを公開鍵とペアになっている秘密鍵によって暗号解除を行うというものです。
この2つの暗号化を組み合わせて行われるのがSSLです。 具体的には、共通鍵暗号で公開鍵を送るというものです。例えばクライエントが、「SSL通信をしたい」と行った時には、サーバー側が自分の公開鍵を共通鍵暗号で送り、クライエント側がそれを受け取って、やり取りで使う公開鍵をサーバーに送っておきます。 このように公開鍵を共通鍵で送ることで、情報のやり取りの安全性を高めるのです。
と書いておきながら、自分の頭の中でも少し混乱してきました💦
さらに詳しく知りたい方は参考サイトへどうぞ！！
参考サイト
私がsshのポート番号を変更できなかった1つの理由・・・
fjordbootcampmのsshのプラクティス、リモートサーバーに自分のパソコンからsshによって公開鍵を設定して、公開鍵を使ってログインするというものでした。
そこに、私は15時間以上費やしてしまいました💦 そんなに苦戦した理由とは何か・・・ それは
コメントアウトをしていなかったことです
何に苦戦していたのか
具体的に言うと、リモートサーバー側のポート番号を変更できなかったということです。結果的に、sshd_configファイルを編集するときに#を消すのを忘れて、#をつけたままポート番号を書き換えていたため、反映されなかったということでした(#はコメントを表すので設定には反映されない)💦
クライアント(ローカルPC)でリモートサーバーに公開鍵を使ってログインするまでの流れ
私のような失敗をするような人は少ないと思いますが、自分の学んだことを整理するために、公開鍵の設定からログインまでの手順を書き残しておきたいと思います。
1.まずは、リモートサーバー側にsshをインストールして、設定します。
参考までに私はリモートサーバーは「さくらVPS」で、「Debian」をインストールしています。
apt install ssh
により、sshをインストールします。 そしたら、/etc/ssh/sshd_configというファイルが自動で作成されると思います。これが、sshの設定内容が書かれたファイルであり、これを編集することで設定変更ができます。
これから設定を変更するため、バックアップをとっておきましょう。
sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_config.org
そして、viで編集しちゃいましょう。以下のコマンドでviでの編集が可能です。
sudo vi /etc/ssh/sshd_config
そうすると、以下のような画面が出てきます。
私はもうポート番号を設定し終わった後ですが、ポート番号はデフォルトでは22になっています。 22では、セキュリティ的に不安があるので、任意の番号に変えておくと良いそうです。その時は、ウェルノウンポート(詳しくは下記のリンクに)よりも、エフェメラルポート(主に私的目的のためのポート、詳しくは下記)の方が良いでしょう。
そして、PermitRootLogin をyesからnoにしてください。これは、「sshクライアント(ここでいう自分のPC)がリモートサーバーにroot権限でログインすることを許しますか？」という文言です。これがyesのままだと、もし他の誰かがログインできちゃったときにroot権限を行使することができちゃいます。
ここで、重要なことは変更を加える項目の#を消して、番号を書き換えるなり、yes・noを記述することです。#はコメント扱いなので、設定には反映されないからです。
変更を加える項目は#を外しましょう(懇願)🙇♂️
後、設定を書き換えたら以下のコマンドでsshを再起動させなければ、設定は反映されません。ここも気をつけましょう。
sudo /etc/init.d/ssh restart
sshとは？
Secure Shell の略。主にUnixコンピュータで使われます。ネットワークを介して、他のコンピュータにログインして、操作することができるソフトウェアです。このとき、ネットワーク上の通信は暗号化されるので、安全に通信することが可能です。
ポートとは？
IPアドレスが住所とした時の扉にあたります。ポート番号は、扉の番号で、個々のIPアドレスにたどり着くためにはこの扉を通らなけらばいけません。その扉をどの扉にするのか自分たちで設定が可能ということです。
2.クライエント側で公開鍵を作成しましょう
設定が終わったら、クライエント側で公開鍵を作成します。
まずは、sshに関するファイルを作ります。
sudo mkdir ~/.ssh
そして、そのファイルに移動します。
cd ~/.ssh
そしたら、以下のコマンドを入力します。
sudo ssh-keygen -t rsa
ssh-keygenは、sshで利用する鍵を作成するコマンドです。-tは作成する鍵の種類を指定するオプションです。今回は、rsaという種類を指定します。- おそらく、上記のコマンドを入力するとパスフレーズの設定を求めてきますが、いらないと思ったらそのままenterを押してください。
鍵ができているか見てみましょう。.sshに移動して、
ls
コマンドでみれます。
おそらく、
id_rsa id_rsa.pub
の2つのファイルがファイルができていると思います。この、.pubの方が公開鍵となりますので、こちらを以下のコマンドで、クライアントに登録します(Macのキーチェーンを使った方法になります)。
ssh-add -K ~/.ssh/id_rsa
3. クライアント側で公開鍵をリモートサーバーに登録しましょう
まずは、リモートサーバー側に送られてきた公開鍵を受け取るためのディレクトリを作成します。今回は、.sshというディレクトリを作成します。
mkdir ~/.ssh
次は、リモートサーバーに公開鍵を送りましょう。送る方法はいくつかありますが、今回は、scpコマンドを使います。
scp -P <設定したポート番号> ~/.ssh/id_rsa.pub <リモートサーバーのユーザー名>@<リモートサーバーのIPアドレス>:~/.ssh
- scpはSSHによってリモート-クライアント間でファイルをコピーするときに使うコマンドです。今回は、作成した公開鍵をリモートのサーバーに送っています。
- おそらく、初回はリモートサーバーのパスワードを要求してくると思うので、パスワードを入力しましょう。
- ここの<>は分かりやすいように便宜上書いているので、実際にコマンドを打つ時は、<>は不要です。
私は、ユーザー名を変に入力してしまって3時間以上悩んでいました💦
公開鍵を送っただけでは、まだSSH接続をすることができません。リモートサーバー側に送った公開鍵を登録してやる必要があります。 まず、さっき送った公開鍵がリモート側に存在するか確認しましょう。
ls ~/.ssh
上記のコマンドで、さっき送ったid_rsa.pubというファイルが存在すればOKです。
リモート側に公開鍵を登録するためには、鍵の名前をauthorized_keysに変更してやる必要があります。
ですので、~/.sshディレクトリ で以下のコマンドを実行します。
mv id_rsa.pub authorized_keys
これで、id_rsa.pubの名前がauthorized_keysに変わるはずです。
ここまでできたら、リモートサーバーへの鍵の登録が完了です😆 ここで、一応リスタートしましょう。
4. sshコマンドでリモートサーバーにアクセスしてみましょう。
登録が終わったら
sudo ssh {リモートサーバーのユーザー名}@{リモートサーバーのIPアドレス}
でリモートサーバーにログインすることができます。
クライアント側のユーザー名がリモートサーバーのユーザー名になっていればログイン成功です！！！
sudo ssh -p <ポート番号> <リモートサーバーのユーザー名>@<リモートサーバーのIPアドレス>
でポート番号を指定して、ログインすることもできます。
-pはポート番号を指定するオプションです。小文字にすることを気をつけてください。
また、公開鍵でログインができたら、パスワード認証をできなくしましょう。具体的には、リモートサーバーのsshd_configファイルのPasswordAuthenticationをnoに書き換えます。
ここまでで、ログインすることができたでしょうか？
それでもできないときは？
「できないよー💦」って人は、スペルミスやエラーコードが表示されていないかみましょう。 それでも何が原因かわからないという場合には、sshd/_configの書き間違えの可能性もあります。その原因を探るために、構文チェックを行いましょう！！クライアント側で以下のコマンドを実行してみてください。
/usr/sbin/sshd -t
これで、構文のチェックが行えます。何も出てこなかったら正常です。これを使って、エラーをググると解決するかもしれません。
どうでしょうか、リモートサーバーにログインすることはできたでしょうか？ポート番号を変えることはできたでしょうか。 私から皆さんに伝えたいことは、変更する項目は、sshd_configファイルの#を消して変更を加えることです！！！
参考サイト
追記
[2020.04.30] 一部内容が分かりにくい部分があったため、修正しました🙇♂️
[2020.06.07] OpenSSH公式ではscpコマンドが非推奨のようなので、sftpなどを使った方が良いみたいです。
参考サイト
aptとは？〜どこからやってくるのか〜
今回は、Debianのパッケージ管理システムである、「apt」について、自分の学んだことをまとめていきたいと思います。
aptとは？🤔
Debian用のパッケージ管理システムです。例えば、Debianを使っている際に、ソフトウェアAを動かすためには、ソフトウェアBのバージョン3.0以上、ソフトウェアCのバージョン2.０以上ないといけませんという状態になるということが往往にして起こります。これを依存関係と呼びますが、 そこで、ソフトウェアBとCを手動でバージョンアップ、インストールを指定たら大変ということで、aptの登場です。
これらのバージョンアップ、インストールを自動で行なってくれるのです。このようなシステムをパッケージ管理システムと呼びます。
aptではapt install apt updateなどのコマンドを用いることで、ソフトウェアをインストールしてくれたり、アップデートしてくれたりします😃
aptはどこからインストールしてくれるのか？
「aptは便利だけどどこから、何をインストールしてくれるのか分からない、、、😠」という方もいらっしゃるでしょう。
そこで、sources.listファイルを参照します。
ここには、ソフトをどこから取得するのかが書かれています。
例えば、# vim /etc/apt/sources.listとコマンドを入力すると、その情報が返ってきます。
今回は簡単でしたが、aptについての学んだことのまとめでした。もし、理解が違うところなどがありましたら、教えてください🙇♂️よろしくお願いします。
参考サイト
標準入出力・リダイレクション・パイプを理解したい🥶
fjordbootcampのプラクティスを進め、UNIX/Linuxにおける標準出力・リダイレクション・パイプという単語にぶち当たりました。 自分の理解を整理するために、自分なりの単語の説明を記述してみます😆
標準入力、標準出力とは？
いわゆる、デフォルトで設定されている入力と出力のこと。 つまり、私がキーボードで何かを入力するのが標準入力、それからキーボードを打ったことにより、ディスプレイで何らかの反応が返ってくるのが標準出力です。
これをDebainに合わせて考えてみると、、、
$ pwd
/home
標準入力：pwd
標準出力：/home
となります。
ここで、
$ echo "hello world"
hello world
では、標準入力：$ echo "hello world" 標準出力：hello world
となるわけです。
ここで頭に入れておくことは、echoは入力をそのまま出力するだけの役割しか持たないと覚えておいてください。
リダイレクションとは？
私のイメージでは、標準出力と標準入力（標準エラー出力）をユーザーの任意で変えることができるというイメージです。
さっきの
$ echo "hello world"
hello world
を使って説明します。
まず、リダイレクションには
<〇〇 :標準入力を〇〇に切り替える
>〇〇：標準出力を〇〇に切り替える
などのメタキャラクタ（記号）があります。
ここで、「hello worldの出力先を変えたいなー」という場合は、
$ echo hello world > test
とします。
そうすると、リダイレクションを行なっていなかった時とは違って、ディスプレイ上には hello worldの文字はありません。echoは、入力をそのまま出力するだけの役割しか持ちませんが、リダイレクションしたことで、testというファイル にhello worldが出力されたことになります。
↓こんな感じですね‼️
パイプとは
いくつかのコマンドを連結して実行させることです。｜を使います。
具体的には、容量を表示するduと、並び替えを行うsortをパイプすることで、以下のように容量の小さいファイルから順に並べることが可能です。
du -a | sort -n
複数のコマンドを繋げて実行させることが色々な処理ができるようになるのでしょう（自分はまだそこまでの領域ではないので他人事感があります、、、）。
という感じで、標準入出力・リダイレクション・パイプを自分なりにまとめてみました。もし、理解が違っている場合にはぜひ教えてください🙇♂️
参考サイト
Debianとは、なんぞや❓
昨日、fjordbootcampのプラクティスにて、さくらVPSにDebianをインストルールしました。VPSについては調べて分かったものの、「Debianとは、なんぞや？」という疑問がぬぐいきれなかったので、まとめてみます。
Debianとは
有志が集まって開発してくれた、カーネルであるLinuxをOSとして機能させられるようにしたものである
と私は理解しました。
「何を言っているのか 🥶」という方もいらっしゃると思います。私もそうだったので、ですので少し補足をしていきます。
カーネルとは？
OSの中枢のことです。しかし、これだけではOSとして機能しないので、カーネル周辺のソフトウェアが必要になってきます。Linuxとはカーネルなので、Linux単体では動かないのですね。
そこで
有志の方々がLinuxをOSとして機能するようにLinux周辺のソフトウェアを固めて、Linuxと一緒に配布してくれたのが、Debianなのです。
と、調べたことをまとめてみましたが、私の理解が間違っているところがあったらぜひ教えてください🙇♂️
参考サイト
fjordbootcamp 「CSS tutorial」終了‼️
fjordbootcampの「CSS tutorial」を無事に終了することができました😃
このプラクティスはHTMLは変えず、CSSのみで、見本のWebサイトの見た目に合わせていくというもので、私は、なんだかんだで、26時間くらいかかってしまいました💦
この度なんとか終了することができたので、このプラクティスについて学んだことを記録がてら書いていきたいと思います。
学んだこと
flex box の使い方について
「flex box」とは、親要素を指定すると、その子要素が綺麗に並ぶ（デフォルトでは横並び）になるプロパティのこと。
もともとfloatしか知らなかった私はこれを理解するのに時間がかかってしまいました💦
flexを使うと、子要素が並ぶだけではなく、高さや幅なども自動で調整してくれます。そして、なんとレスポンシブデザインに対応までしてくれるという優れもの‼️
擬似要素を使うと、複数のボックスに交互に色を配置したり、模様を作ることができる。
擬似要素::before ::after、プロパティcontent"" border そして、width heightを指定することで、空白のコンテンツが生まれ、そこにborderだけが存在する形になります。そしたら、position:relative position:absoluteを使用して、コンテンツの位置を調整することで、四角を基調とした模様を作成することができます。アイディア次第で、自由な模様を作れます😍
また、nth-child(odd) `nth-child(even)'を使用することで、偶数個、奇数個の要素のみを指定しての配色が可能になります。
画像を丸くトリミングするなら、border-radius:50%!!
これで、画像や図形を丸くトリミングすることが可能です！！
要素のスクロールを作るには、overflow:scroll
overflowは要素からはみ出た部分をどう扱うのかを決めるプロパティです。それをscrollに設定すると、スクロールバーが表示され、要素からはみ出た部分をスクロールして見ることができるようになります。
見本のコードを見てみて思ったこと
line-heightが全く使えていない！！
line-heightは行の高さを調整するプロパティです。これを、要素の高さに指定することで、行の中央に文字列や記号を配置することができます。私は、padding や positionなどで文字列や記号などの位置を設定していましたが、line-heightを使った方が、書くコードの数も少なくなると勉強になりました。
flexを多用している
私は、なんでも「とりあえず、flexにしておくか」という癖があるみたいで、もとから縦に要素が配置されている場合でもflex-direciton:columnを多用してしまっていました。このように無駄なコードは書かないということが大切ですね。
終了してみての感想
私は、一応progateのHTML・CSS中級までは２週したのですが、いざ今回の見本を前にすると何から初めて良いか分からず、2時間ほどぼーっとしておりました。
そこで、まずは全体のレイアウトから初めていくことを教わり、なんとかflexを用いて取り組んでいきました。CSSなどのデザインに取り組むときの基本は全体のレイアウト→細部の調整だということが実感できました。この手順を念頭に入れて、今後も学習を続けていきます^ ^
次はもっと洗練されたCSSコードが書けるようになりたいです‼️
