CSSの「@media」でレスポンシブ対応させる

以前に僕のブログを見たことがある人にはわかると思いますが、サムネイル画像がなかったり、文字のサイズ、余白などが違ったりとデザインをガラッと変えました! デザインについて考えると、どんどん深みにはまって正解がまったくわからなかったです。(笑) CSSで@mediaを使ってデバイスの大きさごとに表示を調整したので、その記事を書きます。 @mediaとは @mediaを使うことで、各デバイスや画面サイズごとに適用するCSSを指定できます。 レスポンシブにする場合は必須みたいです。(CSSは本当によくわからない。。) 使い方 以下のような感じで使うことができます。 @media (max-width: 767px){ img { width: 100%; height: auto; } } @media (min-width: 768px){ img { width: 277px; height: 145px; } } (max-width: 767px)はデバイスの画面幅が767px以下だったら、{}のCSSを適用します。 (min-width: 768px)はデバイスの画面幅が768px以上だったら、{}のCSSを適用します。 これは例としてあげていて、レスポンシブ対応させるときは画像サイズを%やautoを使って指定することでいい感じにできます。 767pxを画面幅の境目にしている理由として、今のパソコンやスマホ、タブレットのサイズを考えると、767pxのサイズに合わせる見やすくできるそうです。 @media screen and (max-width: 767px)のような書き方をしているサイトが多数ありますが、screenとはスクリーン画面ではなく、プリンターまたは音声機器以外のデバイスすべてなので、わざわざscreenをつける必要はないです。 まとめ レスポンシブ対応させるときは@mediaを使って、デバイス毎にCSSを変更させましょう。

May 8, 2020 · 1 min · 43 words · Yu

MongoDB 入門

最近、MongoDBを使うことがあり、NoSQLをはじめて使いました。MongoDBを触ったことがない人のために書きます。 MongoDBインストール&起動 今回はDockerHubからMongoDBのコンテナイメージをインストールします。 $ docker pull mongo インストールができたら、以下コマンドでコンテナを起動します。 $ docker run --name mongo-sample -d mongo -dはバックグランドで起動することを意味してます。 起動したコンテナ内に以下コマンドで入ります。 $ docker exec -it mongo-sample bash MongoDBのシェル起動 MongoDBのコンテナ内で以下コマンドを実行します。 $ mongo シェルを起動したら、環境準備は完了です。 基礎的な用語解説 MongoDBをさわっていく上で、イメージしやすくするために、Oracleの用語と比較します。 MongoDB Oracle データベース データベース コレクション テーブル ドキュメント 行(レコード) フィールド 列(カラム) テストデータ作成 以下コマンドをシェルで入力して、テストデータを作成します。 > db.foods.insert({name:'apple', price:50, producer:['sato']}); > db.foods.insert({name:'meat', price:100, producer:['suzuki']}); > db.foods.insert({name:'fish', price:120, producer:['kaneko', 'kitamura']}); 以下コマンドでDBの情報をみることができます。 > db.stats() { "db" : "test", "collections" : 1, "views" : 0, "objects" : 3, "avgObjSize" : 86, "dataSize" : 258, "storageSize" : 20480, "numExtents" : 0, "indexes" : 1, "indexSize" : 20480, "scaleFactor" : 1, "fsUsedSize" : 28014751744, "fsTotalSize" : 62725623808, "ok" : 1 } testデータベースに"collections" : 1となっていて、foodsコレクションが作成されて、"objects" : 3からドキュメントが3つ作成されていることが分かります。...

April 30, 2020 · 3 min · 443 words · Yu

GitHubのプライベートリポジトリをgo getする

