3カラムレイアウトのおさらい。

最近、3カラムレイアウトでホームページを制作する機会が多くなりました。

ぼくのホームページでも散々解説してきました(笑)。ただ、ぶっちゃけ他のサイトに飛ぶってめんどくさいですよね(笑)。

なので、この場で3カラムレイアウトのおさらいをしたい。

まずはHTMLから。

<section class="container">
<div class="container__left">
左
</div>

<div class="container__center">
中央
</div>

<aside class="container__right">
右
</aside>

</section>

とてもシンプル(笑)。スマホだと1列ですが、画面幅が768pxをこえると3カラムとなります。

SCSSはこんな感じです。

@media(min-width:768px){
.container{
display: flex;
gap:5%;
&__left{
width: 50%;
background: aqua;
}
&__center{
width: 20%;
background: green;
}
&__right{
width: 20%;
background: red;
}
}
}

メディアクエリで768pxをこえると3カラムになります。詳しい解説はホームページでも行います（後日）。

それにしても、4月後半からホームページ制作を本格的に始めて、1か月が経ちました。

それまではロゴ制作ばかりしていたのですが、今は圧倒的にホームページ制作をしています。

まぁ、ぼくは元々、Webデザイナーだったこともありキャリアは長いですね。

HTMLコーディングでバリバリ作るのですが、大体のことは分かります。まぁ、装飾系は弱いかなとは思いますが(笑)。

ま、シンプルで美しいホームページを目指していて、そして、スッキリとしたホームページを制作することを心がけています。

装飾はあまりしないですね。しても良いのですが、ポリシーに反するのでやりません～。

今後もこの路線で行きたい。

ちなみに、元々は参考書で勉強しました。5冊くらい買いました。評判の良い参考書を買いました。

が、、、まったく分からず。と言うか、参考書に載っているコードを見ながら打つのはシンドイ。

ミスっても「あれ？どこ？」ってなって勉強がはかどらない。

しかし、HTMLとCSSの区別がついて霧が晴れる。そして、スクールでも学ぶ。まったく問題なし。

そしてそれをひっさげてWebデザイナーとなりました。

今はWebデザイナーではありませんが、スキルさえあれば誰でもWebデザイナーになれると思います（それで食べていけるかは別問題）。

ぼくは今後もWebデザイナーとして活動していくつもりですが、まぁ、肩書きなんてどうでも良い。

ホームページを制作できたら良いだけなので。

話がそれましたが、3カラムのデザインはあまり見ないですね。ブログデザインと相性が良さそうですが。

コツさえ掴めば何カラムでもできます（見にくい感じにはなるかな）。

今、ホームページ制作でHTMLコーディングを学ばれているなら、過去にも言いましたが、まずは手書きで良いので理想の形を書くべきです。

そのあと、「このレイアウトにするにはどういうHTMLとCSSが必要か勉強されたら良いと思います。

ネット検索すれば簡単にでてきます。

ぼくのホームページでも割と解説していますので、気になる方はぜひ。

すべてではありません。「解説」と書いているホームページでは解説をしています。

ホームページ制作実績ー浪人のサムライ

ちょっと見にくいページになってきたので、改造を検討中。

勉強はキツイですが、1から制作したいなら頑張って良いかもしれません。

おしまい！