![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
Design
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】クリティカルCSSとは何か?使い方や必要性をわかりやすく解説|Laravel(PHP)で実装する方法
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
【SASS】@forの便利な使い方を実例で解説|toとthroughの違いやmarginやpadding、フォントサイズなどのCSSの簡単一括作成|forループのメリット(.scss, 初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)
【Affinity Photo】PC/スマホ画面やTVスクリーンに映っている画像を他の画像に差し替える方法|実例で分かりやすく解説(パソコンやスマートフォンやテレビの投影画像の変更)
![](https://prograshi.com/wp-content/uploads/2021/05/editor-3573850_1280-320x180.jpg)
【Affinity Photo徹底解説】画像・写真から人物を切り抜く方法をわかりやすく解説|細かい調整でキレイなトリミング(かんたん、初心者向け)
![](https://prograshi.com/wp-content/uploads/2021/03/image-127-320x180.png)
RGB3原色とCMYB3原色とCMYKの円をAffinity Designerで作成する方法
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】カスケーディングとは何か?インラインスタイル、!importantの優先順位やセレクタでタグ名とクラス名を指定した場合にどちらのスタイルが適用されるか?
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】文章の最初の行(1行目)のみにスタイルを適用する方法。::first-lineとは何か?使い方を実例で解説|画面幅の違いにより折り返したテキストへの適用(初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)
【Affinity Photo】パッチツールとは何か?使い方を実例画像で解説|PCやスマホ画面、選択範囲を他の場所の背景で塗りつぶす方法(投影)
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
【SASS】.scssファイルを簡単にCSSに変換(コンパイル)する方法(Dart-sass, @use対応)|VSCodeのLive Sass Compilerの使い方を実例で解説(初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2021/08/image-182-320x180.png)
【簡単 Affinity Designer】色をRGBや16進数(#から始まるHTMLカラーコード)で指定する方法|現在のカラーコードの調べ方
![](https://prograshi.com/wp-content/uploads/2021/06/image-509-320x180.jpg)
【Affinity Designer】ツールの持ち替えが面倒!超便利なショートカットコマンドで簡単に選択する方法一覧(Affinity Photoも)
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】フワッと表示してスムーズに消える点滅アニメーションの作成方法|フェードイン&フェードアウトを同時に指定(fadeIn, fadeout, animation, animation-name)|@keyframesとは何か?
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
【SASS】!defaultとは何か?使い方やメリットを実例で解説|@import, @use, @forwardでの処理の違いや必要性(エラー対処法 Error: This variable was not declared with !default in the @used module)
![](https://prograshi.com/wp-content/uploads/2021/10/image-1-320x180.png)
【WordPress】テキストのハイライトや下線マーカーを追加する方法を実例画像で解説|Elementor(エレメンター)の文字に色付けをする方法(linear-gradientのtransparentの%による違い)
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
【Rails・Webpacker】node-sassをdart-sassに変更する方法。sass-loaderとNode Sass, Dart Sassの違いは何か?(アンインストールとインストール)
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
【SASS】mixin(ミクシン)とは何か?メリットや使い方を実例で解説|引数ありとなし、初期値の指定、@content, @include, Error: Missing argument $ (.scss, 初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2021/06/image-470-320x180.png)
【Affinity Desinger】背景透明の画像の透明部分を好きな色で塗りつぶす方法
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】display: flexで上下左右中央揃えや、右寄せなど要素毎に配置を変更する方法|フレックスボックス(flexbox)全体や親要素の縦横配置指定の実例
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】::first-letterとは何か?メリットや使い方を実例で解説|テキストの最初の1文字目(書き出し)のみのスタイルを簡単に変更する方法(初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2021/10/image-8-320x180.png)
SASS(サス)とは何か?sassなのになぜ拡張子が.scssなのか?.sassと.scssの違いや意味を実例で解説
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】セレクタのタグ名の真後ろの.(ドット)の意味は何か?スタイルを適用する要素をクラス名で絞り込む方法(スペースを空けないクラス名の指定)|#との違い
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)
【Affinity Photo】写真や画像の輪郭、鼻、あごを細くする方法を実例画像で解説|ゆがみペルソナツール&前に押し出しツールの使い方と修正方法(初心者向け、わかりやすい)
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】セレクタの記号の意味は何か?>(大なり・不等号)、*(アスタリスク)、+(プラス)、,(カンマ)、.(ドット)、半角スペース(空白)の違いや使い方を実例で解説|スタイルの絞り込みや指定方法一覧まとめ
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】画像のアスペクト比を保つ簡単な方法|aspect-ratioの使い方
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)
【Affinity Photo】ぼかし・モザイクを入れる方法を実例画像で解説|四角や自由選択でぼかす(わかりやすい、初心者向け)
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)
【Affinity Photo】画像や写真の広い範囲を部分的に消す方法|インペインティングブラシツールで一部を上手く消せない時の対処法を実例で解説
![](https://prograshi.com/wp-content/uploads/2021/06/image-483-320x180.png)
【Affinity Designer】メニューが消えた!?左カラムや右カラム、ツールバーを表示してデフォルトの状態に戻す方法
![](https://prograshi.com/wp-content/uploads/2021/10/image-17-320x180.png)
【CSS】display: gridのgap(ギャップ)とは何か?要素間の隙間を調整する方法を実例で解説|行間や列の間の設定(row-gap, column-gapとの違い)
![](https://prograshi.com/wp-content/uploads/2022/05/image-55-1-320x180.jpg)