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から制作したいなら頑張って良いかもしれません。
おしまい!
この記事が気に入ったらサポートをしてみませんか?