Generated by All in One SEO v5.0.0.1, this is an llms.txt file, used by LLMs to index the site. # SUKIWEB(スキウェブ)｜隙間時間に学ぶWEB知識 SUKIWEBは「隙間時間に学ぶWEB知識」をテーマに、HTML/CSS、JavaScript、SCSSなどのコーディング技術から、GSAPのようなモダンなアニメーション技術まで、最新のWeb開発知識をわかりやすく解説しています。初心者から上級者まで、幅広い層のWeb制作者に向けた実践的なコンテンツを提供しており、日々の隙間時間を活用して効率的にスキルアップできる場を目指しています。 ## Sitemaps - [XML Sitemap](https://sukiweb.tech/sitemap.xml): Contains all public & indexable URLs for this website. ## 投稿 - [ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた！](https://sukiweb.tech/customize-extractioncssselector-to-flocss/) - VSCode拡張機能ExtractionCssSelectorをFLOCSS設計に最適化する方法を解説。フィルター機能を使って不要なセレクターを除外し、コーディング効率を大幅向上させる設定方法とカスタマイズ例をご紹介します。 - [ExtractionCssSelectorをCursorで使う方法｜VS Code限定拡張機能をCursorに手動でインストールする方法](https://sukiweb.tech/post-917/) - VS Code拡張機能「ExtractionCssSelector」をCursorで使う方法を解説。Cursorの拡張機能検索で見つからない場合も、VSIXファイルをダウンロードして手動インストールすれば利用可能です。3ステップで簡単に導入できます。 - [PHPの配列を活用してWordPressのコーディング作業を効率化しよう！](https://sukiweb.tech/post-840/) - WordPressのLP制作で膨大になる繰り返し要素をPHP配列でスマートに実装！FAQやリストアイテムなどの入力・更新・追加作業を大幅効率化する方法を解説します。 - [【スニペットあり】CSSのtext-transformで大文字見出しを実装｜スクリーンリーダー対応でアクセシビリティ向上](https://sukiweb.tech/post-830/) - 英語＋日本語の見出しをコーディングする際、HTMLに大文字を直書きすると読み上げ困難に。本記事ではtext-transformを活用した正しい大文字化とVSCode用スニペットを無料プレゼント！ - [【実例つき】CSS変数を導入するとサイト制作が超便利に！【脱Sass変数】](https://sukiweb.tech/post-787/) - CSS変数を導入するだけで、色やスタイルの管理が劇的にラクに！Sass変数との違いや、JavaScript連携・ダークモード対応などの応用術も実例つきで紹介します！ - [【@property】CSS変数(カスタムプロパティ)でテキストグラデーションを滑らかにアニメーションする方法【こんかい技術メモ#2】](https://sukiweb.tech/814-2/) - CSSの新機能@propertyを使えばCSSカスタムプロパティを直接アニメーション可能！全ブラウザ対応でテキストグラデーションを数行で滑らかに動かす実装手順・サンプルコード・メリットを徹底解説【CodePenデモ付き】 - [【Splide.js】無限スクロールするテキストアニメーションの実装方法【こんかい技術メモ#1】](https://sukiweb.tech/post-489/) - Splide.jsを活用した無限スクロールするテキストアニメーションの作り方を解説！CSSやJavaScriptを使って滑らかなエフェクトを実装する方法を詳しく紹介します。 - [完全未経験から大学生コーダーへ！大学生で月20万円を稼ぐためのコミュニティ活用術！](https://sukiweb.tech/post-588/) - 完全未経験から始めた大学生コーダーが月収20万円を達成するまでの4年間の軌跡。岡山在住の現役大学生がデイトラコミュニティを活用し、信頼構築からクライアント獲得までの具体的な方法を公開。オフ会参加、SNS発信戦略、コミュニティ活用など、地方在住でも全国の案件を獲得するためのノウハウを惜しみなく共有します。 - [【知るだけで時短！？】コーディングを超助けてくれるサイト10選](https://sukiweb.tech/post-454/) - 駆け出しWebコーダー必見！コーディングの効率を劇的にアップさせる便利サイトを厳選してご紹介。CSSグリッドジェネレーター、clip-pathメーカー、レスポンシブデザイン用clamp()ジェネレーター、UIコンポーネント集、PageSpeed Insights など、実践で役立つツールをまとめました。Web制作の生産性を向上させたい方は必見です！ - [【完全ガイド】CSSの:nth-childセレクターの使い方！奇数・偶数・範囲指定・応用テクニックまで徹底解説](https://sukiweb.tech/post-567/) - CSSの:nth-childセレクターを使いこなせば、特定の順番の要素に柔軟にスタイルを適用可能！奇数・偶数の選択、間隔を空けた指定、範囲選択、:nth-last-childとの違い、応用テクニックを分かりやすく解説。CSSのコーディング効率をアップさせたい方必見！ - [【無料でも使える】ChatGPTのメモリ機能で爆速コーディング！WEBコーダーが教える時短テクニック](https://sukiweb.tech/458-2/) - ChatGPTのメモリ機能を活用すれば、頻繁に使うプロンプトを記憶させてコーディング作業を効率化できます。無料プランでも利用可能なこの機能を使って、日本語出力の指定、HTMLへの自動クラス付与、FLOCSSに基づくクラス設計、PHPのエスケープ処理、CSSの最適化など、実務で役立つ設定方法をWEBコーダーが解説します。 ## 固定ページ - [Konkai's Portfolio Web Coder｜こんかいポートフォリオ Webコーダー](https://sukiweb.tech/konkai-portfolio/) - 岡山県津山市在住のWebコーダー・『こんかい』のポートフォリオサイトです。LPやWordPress構築を中心に、15件以上のサイト制作実績をもつ。高品質なコーディングで、ビジネスの成果を引き出すWebサイトを制作を制作いたします！WEB制作のご依頼・ご相談はお問い合わせから！ - [プライバシーポリシー](https://sukiweb.tech/privacy-policy/) - SUKIWEB（以下「当ブログ」といいます。）は、本ウェブサイト上で提供するサービス（以下「本サービス」といい - [お問い合わせ](https://sukiweb.tech/sukiweb-contact/) - [ポートフォリオお問い合わせ](https://sukiweb.tech/contact/) - [お問い合わせありがとうございました！](https://sukiweb.tech/thanks/) - [記事一覧](https://sukiweb.tech/archive/) ## ポートフォリオ - [ドローン塾｜資格取得で終わらないドローンスクール](https://sukiweb.tech/portfolio-works/portfolio-887/) - WordPress構築とGSAPアニメーションを活用し、ドローン塾の公式サイトを制作。お問い合わせフォームの条件分岐やFAQ自動目次生成など、運営を効率化する機能を実装しました。 ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [２週間で学べるコーディング基礎講座｜LPサイト制作](https://sukiweb.tech/portfolio-works/portfolio-879/) - Shopify / Liquidを用いて“２週間で学べるコーディング基礎講座”のLPを制作。鉛筆や黒板アニメで親しみやすく演出し、スキーマ型の柔軟な更新機能を実装しました。 ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [デイトラ for Student](https://sukiweb.tech/portfolio-works/portfolio-771/) - Webスキル特化型オンラインスクール「デイトラ」の学生向けの新サービス 「デイトラ for Student」のLPコーディングを担当させていただきました！ ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [Uno Wellness｜宇野園恵 フリーインストラクター 公式HP](https://sukiweb.tech/portfolio-works/uno-wellness/) - 岡山県で大活躍中のフリーインストラクター、宇野園恵様の公式ホームページを制作しました。 宇野園恵様は、「楽しく継続できる運動」をテーマに掲げ、「健康から笑顔を」を届ける活動を精力的に展開されています。 今回のプロジェクトでは、宇野様のテーマや想いをしっかりと反映し、訪問者にその魅力が伝わるホームページの制作を目指しました。 ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [SUKIWEB & PORTFOLIO｜隙間時間で学べるWEB知識](https://sukiweb.tech/portfolio-works/portfolio-330/) - 執筆中🖌️しばらくお待ちください！ ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [株式会社SUN｜AIで未来を切り拓く、業務効率化のパートナー](https://sukiweb.tech/portfolio-works/sun/) - AI研修・開発事業を手掛ける株式会社SUN様のコーポレートサイトのコーディング（WordPress構築）を担当させていただきました。 法人営業の際に活用するサイトということもあり、「信頼性」と「高級感」を兼ね備えたデザインに仕上げております。 ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [Rich-Life｜家具家電レンタルサイト](https://sukiweb.tech/portfolio-works/rich-life/) - 家具家電レンタルサイト風のLPをコーディング。デイトラ主催の「実案件チャレンジ」第1回に挑戦し、限られた時間の ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [SUISOPOT｜LP【第2回実案件チャレンジ優秀賞作品👑】](https://sukiweb.tech/portfolio-works/suisopot/) - デイトラ主催「実案件チャレンジ」第2回優秀賞作品👑1週間という限られた期間で、約20,000pxに及ぶスピード ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [Garden Salad｜表参道カフェ風LP](https://sukiweb.tech/portfolio-works/portfolio-321/) - このサイトは、GSAPを活用したオープニングアニメーション、ScrollTriggerを用いたパララックス、そ ｜WEB制作のご依頼・ご相談はお問い合わせから！ - [TOMBLACK｜パーソナルトレーニングジム](https://sukiweb.tech/portfolio-works/tomblack/) - Fitness 3rd Place TOMBLACK（トムブラック）は、岡山県津山市を代表するパーソナルトレー ｜WEB制作のご依頼・ご相談はお問い合わせから！ ## カテゴリー - [コーディング爆速術](https://sukiweb.tech/category/speed-coding/) - 『コーディング爆速術 』の記事一覧ページです！ - [コーディング特集](https://sukiweb.tech/category/coding/) - 『コーディング特集 』の記事一覧ページです！ - [コラム](https://sukiweb.tech/category/column/) - 『コラム 』の記事一覧ページです！ - [こんかい技術メモ](https://sukiweb.tech/category/konkai-skill-memo/) - 『こんかい技術メモ 』の記事一覧ページです！ ## タグ - [FLOCSS](https://sukiweb.tech/tag/flocss/) - 『FLOCSS 』の記事一覧ページです！ - [HTML/CSS](https://sukiweb.tech/tag/html-css/) - 『HTML/CSS 』の記事一覧ページです！ - [ChatGPT](https://sukiweb.tech/tag/chatgpt/) - 『ChatGPT 』の記事一覧ページです！ - [WordPress](https://sukiweb.tech/tag/wordpress/) - 『WordPress 』の記事一覧ページです！ - [Cursor](https://sukiweb.tech/tag/cursor/) - 『Cursor 』の記事一覧ページです！ - [PHP](https://sukiweb.tech/tag/php/) - 『PHP 』の記事一覧ページです！ - [VSCode](https://sukiweb.tech/tag/vscode/) - 『VSCode 』の記事一覧ページです！ - [キーボードショートカット](https://sukiweb.tech/tag/キーボードショートカット/) - 『キーボードショートカット 』の記事一覧ページです！ - [Pickup](https://sukiweb.tech/tag/pickup/) - 『Pickup 』の記事一覧ページです！ - [Splide.js](https://sukiweb.tech/tag/splide-js/) - 『Splide.js 』の記事一覧ページです！ - [デイトラ](https://sukiweb.tech/tag/デイトラ/) - 『デイトラ 』の記事一覧ページです！ - [デイトラコミュニティ](https://sukiweb.tech/tag/デイトラコミュニティ/) - 『デイトラコミュニティ 』の記事一覧ページです！ - [大学生](https://sukiweb.tech/tag/大学生/) - 『大学生 』の記事一覧ページです！ - [:nth-child](https://sukiweb.tech/tag/nth-child/) - 『:nth-child 』の記事一覧ページです！ - [:has](https://sukiweb.tech/tag/has/) - 『:has 』の記事一覧ページです！ - [:not](https://sukiweb.tech/tag/not/) - 『:not 』の記事一覧ページです！ - [擬似クラス](https://sukiweb.tech/tag/擬似クラス/) - 『擬似クラス 』の記事一覧ページです！ - [JavaScript](https://sukiweb.tech/tag/javascript/) - 『JavaScript 』の記事一覧ページです！ - [無限スクロール](https://sukiweb.tech/tag/無限スクロール/) - 『無限スクロール 』の記事一覧ページです！ - [スライダー](https://sukiweb.tech/tag/スライダー/) - 『スライダー 』の記事一覧ページです！ - [SCSS](https://sukiweb.tech/tag/scss/) - 『SCSS 』の記事一覧ページです！ - [Grid](https://sukiweb.tech/tag/grid/) - 『Grid 』の記事一覧ページです！ - [clip-path](https://sukiweb.tech/tag/clip-path/) - 『clip-path 』の記事一覧ページです！ - [clamp()](https://sukiweb.tech/tag/clamp/) - 『clamp() 』の記事一覧ページです！ - [まとめ記事](https://sukiweb.tech/tag/まとめ記事/) - 『まとめ記事 』の記事一覧ページです！ - [Class](https://sukiweb.tech/tag/class/) - 『Class 』の記事一覧ページです！ - [CSS変数](https://sukiweb.tech/tag/css変数/) - 『CSS変数 』の記事一覧ページです！ - [SASS変数](https://sukiweb.tech/tag/sass変数/) - 『SASS変数 』の記事一覧ページです！ - [@property](https://sukiweb.tech/tag/property/) - 『@property 』の記事一覧ページです！ - [グラデーション](https://sukiweb.tech/tag/グラデーション/) - 『グラデーション 』の記事一覧ページです！ - [アニメーション](https://sukiweb.tech/tag/アニメーション/) - 『アニメーション 』の記事一覧ページです！ - [CSSアニメーション](https://sukiweb.tech/tag/cssアニメーション/) - 『CSSアニメーション 』の記事一覧ページです！ - [スニペット](https://sukiweb.tech/tag/スニペット/) - 『スニペット 』の記事一覧ページです！ - [アクセシビリティ](https://sukiweb.tech/tag/アクセシビリティ/) - 『アクセシビリティ 』の記事一覧ページです！ - [配列](https://sukiweb.tech/tag/配列/) - 『配列 』の記事一覧ページです！ - [LP](https://sukiweb.tech/tag/lp/) - 『LP 』の記事一覧ページです！ - [拡張機能](https://sukiweb.tech/tag/拡張機能/) - 『拡張機能 』の記事一覧ページです！ - [ExtractionCssSelector](https://sukiweb.tech/tag/extractioncssselector/) - 『ExtractionCssSelector 』の記事一覧ページです！ ## ジャンル - [HP](https://sukiweb.tech/portfolio-cat/hp/) - 『HP』の制作一覧ページです！ - [LP](https://sukiweb.tech/portfolio-cat/lp/) - 『LP』の制作一覧ページです！ - [自主制作](https://sukiweb.tech/portfolio-cat/independent-production/) - 『自主制作』の制作一覧ページです！ - [デザイン](https://sukiweb.tech/portfolio-cat/design/) - 『デザイン』の制作一覧ページです！ - [Shopify](https://sukiweb.tech/portfolio-cat/shopify/) - 『Shopify』の制作一覧ページです！ ## タグ - [コーディング](https://sukiweb.tech/portfolio-tag/コーディング/) - 『コーディング』の制作一覧ページです！ - [SEO対策](https://sukiweb.tech/portfolio-tag/seo/) - 『SEO対策』の制作一覧ページです！ - [デザイン](https://sukiweb.tech/portfolio-tag/デザイン/) - 『デザイン』の制作一覧ページです！ - [ライティング](https://sukiweb.tech/portfolio-tag/ライティング/) - 『ライティング』の制作一覧ページです！ - [WordPress](https://sukiweb.tech/portfolio-tag/wordpress/) - 『WordPress』の制作一覧ページです！ - [WEBマーケティング](https://sukiweb.tech/portfolio-tag/webマーケティング/) - 『WEBマーケティング』の制作一覧ページです！ - [Pickup](https://sukiweb.tech/portfolio-tag/pickup/) - 『Pickup』の制作一覧ページです！ - [アニメーション](https://sukiweb.tech/portfolio-tag/アニメーション/) - 『アニメーション』の制作一覧ページです！ - [ピクセルパーフェクト](https://sukiweb.tech/portfolio-tag/ピクセルパーフェクト/) - 『ピクセルパーフェクト』の制作一覧ページです！ - [実案件チャレンジ](https://sukiweb.tech/portfolio-tag/実案件チャレンジ/) - 『実案件チャレンジ』の制作一覧ページです！ - [GSAP](https://sukiweb.tech/portfolio-tag/gsap/) - 『GSAP』の制作一覧ページです！ - [ScrollTrigger](https://sukiweb.tech/portfolio-tag/scrolltrigger/) - 『ScrollTrigger』の制作一覧ページです！ - [スライダー](https://sukiweb.tech/portfolio-tag/スライダー/) - 『スライダー』の制作一覧ページです！ - [Shopify](https://sukiweb.tech/portfolio-tag/shopify/) - 『Shopify』の制作一覧ページです！