HTML&CSS 進捗

このテーマで書くのはとても久しぶりで、かなり時間が空いてしまいました..
現在どのようなことをしているのか、どんなことができるのかを簡単にまとめていこうと思います。

・Bootstrapを使い始めました!!

Bootstrapはとても楽にかけて便利と聞いていましたが、最初から使ってしまうと深く理解ができなかったり、基礎のベースが作れないので使用してきませんでした。
ですが、だんだん理解が深まってきたのでついにBootstrapを使って書いています!!

・とにかく楽ちん!!

Bootstrapで一番使っているのは横並べです。
今までは箱を作ってfloat指定などで面倒でしたが、rowでくくってcol書くだけで横並びになってくれて、しかもレスポンシブ対応もしてくれるとか最高すぎます。かなり感動しました。

他にもたくさんクラスを準備してくれていて大体のことをHTML側でできるので楽ちんですね！

・colの間隔を変えたい時

標準の間隔だと狭かったり、もっと広げたりしたい時、僕はいつもこのコードを使っています。（※ネットにあった情報です）

.row--gutter-wide.row {
  margin-right: -30px;
  margin-left: -30px;
}
.row--gutter-wide > [class^="col-"], .gutter-30 > [class^=" col-"] {
  padding-right: 30px;
  padding-left: 30px;
}

しかし後に書こうと思っているのですが今はCSSではなくSassで書いています。Sassだと不具合が起きる場合があり複雑になってくるので、原因を突き止めて完璧に使えるようにしたいです。

・車輪の再発明

これをやってしまうことが多いです...笑
というのが、Bootstrapで用意されているのにわざわざ自分でクラスを作ってしまうのです...
最近は減ってきたもののまだやってしまいます。

これに関してはひたすらBootstrapのサイトを見るしかないですが、まだまだ見落としが多いです。
トライとしては空いた時間などで見ることをしています。

・Sass使い始めました！

sassで書き始めたのは最近ですが、これまた便利ですよね笑
変数が使えて今までより遥かに、コード量が減りました!!!
ただ最初の環境作りで詰まってしまいました。
今も理解が薄いので復習が必要です。

・変数の書き換え

Bootstrapファイルに入っている_variables.scssに変数が書かれているので、_custom-variables.scssを作ります。ベースになるのは元々あるvariablesですが、customの方に自分の書き換えたい変数を書きます。これで上書きすることができます。

僕はKoaraを使用しているのですが、変数を書き換えた後はコンパイルすることを忘れてはいけません。

他にもmixinやextendがありますがまだ少ししか使えてません。
作ったサイトは後日サーバーにアップして、公開したいと思います。
今すぐにリンクを貼ることができず申し訳ないです

・総じて現在の進捗

まとめると自分一人でサイトを組めるようにはなってきました。
ですが無駄なコードがあったり、まだまだ未熟なので経験を積んでいかなければなりません。改善できるところや知らないことばかりなので精進します。

そのため就職を考えています。技術は足りない部分もあると思いますが、チームで話し合いながらプロジェクトを進める形に憧れています。

現在は就職に向けた自身のWebサイト（ポートフォリオ）を制作中です。自分で1からデザインしてHTMLとCSSを書いています。