相対、固定、絶対位置に関する概念と実際の活用例を解説しました。「固定位置と絶対位置の違いってなんだろう？」「固定位置にしたいのに、選択メニューに絶対位置しか出てこない…」などの配置によるお悩みを本記事で解決します。配置方法は基本的な概念なので、必ずマスターしておきましょう。

STUDIOの機能のひとつ「ブレンドモード」の全ての機能と効果を画像を使いながら解説しました。意外と知られていませんが、ブレンドモードを使いこなせると面白いオブジェクトや画像を作成することができます。デザインよりの機能なので使いこなせることができれば、サイトクオリティをぐんと上げることができます。

モーダルを活用するメリットからモーダルの作り方までを書きました。モーダルはWebサイト上で重要な情報を伝えるのに便利で、確認や警告、フォーム入力などにも活用されます。本記事では１例を取り上げて、一から作成する手順を解説しています。この記事さえ読めばモーダルに関しては完全理解できると思います。

リッチテキストの活用シーンと使い方を解説しています。テキストの一部の色やフォントサイズを変更したいときに、通常のテキストボックスだと一括ですべてが変更されてしまいます。そういったときにリッチテキストを活用します。また、リッチテキストのみでできるマークダウン記法の使い方も説明しています。

STUDIOのトグル機能を使って、アコーディオンとプルダウンメニューを作成する方法を解説しました。これまでコードを入力する方法でしか実装できなかったアコーディオンですが、トグル機能を使えば簡単に作ることができます。2つのメニューは実案件でも頻出なので、是非覚えて使いこなして下さい。

STUDIOの基本機能だけで、動きのあるメタボールオブジェクトの作り方を解説しています。ブレンドモードやフィルターを活用するため難しく感じますが構造はシンプルです。覚えておくだけでSTUDIOでの表現の幅が広がるでしょう。ぜひ遊びながら使い倒して下さい。

カスタムコードを利用して、STUDIOでアコーディオンメニューを実装する方法を解説しています。アコーディオンメニューは、クリックすると隠れた詳細画面を表示することができ、スペースの節約やユーザビリティの向上などのメリットがあります。サンプルコードを用意しているのでコピペで簡単に実装できるようにしています。

API連携機能を使って日数を自動でカウントダウンする実装方法を解説しました。イベントページなどでよく見かける日数カウントダウンですが、表示された日付により、特別な発表や当日までのドキドキ感を演出することができます。ぜひ＋αの要素として使えるように実装方法を覚えて帰ってください。

Chrome検証ツールの使い方と正確なサイト模写方法を解説しています。実際にフォントの種類や大きさ、マージンやパディングを確認する方法を詳細に解説しています。サイト模写をする際に、おおよそで作業してしまっている人が多いため、Chrome検証ツールの正しい使い方を覚えて実務のスキルアップをしましょう。

STUDIOで案件獲得するための最短学習ロードマップを解説しました。STUDIO歴2年半の筆者が初学者の方に向けて、取り組むべきツールを厳選して紹介しています。高いスクールや講座は必要ありません。案件獲得に必要なのは計4000円ほど。案件獲得のための一助になれれば幸いです。