2021.12.01
transformプロパティのskewで写真を傾斜変形
transformプロパティのskewで写真を傾斜変形させます。単純に傾斜変形させるだけでは写真がゆがみ左右がコンテンツの外側にはみ出してしまうので、それも調整…
2021.10.10
gulpでbrowser-syncを実行
gulpにbrowser-syncを組み込んで、gulp起動時にブラウザが立ち上がるようにします。以下のコマンドでbrowser-syncをインストールします。…
2021.10.09
gulp-sass 5.0について
2021年7月にgulp-sassのメジャーバージョンが4から5にアップデートされました。gulp-sass 5.0の動作要件はnode.jsバージョン12以上…
2021.10.06
svgコード記述時の注意点
svgコード記述時の注意点をまとめます。 ■ svgコードの最適化にツールを利用 SVGの不要なコードを取り除いて最適化してくれるツールとして、ブラウザで利用で…
2021.10.04
複数行のテキストの左側を縦のボーダーで装飾
デモページはこちら 複数行のテキストの左側を縦のボーダーで装飾します。CSSはborder-leftの場合とheightを設定した疑似要素beforeをabso…
2021.09.13
nth-childとlast-childの複合条件
デモページはこちら 3カラムで複数行のコンテンツの両側にCSSで角丸を設定します。コンテンツ数は可変の前提で、部分的に2カラムや1カラムになった時のパターンも考…
2021.09.13
nth-childの関数表記でカラムごとにCSSを設定
デモページはこちら 3カラムで複数行のコンテンツに、カラムごとに背景色のCSSを設定します。3カラムの場合、1カラム目は:nth-child(3n + 1)、2…
2021.09.12
90°回転させた要素をブロック要素内に収めるtransform-originの設定
左上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…
2021.08.29
Photoshopのレイヤーロックについて
Photoshopのレイヤーロックは5種類あり、左から順番に「透明ピクセルをロック」、「画像ピクセルをロック」、「位置をロック」、「アートボードやフレームの内側…
2021.08.26
svgをCSSのbackground-imageに指定
svgをCSSのbackground-imageに指定します。IE11への対応で書き方が変わりますが、今回はIE11にも対応させます。svgのコードは以下の通り…
2021.08.25
Photoshopのスマートフィルターについて
Photoshopのスマートフィルターはスマートオブジェクトに適用できる様々な効果です。通常フィルター等の効果は一度適用すると修正できませんが、スマートフィルタ…
2021.07.24
16進数のRGB値に透明度を指定
CSSでは16進数のRGB値に透明度を指定することはできません。例えば以下のような指定はエラーになり、背景色が適用されません。 Sassではrgba();という…
2021.07.24
Photoshopのスマートオブジェクトのsvgコードを取得
PhotoshopのスマートオブジェクトはPhotoshopからではsvgのコードが取得できません。シェイプであればシェイプレイヤーを右クリックし「SVGをコピ…
2021.07.23
PhotoshopのベクトルスマートオブジェクトとCCライブラリ
Illustratorで作成したオブジェクトをコピーしてPhotoshopへ貼り付けると、以下のようなウィンドウが表示されます。 スマートオブジェクトを選択して…
2021.07.12
CSSカスタムプロパティの使い方
CSSカスタムプロパティはCSS変数とも呼ばれ、CSS内に変数を定義して各プロパティの値で呼び出して使用します。一般的に変数は:rootに定義してグローバル変数…
2021.07.06
Photoshopのドロップシャドウをbox-shadowプロパティで適用
Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。デモページはこちら box-shadowプロパティ…
2021.07.06
background-imageプロパティを利用した高さ可変の三角形
borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…
2021.07.04
background-positionプロパティを利用した背景画像の右寄せ
background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-p…
2021.06.24
Photoshopのスライスを削除
Photoshopで画像書き出しの際、分割して書き出される場合はスライスが設定されています。このスライスの設定を以下の手順で削除します。 切り抜きツールの中にあ…
2021.06.15
Photoshopのレイヤーマスクをフォルダに適用
Photoshopのレイヤーマスクをフォルダに適用して、フォルダ内の全ての写真を角丸長方形の選択範囲でマスクします。フォルダ内に写真を左右に配置し、以下の手順で…
2021.06.15
Photoshopのクリッピングマスクで角丸長方形のシェイプの角丸を変更
Photoshopでクリッピングマスク用に角丸長方形のシェイプを作成し、作成後に角丸のサイズを変更してクリッピングマスクにも適用します。 まず以下の手順で角丸長…
2021.05.20
Photoshopのレイヤーパネルオプションでレイヤーのサムネイルを変更
Photoshopのレイヤーのサムネイルはデフォルトで、サムネイルサイズ：小、サムネイルの内容：ドキュメント全体を表示、になっています。 そのためドキュメント全…
2021.05.20
Photoshopで作成したシェイプのsvgコードを取得
Photoshopのシェイプで図形を作成し、svgのコードをコピーしてpath要素を取得します。 Photoshopで作成した図形をsvg形式で書き出し、または…
2021.05.20
Photoshopのクリッピングマスクについて
Photoshopでクリッピングマスクを使用します。写真のレイヤーをシェイプのレイヤーでマスクします。 1. 写真のレイヤーを上、シェイプのレイヤーを下にします…
2021.05.10
Photoshopでキャンバス、選択範囲、レイヤーを左右反転
Photoshopでキャンバス、選択範囲、レイヤーをそれぞれ左右反転します。まずキャンバスの左右反転です。以下のように操作するとキャンバス全体が左右反転します。…