SAMPLE
コーディング実装サンプル一覧
コーディングの実装サンプルを、カテゴリ別にまとめた一覧ページです。
Webアニメーションの動きや、レスポンシブの各レイアウト方式など、実際の挙動を確認できるサンプルページへご案内します。
デザインをどう形にできるのか、依頼前にイメージを固めておきたい方は、気になるカテゴリから各サンプルをご覧ください。
Webアニメーションサンプル
Webサイトの第一印象を左右するアニメーションは、言葉だけでは伝わりにくい部分も多いため、実際の挙動を見ながら検討するのが近道になります。
以下のサンプルページで、CODING ARMYが対応できる動きの表現をご確認ください。
レスポンシブ実装サンプル
PC・タブレット・スマートフォンなど、異なる画面幅にどう対応させるかで、レスポンシブの実装は複数の方式に分かれます。
コーディングアーミーでは、幅を固定するソリッド、相対値で伸縮させるフレキシブル、画面幅いっぱいまで追従させるフルリキッドの3方式に対応しています。
それぞれ得意な見せ方や向いているサイトが異なるため、下層のサンプルページで表示の違いを見比べてから選ぶのがおすすめです。
ソリッドデザイン（ソリッドレイアウト）
ソリッドレイアウトは、コンテンツの幅をpxなどの固定値で指定し、画面幅が変わってもレイアウトを一定に保つ方式です。ブレイクポイントでPC表示とスマホ表示を切り替える挙動も、サンプルで確認できます。固定幅ならではの表示を実際に見たい方は、こちらのソリッドレイアウトの実装サンプルをご覧ください。
フレキシブルデザイン（フレキシブルレイアウト）
フレキシブルレイアウトは、幅を%やflexなどの相対値で指定しつつ、最大幅と最小幅を設けて極端な広がりや縮みを抑える方式です。現在のレスポンシブでは主流の考え方で、情報量の多いサイトにも扱いやすい手法です。可変と固定のバランスを実際の表示で確かめたい方は、こちらのフレキシブルレイアウトの実装サンプルをご覧ください。
フルリキッドデザイン（フルリキッドレイアウト）
フルリキッドレイアウトは、vwなどを使ってコンテンツを画面幅の100%まで追従させ、余白を作らずに画面いっぱいへ広げる方式です。画面幅にぴったり追従する動きを体感したい方は、こちらのフルリキッドレイアウトの実装サンプルをご覧ください。