個人開発していて、GitHubの自分のプライベートリポジトリをgo getしようとして、エラーに遭遇しました。 今後同じような目にあった時のために、備忘録として残します。 エラー内容 以下のようなエラーが発生しました。 $ go get github.com/<username>/<private-repository-name> go: downloading github.com/<username>/<private-repository-name> v0.0.0-20200426100620-259de4f4dd2c go get github.com/<username>/<private-repository-name>: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: verifying module: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: reading https://sum.golang.org/lookup/github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: 410 Gone server response: not found: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/d99582f38bf8799347c5c3580859733d5d5c417fd23feb23ec82dc0787605157: exit status 128: fatal: could not read Username for 'https://github.com': terminal prompts disabled 原因 go getでモジュールをダウンロードする際は通常、http通信をしているみたいです。 GitHubのプライベートリポジトリへは認証が通らず、エラーになっていました。 解決方法 以下手順で解決できます。 Personal access tokensを作成 git config設定 1. Personal access tokensを作成 GitHubのDeveloper settings画面でトークンを作成できます。 設定画面を開いたら、「Generate new token」を押すと、以下の画面が表示されます。...

April 27, 2020 · 1 min · 90 words · Yu

AtCoder Beginner Contest 163の振り返り

今回で5回目のコンテスト参加となりました。今回は「Unrated」になってしまいました。 コロナウイルスの影響で参加者がめちゃくちゃいて、サーバ処理が追いつかなかったんですかね。。コンテストが始まると一気にサーバ負荷がかかるという特殊な状況ですが、運営側には頑張っていただきたいです。 今回はC問題まで解いたので、そこまでの解説をします。 A - Circle Pond 問題文 半径Rの円の周長を出力してください。 制約 1 ≤ R ≤ 100 入力は全て整数である。 解説 Pythonはmath.piで円周率を使えます。 回答 import math R = int(input()) print(2*R*math.pi) B - Homework 問題文 高橋君の夏休みはN日間です。 夏休みの宿題がM個出されており、i番目の宿題をやるにはAi日間かかります。 複数の宿題を同じ日にやることはできず、また、宿題をやる日には遊ぶことができません。 夏休み中に全ての宿題を終わらせるとき、最大何日間遊ぶことができますか? ただし、夏休み中に全ての宿題を終わらせることができないときは、かわりに’-1‘を出力してください。 制約 1 ≤ N ≤ 10^6 1 ≤ M ≤ 10^4 1 ≤ Ai ≤ 10^4 解説 この問題は高橋君の夏休み日数から宿題にかかる全日数を引くだけです。 回答 N, M = [int(_) for _ in input().split()] A = [int(_) for _ in input().split()] ans = N for i in range(M): ans -= A[i] if(ans < 0): print("-1") else: print(ans) C - management 問題文 N人の社員からなる会社があり、各社員には1,…,Nの社員番号が割り当てられています。...

April 19, 2020 · 1 min · 143 words · Yu

AtCoder Beginner Contest 162の振り返り

今回で4回目のコンテスト参加となりました。結果として、C問題まではなんとか解くことができました。ですが、B問題を1回凡ミスしたことに気づかず20分後に再提出したこととC問題はPythonでは時間制限を突破できなくて、PyPyで提出をしてなんとか正解だったのであまり良くない内容でした。 まだまだ余裕でD問題に到達することができていないです。。 基礎力を強化するためにも、今回も振り返りをしていきます。(回答に記載しているコードは提出してACしたコードです。) A - Lucky 7 問題文 3桁の整数Nが与えられます。Nのいずれかの桁に数字の7は含まれますか? 含まれるなら Yes を、含まれないなら No を出力してください。 制約 100 ≤ X ≤ 999 解説 この問題は入力された3桁の文字数それぞれに「7」が含まれているかを確認すればOKです。 回答 N = input() if(N[0] == '7' or N[1] == '7' or N[2] == '7'): print("Yes") else: print("No") B - FizzBuzz Sum 問題文 FizzBuzz列a1,a2,…を次のように定めます。 iが3でも5でも割り切れるなら、ai = FizzBuzz そうではなくiが3で割り切れるなら、ai = Fizz そうではなくiが5で割り切れるなら、ai = Buzz そうではないなら、ai = i FizzBuzz列のN項目までに含まれる数の和を求めてください。 制約 1 ≤ X ≤ 10^6 解説 入力されたN項目までのそれぞれの数字をFizzBuzzで判別して、該当しない数字を足せばOKです。 回答 N = int(input()) ans = [] ans_num = 0 for i in range(N): s = i+1 if(s%3 == 0 and s%5 == 0): ans....

April 12, 2020 · 2 min · 294 words · Yu