はとのーと

エジソンノート(アイデア、思い付き、メモ)として使っています。誰かの役に立つかもしれないので公開しています。

Djangoについてのメモ

  • Djangoのインストール: requirements.txtDjango~=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 myapppython manage.py migrate myapp
  • マイグレートSQLの表示: python manage.py sqlmigrate myapp 0001
  • admin画面にモデルを表示する: myapp.admin.pyfrom .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についての自分用メモです。

目次:

スタイルの優先順位

スタイルには優先順位がある (Qiita)

優先度: idclass > 要素(タグ) > * (全称セレクタ)

セレクタ

  • #foo - idによる指定
  • .bar - クラスによる指定
  • div - divタグ
  • div, span - divタグとspanタグの両方
  • div a - divタグの中にあるaタグ
  • div > a - divタグの直下にあるaタグ
  • .bar a - barクラスの中にあるaタグ
  • 兄弟セレクタ:
    • 隣接兄弟セレクタ - h2 + p (h2直後のp)
    • 一般兄弟セレクタ - h2 ~ p (h2以後に出てきたすべてのp)
  • 擬似クラス:
    • a:hoverのように使う
    • hover(カーソルが乗ったとき)、active(クリックしたとき)、visited(訪問済み)
    • first-child(最初の子要素)、last-child(最後の子要素)
      • <ul class="foo"><li>a</li><li>b</li></ul>のとき .foo > li:first-childで最初の子要素を指定できる

CSSセレクタは右から評価される (Qiita)

  • red - 色名による指定
  • #aaccee - RGBによる指定
  • #ace - #aacceeと同じ
  • rgb(170, 204, 238) - 10進数による指定
  • rgba(170, 204, 238, 0.3) - 透明度(0透明〜1不透明)を指定

Googleカラー選択ツール

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%

ブロック要素とインライン要素

  • ブロック要素は左右にめいっぱい広がるので縦に並んで表示される
  • インライン要素は同じ行に並んで表示され、marginpaddingは左右にしか効かない
  • display: block - ブロック要素にする
  • display: inline - インライン要素にする
  • display: inline-block - インライン要素のように同じ行に並び、ブロック要素のようにmarginpaddingを上下にも指定できる

中央寄せ

  • 水平:
    • ブロック要素は幅指定と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に狭められる。デフォルトは10は狭めない
  • 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)