TIL

Today I Learned. 知ったこと、学んだことを書いていく

Progate

比率を変えずに画像をいっぱいに表示 - CSS

background-sizeを使うことで表示するときの大きさ設定ができる Emmentのショートカットはbgsz 設定できる値は以下の通り 値 説明 contain 縦横の比率を変えず、切り取りせずに、できるだけ大きく表示(もし、余白がある場合、繰り返して表示される) cover 縦…

メディアクエリ(@media) - HTML

レスポンシブデザインをするために必須のもの ブラウザの画面サイズに対応して、CSSのスタイルを変更したいときに使う 書き方 @media(条件) { /* 条件がTrue時に適用させるスタイル */ } CSSで@mediaというキーワードを使う。指定した条件がTrue時に適用させ…

角を丸くする border-radius - CSS

角を丸くするにはborder-radiusプロパティを使う Emmentのショーットカットはbdrs(border-radius) border-radius: 半径; 指定する値は半径となる また、4つの角それぞれで指定することもできる 値 説明 Emment border-radius すべての角、それぞれ指定 bdrs…

ボックス - CSS

インラインボックスとブロックボックス 要素 ├── インラインボックス └── ブロックボックス ├── コンテンツに意味づけ └── 情報を整理・グループ化 インラインボックス 横並び display: inline; コンテンツがぎりぎり収まる大きさのボックス 主にテキストを…

文字の間隔 letter-spacing - CSS

letter-spacingで文字の間隔を設定できる。 .test1 { letter-spacing: 2px; } .test2 { letter-spacing: -2px; } デフォルトは0px マイナス値を設定すると、デフォルトの表示よりも間隔が狭くなる。 See the Pen 文字の間隔 by tamago (@tamago324) on CodeP…

ブロック要素を左右の中央に配置 - CSS

中央に配置する widthを指定 marginの左右をautoに設定 .main { /* 横幅を指定 */ width: 100px; /* 中央に配置 */ margin: 0 auto; } See the Pen wmEavW by tamago (@tamago324) on CodePen. 参考文献 Progate

入力を受け取る input() - Python

ProgateでPythonの基礎を進めてる 標準入力から値を取得する方法をメモしておく input関数を使うことで標準入力から値を受け取ることができる >>> a = input('数値を入力してください-> ') 数値を入力してください-> 2 >>> a '2' input関数は入力値を文字列…