こんにちは！Webデザイナーの梶原です。Studioを使って、サイト全体を一人で作れる。クライアントワークでも特に困らない。それなのに、カスタムコードが出てきた瞬間、少しだけ手が止まる。「このコードでは、何をしてるんだろう？」「一応動いてはいるけど、本当にこれで合ってる？」そんな風に感じたことのあるデザイナーの方、いませんか？実はこれ、まさに以前の私自身です。私は普段のクライアントワークでWebデザイナーとしてStudioを使って実装まで担当させていただいていますが、HTMLやCSSなどのコードを0から書いて実装できるタイプではありません。Studioはノーコードツールですが、実際の制作ではもう少しリッチなアニメーションを追加したい外部ツールを埋め込みたいデザインの微調整をしたいけど、Studioの標準機能だと難しいと、コードに触れざるを得ない場面がまあまあ出てきます。そのたびに、「コードを書かずにどうにかできないか」を調べたり、一緒に仕事をしているエンジニアの方に該当部分だけ対応していただいたりしていました。ただ、そうした対応を繰り返す中で、「このまま、コードをあまり理解せずに避け続けるのは不安だな」と感じるようになりました。そう思ったことが、HTMLとCSSを基礎から学んでみようと思ったきっかけです。Studioはノーコードだけど、HTML&CSSを知っていると何が変わる？Studioは直感的に操作できる優れたツールですが、裏側ではHTMLとCSSが使われています。特に以下のような場面では、HTMLとCSSの基礎知識があるかどうかで、実装する時の安心感がまったく違います。カスタムコードを貼り付けるときclass名を指定してスタイルを当てるときアニメーション用のCSSを調整するときHTMLやCSSを“完璧に書ける”必要はありませんが、コードの構造が分かる・読めることで、どの要素を触っているのか何が影響しそうなのかを想像して実装できるようになります。Studioを使い続けるなら、最低限のHTML&CSS知識を持つことで、自分自身の「保険」になったり、「自信になる」存在だと感じました！勉強方法にプロゲートを選んだ理由HTMLやCSSを学ぶ方法はいくつもありますが、私はオンラインでプログラミング学習ができるサービス「Progate（プロゲート）」で勉強してみることにしました。Progate | プログラミングの入門なら基礎から学べるProgateプロゲートで学ぼうと思ったのは、上司の田島さんから「最初はプロゲートだと簡単に学びやすいと思いますよ。」とすすめていただいたことがきっかけです。実際に少し触ってみて、初心者向けでわかりやすく、いきなり難しくならない環境構築が不要で、思い立ったらすぐ始められる用語や概念の説明が分かりやすいなどの理由から、私には合っているなと感じたのでそのままプロゲートを受講することにしました。「Webデザイナーだけど、コードは苦手」そんな立場の人にとって、プロゲートのゆるやかなステップ感はかなりありがたいです、、、！Studio実装で最低限知っておきたいHTML知識Studioユーザーがまず一番最初に押さえておきたいのは、「HTMLの基本構造を理解すること」かなと思います。この基本構造は、以下で挙げるレッスン内で学べます。プロゲート該当レッスン【初級編】HTMLに触れてみよう！ 全レッスンレイアウトを作ろう！ 全レッスンコンテンツを作ろう！┗ メインのレイアウト【中級編】レイアウトを作ろう┗ 全体のレイアウトを作ろう勉強する中で特に重要だと感じたHTMLのポイント<html> 、 <head> 、 <body> の役割と構造<div>、<p>、<span> の違い<img>、<a> タグの基本要素の入れ子（親子関係）レッスンを進めていく中で、出てくる用語などもかなり増えていくのですが、ここで大事だと感じたのはすべてを暗記しなくてOK!ということ。「こんなタグがあるんだな」「HTMLはこういう構造になっているんだな」このくらいの理解で十分で、あとから調べられる状態になっていれば問題ないと思います。基本構造を学んだことで、カスタムコードを見たときに、「このタグはこの要素をまとめているんだな」などが何となくでも分かるようになり、コードに対する心理的ハードルが一気に下がったように感じています！Studio実装で最低限知っておきたいCSS知識次に重要なのがCSSです。「Studioで普段UI操作している内容は、ほぼCSSそのもの」です。CSSの基本は、以下で挙げるレッスン内で学べます。Studioの余白設定・文字サイズ設定UIとそれに対応するCSS（font-size / marginなど）が分かる画像入れるプロゲート該当レッスン【初級編】CSSに触れてみよう！ 全レッスンヘッダーを作ろう！┗ ヘッダーのレイアウト┗ ヘッダーの余白コンテンツを作ろう！┗ ボーダー┗ paddingとmargin【中級編】トップ部分を作ろう┗ 透明度、文字の間隔を調節しようレッスン一覧部分を作ろう┗ レイアウトを整えようヘッダーを固定しよう勉強する中で感じた、まず押さえておきたいCSSのポイントセレクタとプロパティプロパティ末尾のコロン（:）と、行末のセミコロン（;）font-size、color、line-height などの基本的なよく使うプロパティclass属性の考え方Studioで普段設定している内容が、「このCSSを書いているのと同じなんだ」と分かり、イメージが繋がったのが学んでいく中での大きな収穫でした。プロゲートの中で「ここだけはやっておきたい」レッスンまとめプロゲートのHTML&CSS編は先ほど挙げたレッスン以外にも内容が充実していますが、Studioユーザーがすべて完璧にやる必要はないかなと思っています。本当に最小限の「ここだけはやっておきたい」レッスンを挙げるなら、以下のレッスンで学んだ部分が、主にStudioでの実装の進めやすさに関わっていると感じているのでおすすめです！HTML&CSS 初級編 全編（必須）HTML&CSS 中級編┗ レイアウトを作ろう┗ ヘッダーを固定しようその他のレッスンで学べる細かいレイアウトなどは、「必要になったタイミングで学ぶ」で問題ないと感じました。こんな人におすすめこのプロゲートでの勉強方法は、こんな方には参考になると思います。Studioでサイト制作をしているWebデザイナーノーコードは使えるけど、コードを見ると少し不安になるカスタムコードを「よく分からないまま」使っているHTMLやCSSを0から書くつもりはないけど、意味は理解したい逆に、エンジニア転向を目指しているフルスクラッチでサイトを作りたいという方には、少し物足りない内容かもしれません。実際にコードを学んでみて感じた変化プロゲートでコードについての基礎を学んでから、Studioで実装するのが明らかに楽に、そして以前より自信を持って対応できるようになりました。触るべきコードの箇所や「何が分からないか」が分かるようになった何かエラーがあっても、原因や解決方法を推測できるようになったカスタムコードを見ても基本的な構造が何となくでも分かることで焦らなくなったまだまだ覚えきれていない部分も多いので、コードがちゃんと書けるようになったわけではありませんが、コードに対する苦手意識はかなり薄れました！お客様からの要望があった時にも「ここを修正したら実現できるかも？」という予測が立てられるようになったことで、以前より効率よく検証など進められているなと感じています。まとめStudioはノーコードでもクオリティの高いサイトを作成できる、十分に強力なツールです。ですが、HTMLとCSSの基礎を知っているだけで、実装の幅と対応する時の安心感は確実に広がります！個人的に、プロゲート HTML&CSS編はStudioユーザーが最初にコードを学ぶ教材として、かなり相性が良いと感じました。「コードは苦手だけど、Studioをもっと使いこなしたい」そんな方の参考になれば嬉しいです！最後までご覧いただき、ありがとうございました！