SASS マイナス値の扱い / calcの計算 / 変数などメモ
SASS マイナス値の扱い / calcの計算 / 変数などすぐ忘れてしまうのでメモ
パーセントは丸括弧で囲む
flex: 1 1 (100% / 3); width: (100% / 3);
クラス名を変数にする場合の書き方
$variable: '.entry-content';
#{$variable} {
p {
color: red;
}
}
calcの計算
calc((100% / 2) - #{$md-padding-width + px});
マイナス
(-$md-padding-width) + px;
Flexbox と Grid で複数行に対応したカラムレイアウト
Flexbox と Grid それぞれの複数行に対応したカラムレイアウトの書き方。
Flexbox
IEで3で割り切れない数字の場合は不具合がでるので100%では無く、99.9999%にする。
.col {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}
.col-item {
flex-grow: 0; //リサイズしない 最後の中途半端なカラムがのびないように
flex-shrink: 1;
flex-basis: calc((99.9999% / 3) - 10px);
background-color: green;
margin-top: 10px;
margin-left: 10px;
}
Grid
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto auto ...; //Autoprefixer + IE11
grid-gap: 10px;
}
.grid-item {
background-color: yellow;
}
画像ファイルサイズを落とす Ralpha Image Resizer の設定
画像ファイルサイズを落とすための Ralpha Image Resizer の設定＆手順
スタンドアローンで使えるので便利
##Photoshopでアクションを作る。
背景不透明でPNG書き出し＆上書き 先に画像ファイルをphotoshopで開いてからアクション記録開始。 画像を閉じたところで停止
ファイル→自動処理→バッチで実行
例えばイラストボタンのOGPイメージ300×300を作る場合。周りに10pxの余白付き
まず設定メタデートの保持のチェック外した方がいいかも。 背景を白にするにはPhotoshopで先にバッチ処理した方がいいかも。一番下参照。
右メニュー
リサイズと余白の追加にチェック。※トリミングにチェック入れない余白の追加設定
・余白のサイズ アスペクト比指定 条件分岐ALL 1:1,50,50・余白の色 固定色 色→白に 不透明度 255
・フレーム 1stにチェック 幅10px
左メニュー
大きさ長辺基準 長辺 280px（余白分を削る）
フォルダ毎追加 → 実行（緑のボタン） リサイズフォルダに格納されるよ！
##バッチ処理
Photoshopのアクションを選択して ファイル→自動処理→バッチで実行
PNG透過を削除する方法がまだわからない・・・
Adobe Illustrator編集TIPS（操作編）
ちょっとしたことだけど知っていると捗るAdobe Illustrator の Tips 操作画面編
##スポイトツールでアピアランスコピー
スポイトツールをダブルクリックして設定する
##自動選択ツール（Y）
塗りが同じオブジェクトを選択できる。
##線のブラシ効果を消す
右クリック→アートブラシ適用の取り消し
##Shift + Tab
ツール以外のパネルをすべて非表示にできる。一時的に、作業エリアを広くしたいときに使う。
##Ctrl + 1
100％表示
##Ctrl+0
画面いっぱい表示
##Ctrl+3
オブジェクトの表示/非表示
Adobe Dreamweaverでシグネチャを使う方法
DreamWeaverのTemplate使ってて<body class="xxx">とか指定したいなあ・・・って時の手順です。
- テンプレートファイルdwtで<body>を選択
- 修正→テンプレート→属性を編集可能にする。
- 属性：追加ボタンで「CLASS」を入力、ラベル「class」、タイプ「テキスト」、初期設定「page（デフォルトのクラス名）body class="page"」→で、OK
こんなのになります→<body class="@@(_document['class'])@@">
</head>の前に
<!-- TemplateParam name="class" type="text" value="defaultClass" -->が追加される
<!-- TemplateParam name="id" type="text" value="" -->←消してOK。 - テンプレートファイルを保存
- body classを変えたいページにて
修正→テンプレートプロパティでclassを変更
