transform複数指定時の順番について

transformプロパティで複数指定する場合は、指定の順番に注意が必要です。デモページはこちら 以下のhtml構造で確認します。 CSSでボタンの矢印を再現し…

flex-shrinkで文字の改行を防ぐ

flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。デモページはこちら 以下のhtml…

box-decoration-breakでテキストの背景色を設定

box-decoration-breakプロパティでテキストに背景色を設定します。複数行の文字に対応でき、改行も問題ありません。デモページはこちら 以下のhtm…

ローカル変数をスタイルセットの外側で使用

通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参…

@contentを利用してmixinにスタイルセットを渡す

mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述（スタイルセット）を@contentが書かれた場所で展開します。 以下はhove…

z-index: -1;指定時の注意点

z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div…

90°回転させた要素をブロック要素内右側に収めるtransform-originの設定

右上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…

SourceTreeでリモートリポジトリのクローン時に発生するエラー対処法

SourceTreeでBacklogのリモートリポジトリをクローンします。クローンの画面でBacklogのリモートリポジトリのURLを入力すると、以下のようにB…

BacklogSourceTree

Photoshopのグラデーションオーバーレイをlinear-gradientで適用

Photoshopのグラデーションオーバーレイを、background-imageプロパティのlinear-gradientで適用します。グラデーションの角度は…

Photoshopの縦書きと「縦中横」の設定

Photoshopで横書きした文字を縦書きにするには、文字パネルのハンバーガーメニューから「テキストの向きを変更」を選択します。 横書きの文字が縦書きになりまし…

SourceTreeでディレクトリを含むブランチを作成

SourceTreeで「develop/user_a」ブランチを作成します。「main」ブランチと「develop」ブランチがある状態で、「develop」ブラ…

SourceTree

Photoshopのレイヤー効果「境界線」の設定

Photoshopのレイヤー効果「境界線」は境界線が適用される位置を「外側」「中央」「内側」から選択できます。 試しに正方形のシェイプ（線無し塗り無し）に、レイ…

Photoshopで同じレイヤー効果を複数使用

Photoshopのレイヤー効果の中で、「境界線」「シャドウ（内側）」「カラーオバーレイ」「グラデーションオーバーレイ」「ドロップシャドウ」は同じ効果を複数使用…

Photoshopのアートボード書き出し

Photoshopのアートボード書き出しは、書き出したい「アートボード」のグループを右クリックし、書き出し形式を選択します。 または以下のように操作してもアート…

Photoshopのクリッピングマスク解除とレイヤーマスク解除

Photoshopで写真を円形にクリッピングマスクした場合とレイヤーマスクした場合、クリッピングマスクの解除とレイヤーマスクの解除を確認します。 クリッピングマ…

縦積みinline-flexの折り返しとwriting-modeによる代用

inline-flexで縦積みにした場合の折り返しと、writing-modeで縦積みにした場合の折り返しを確認します。デモページはこちら htmlは以下の単純…

異なる親要素を持つ子要素の重なり

異なる親要素を持つ子要素の重なりを、positionプロパティとz-indexプロパティを指定して確認します。デモページはこちら 以下のhtml構造で確認します…

隣接セレクタ、間接セレクタ、直下セレクタについて

隣接セレクタ、間接セレクタ、直下セレクタの動作を確認します。デモページはこちら 隣接セレクタ 間接セレクタ 直下セレクタ A + B A ~ B A > …

Photoshopの画像アセット無効化

Photoshopで画像アセットが有効になっていると、psdファイルを開いた瞬間に画像アセットが自動保存されます。 具体的には、psdが「abc.psd」の場合…

Photoshopの仮想記憶ディスク

psb（PhotoShop Bigdocument）など大容量のファイルをPhotoshopで開こうとすると、以下のようなメッセージが表示されてPhotosho…

positionプロパティとz-indexプロパティによる重なり

positionプロパティとz-indexプロパティによる重なりを確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div-childのd…

Photoshopのアートボード

Photoshopは通常1ファイルにつき1カンバスですが、アートボードを利用すると1ファイル内に複数のカンバスを表示できます。 新規でアートボードのドキュメント…

linear-gradientを利用した文字の下線

background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…

親要素にtransformが設定されている場合のposition: fixed;

通常、position: fixed;でtop: 0;left: 0;の場合、画面の左上が基準位置になります。しかし、親要素（先祖を含む）にtransformが…

jQueryで最初・最後の要素を取得（first・last）

jQueryのfirst・lastメソッドで最初・最後の要素を取得します。また、first・lastをセレクタとして使用します。以下のhtmlの構造で確認します…