Webサイト制作
かーなびCSS：画像ギャラリーを2列や3列のまま拡大するようにする方法
レイアウトを
.hoge {
display: flex;
flex-wrap: wrap;
}
にしたまま、
- 3列にしたいなら画像サイズを33%など調整
- 2列にしたいなら画像サイズを50%など調整
かーなびPictureタグの中でメディアクエリを指定する/webpとjpgのうちどちらかを選択することで画像を読ませず軽量化する
かーなびCSS：margin 0 auto;
かーなびCSS：セレクタの種類
CSSの概要とセレクタの種類（子孫セレクタ、子セレクタ、全称セレクタ...）
かーなび練習メモから共有までできる練習帳CodePenの使い方
かーなびGSAP
GSAPの使い方
かーなびCSS：justify と align の覚え方
justify：横方向・左右に寄せる
- 正義（justice）の天秤が左右どちらに寄るかのイメージ
align：縦方向・上下に寄せる
- 対等に横並び＝アライアンスのように上下の優位性がなくフラットに上下どちらにまとめて寄せるかのイメージ
かーなびCodePenの使い方
かーなび「コーダー」「マークアップエンジニア」「フロントエンドエンジニア」の違い
Web制作の現場でよく耳にする「コーダー」「マークアップエンジニア」「フロントエンドエンジニア」。これらは似ているようで、実は担当する業務領域や求められるスキルセットに違いがあります。それぞれの役割を理解することで、Web業界の構造をより深く知ることができます。
担当領域の広さが大きな違い
これらの職種の最も大きな違いは、担当する業務領域の広さです。大まかには以下のようになります。
コーダー ＜ マークアップエンジニア ＜ フロントエンドエンジニア
このように、フロントエンドエンジニアが最も広範なスキルを求められる職種と言えます。それでは、それぞれの詳細を見ていきましょう。
コーダー：デザインを忠実に再現する専門家
コーダーは、Webデザイナーが作成したデザインカンプ（完成見本）をもとに、HTMLとCSSを用いてWebページをコーディング（記述）する職種です。主な役割は、デザインをブラウザ上で正確に再現することです。
- 主な使用技術：HTML, CSS
-
主な役割：
- デザインの忠実な再現
- 基本的なJavaScript（スライダーなど簡単な動き）の実装
マークアップエンジニア：意味と構造を考慮する設計者
マークアップエンジニアは、コーダーの業務に加えて、Webサイトの「意味」や「構造」を深く理解し、それをHTMLで適切に表現する専門家です。検索エンジン最適化（SEO）やアクセシビリティ（誰にとっても使いやすいこと）を考慮したコーディングが求められます。
- 主な使用技術：HTML, CSS, JavaScript
-
コーダーとの違い：
- セマンティックなマークアップ：文書構造を正しくマークアップし、検索エンジンや支援技術にページの意図を正確に伝える
- **SEO（検索エンジン最適化）**を意識したコーディング
- アクセシビリティへの配慮
- CMS（WordPressなど）のテンプレート作成・カスタマイズ
フロントエンドエンジニア：Webアプリの顔を創る開発者
フロントエンドエンジニアは、コーダーやマークアップエンジニアのスキルに加え、より高度なプログラミング技術を駆使して、Webアプリケーションのユーザーが触れる部分（フロントエンド）全般の開発を担います。単なるWebページ制作に留まらず、動的な機能や複雑なユーザーインターフェース（UI）を実装します。
- 主な使用技術：HTML, CSS, 高度なJavaScript, ReactやVue.jsなどのフレームワーク, API連携, パフォーマンス最適化など
-
マークアップエンジニアとの違い：
- JavaScriptフレームワークを用いた開発
- APIを利用したバックエンドとのデータ連携
- UI/UX設計への関与
- Webアプリケーションのパフォーマンスチューニング
まとめ：スキルの違い一覧
| 職種 | 主な役割 | 求められる主要スキル |
|---|---|---|
| コーダー | デザインを忠実にコーディングする | HTML, CSS |
| マークアップエンジニア | 意味や構造を考慮し、SEOやアクセシビリティを意識してコーディングする | HTML, CSS, JavaScript, SEO, アクセシビリティの知識 |
| フロントエンドエンジニア | Webアプリケーションのフロントエンド全般を設計・開発する | HTML, CSS, 高度なJavaScript, フレームワーク, API連携, UI/UX |
企業やプロジェクトによっては、これらの職種の定義が異なる場合もありますが、一般的にはこのようなスキルセットと担当領域の違いがあります。
かーなびモダンjs
かーなびGSAPアニメーション参考の見つけ方
GSAP（GreenSock Animation Platform）のアニメーションの参考にできるサイトはたくさんあります。目的別にいくつかご紹介します。
インスピレーションやアイデア探しに
GreenSock Showcase
GSAPの公式サイトにあるショーケースです。世界中のデベロッパーが作成した、GSAPを使った優れたウェブサイトやプロジェクトが紹介されています。クオリティの高い作品ばかりなので、インスピレーションを得るのに最適です。
Awwwards
優れたウェブサイトを表彰するプラットフォームです。Awwwardsで「GSAP」と検索すると、GSAPを活用した受賞サイトをたくさん見つけることができます。最先端のデザイントレンドとアニメーション技術を学ぶのに役立ちます。
Codegrid
国内外のクリエイティブなウェブサイトをまとめているギャラリーサイトです。「GSAP」で絞り込んで検索することで、様々な表現のウェブサイトを見ることができます。
コードと一緒に学びたい場合に
CodePen
多くのデベロッパーが自身のコードスニペットを共有しているプラットフォームです。「GSAP」や「GSAP ScrollTrigger」などで検索すると、具体的なアニメーションの実装コードを無数に見つけることができます。実際にコードを触りながら学習したい場合に非常に便利です。
ICS MEDIA
フロントエンド技術に関する質の高い記事を多く公開している日本のメディアです。「GSAP」で検索すると、基本的な使い方から応用的なテクニックまで、サンプルコード付きで詳しく解説された記事が見つかります。
特定の動きから探したい場合に
CodyHouse
UIコンポーネントやアニメーションのエフェクトを、チュートリアル形式で紹介しているサイトです。すぐに使える実践的なコードが多く、特定のインタラクションを実装したい場合に参考になります。
Tympanus Codrops
実験的でクリエイティブなウェブデザインやアニメーションのチュートリアルを豊富に掲載しています。ユニークでアーティスティックな表現を探している場合にインスピレーションを与えてくれるでしょう。
これらのサイトを参考に、ぜひあなたのプロジェクトに活かしてみてください。