- Djangoのインストール:
requirements.txt
にDjango~=3.2.10
(バージョンは新しくする) を書き込んでpip install -r requirements.txt
- プロジェクトの作成:
django-admin startproject mysite .
- アプリケーションの作成:
python manage.py startapp myapp
- 内蔵サーバの起動:
python manage.py runserver
,python manage.py runserver 0.0.0.0:8080
- マイグレーション手順: モデルの変更 →
python manage.py makemigrations myapp
→python manage.py migrate myapp
- マイグレートSQLの表示:
python manage.py sqlmigrate myapp 0001
- admin画面にモデルを表示する:
myapp.admin.py
にfrom .models import ModelName
を入れる - スーパーユーザーの作成:
python manage.py createsuperuser
メモ 2023-10
2023-10-31
LXCで使っているZFS領域を拡張する
lxc で storage のサイズを拡張する備忘録 [Ubuntu Server 22.04 Host] [ZFS編] - takashi kono's blog を参考にさせていただきました。
パラメータを調べる
POOL_NAME
: プール名 (例: default)SOURCE
: ストレージデバイス (例: /var/snap/lxd/common/lxd/disks/default.img)DEVICE_ID
: デバイス識別子 (例: 15274996953059060469)
$ lxc storage list
+---------+--------+--------------------------------------------+-------------+---------+---------+
| NAME | DRIVER | SOURCE | DESCRIPTION | USED BY | STATE |
+---------+--------+--------------------------------------------+-------------+---------+---------+
| default | zfs | /var/snap/lxd/common/lxd/disks/default.img | | 8 | CREATED |
+---------+--------+--------------------------------------------+-------------+---------+---------+
NAMEを POOL_NAME
に、SOURCEを SOURCE
にセットする。
POOL_NAME=default SOURCE=/var/snap/lxd/common/lxd/disks/default.img
$ sudo zpool status -vg $POOL_NAME pool: default state: ONLINE scan: scrub repaired 0B in 0 days 00:11:11 with 0 errors on Sun Oct 8 00:35:13 2023 config: NAME STATE READ WRITE CKSUM default ONLINE 0 0 0 15274996953059060469 ONLINE 0 0 0 errors: No known data errors
表示された値を DEVICE_ID
にセットする。
$ DEVICE_ID=15274996953059060469
現在の容量を確認しておく。
$ lxc storage info $POOL_NAME | grep total total space: 16.95GiB
拡張する
10GB拡張するので +10GB
を指定する。
+
をつけ忘れると全体で10GBになってしまうので注意。
$ sudo truncate -s +10GB $SOURCE $ sudo zpool set autoexpand=on $POOL_NAME $ sudo zpool online -e $POOL_NAME $DEVICE_ID $ sudo zpool set autoexpand=off $POOL_NAME
確認する。
$ lxc storage info $POOL_NAME | grep total total space: 26.16GiB
CSSについてのメモ
CSSについての自分用メモです。
目次:
- スタイルの優先順位
- セレクタ
- 色
- border, margin, padding
- サイズ指定
- ブロック要素とインライン要素
- 中央寄せ
- float
- overflow
- position
- Flexbox
- CSS設計手法
スタイルの優先順位
スタイルには優先順位がある (Qiita)。
優先度: id
> class
> 要素(タグ) > *
(全称セレクタ)
セレクタ
#foo
- idによる指定.bar
- クラスによる指定div
- divタグdiv, span
- divタグとspanタグの両方div a
- divタグの中にあるaタグdiv > a
- divタグの直下にあるaタグ.bar a
- barクラスの中にあるaタグ- 兄弟セレクタ:
- 擬似クラス:
a:hover
のように使うhover
(カーソルが乗ったとき)、active
(クリックしたとき)、visited
(訪問済み)first-child
(最初の子要素)、last-child
(最後の子要素)<ul class="foo"><li>a</li><li>b</li></ul>
のとき.foo > li:first-child
で最初の子要素を指定できる
色
red
- 色名による指定#aaccee
- RGBによる指定#ace
-#aaccee
と同じrgb(170, 204, 238)
- 10進数による指定rgba(170, 204, 238, 0.3)
- 透明度(0透明〜1不透明)を指定
border, margin, padding
- border - 枠線
- margin - 枠線の外側の余白
- marginはマイナス指定ができ、他のブロック要素に重ねることができる
- ブロック要素は幅指定と
margin: auto
でセンタリングされる
- padding - 枠線の内側の余白
- marginやpaddingには1〜4個のサイズを指定することができ、上右下左に対応する。省略された場合の下は上と同じ、左は右と同じ、右は上と同じになる
サイズ指定
- %指定は親コンテナに対する%になる
- サイズ計算:
width
は内側のコンテンツのサイズを表し、全体のサイズはその周囲にpadding
,border
,margin
が足されたものとなるbox-sizing: border-box
を指定するとwidth
が全体のサイズになる
- ブロック要素間の縦方向
margin
は重なり、大きい方の間隔分だけ空く - 文字に関するサイズ:
- デフォルトの文字サイズは16px
em
は親コンテナの文字サイズに対する比率。1em
は親コンテナと同じフォントサイズrem
はhtml要素の文字サイズに対する比率
- ビューポートを基にする単位:
vh
- ビューポートの高さの1%vw
- ビューポートの幅の1%
ブロック要素とインライン要素
- ブロック要素は左右にめいっぱい広がるので縦に並んで表示される
- インライン要素は同じ行に並んで表示され、
margin
やpadding
は左右にしか効かない display: block
- ブロック要素にするdisplay: inline
- インライン要素にするdisplay: inline-block
- インライン要素のように同じ行に並び、ブロック要素のようにmargin
やpadding
を上下にも指定できる
中央寄せ
- 水平:
- ブロック要素は幅指定と
margin: auto
で中央に表示される (左右に均等にマージンがついて1行を専有している状態) - インライン要素や
inline-block
要素は親要素にtext-align: center
を付けると中央に寄る
- ブロック要素は幅指定と
- 垂直:
- インライン要素や
inline-block
要素は親要素にvertical-align: middle
を付けると中央に寄る
- インライン要素や
float
- ブロック要素を並べて表示できる
float: left
,flow: right
で要素の並び方向の左右を指定する- 並べた後に次のインライン要素が並ぶ
- floatを解除する方法:
- 次の要素に
clear: both
をつける - floatを指定した要素の
:after
疑似要素でclear: both
を指定する - floatを指定した要素の親要素で
overflow: hidden
を指定する
- 次の要素に
overflow
overflow: visible
- 親コンテナからはみ出た部分が表示されるoverflow: hidden
- 親コンテナからはみ出た部分がカットされる。親コンテナにheight
指定がなければすべて表示されるまで縦に延びるoverflow: scroll
- 親コンテナからはみ出た部分はスクロールして見られる
position
position | 本来の場所を | z-index | 説明 |
---|---|---|---|
static | 専有する | 無効 | 本来の位置に表示される(デフォルト値) |
relative | 専有する | 有効 | 本来の位置からずらしたり親位置からの相対位置に表示 |
absolute | 専有しない | 有効 | 親位置からの指定位置に表示 |
fixed | 専有しない | 有効 | ブラウザウィンドウの指定位置に表示 |
親位置: 親方向に検索して最初にpositionがstaticでない要素の位置
Flexbox
子要素を縦または横に並べることができる機能。
フレックスコンテナ
フレックスアイテムを囲むコンテナ。
- 親の幅まで広がり、デフォルトで中のコンテナのサイズを均等に割り振る
display: flex
でフレックスコンテナになるflex-direction
には方向を指定する:row
(横方向)、row-reverse
(横逆方向)、column
(縦方向)、column-reverse
(縦逆方向)flex-wrap: wrap
- はみ出たアイテムが折り返される
フレックスアイテム
縦や横に並べる箱。
flex-grow
- アイテムの合計よりコンテナが広い場合にどう配分するかの比率を指定する。0
は広がらないflex-shrink
- アイテムの合計よりコンテナが狭い場合にどう配分するかの比率を指定する。他が1
で自分が2
なら1/2に狭められる。デフォルトは1
。0
は狭めないflex-basis
- アイテムの最低寸法を指定する。auto
(デフォルト。均等配分)、0
(コンテンツに必要な広さだけ配分)、200px
,50%
など(専有する広さ)
上記3つをflex: <flex-grow> <flex-shrink> <flex-basis>
と1行で記述できる。
3列の真ん中がメインコンテンツのとき、左右にflex: 0 1 {必要な幅}
、真ん中にflex: 1
を指定することでウィンドウに合わせて真ん中だけが広がるようになる。
CSS設計手法
- OOCSS (SINAP)
- オブジェクト指向を取り入れた設計手法
- コンテンツにスタイルを与える: どこにあっても「タイトル文字」「編集ボタン」などのクラスを指定できる
- 構造と見た目を分ける:
.box
で基本構造を指定し、.box-red
,.box-blue
などで色を指定する。class="box box-red"
のように合わせて使う
- BEM (Qiita)
- Block(大きなくくり), Element(要素), Modifier(BlockやElementの変化)に分ける
Block__Element--Modifier
という形でクラス名をつける
- SMACSS
- ベース、レイアウト、モジュール、ステート、テーマという5つに分類して管理する
- MCSS
- BEMとOOCSSの原理をベースに作られた
- Base(再利用が可能なスタイルセット), Project(プロジェクトごとのスタイル), Cosmetic(色、サイズなど)の3つのレイヤーに分ける
- FLOCSS
- OOCSS、SMACSS、BEM、MCSSなどの考え方のいいとこどりをした設計手法
- 命令規則はMindBEMding(BEM)