今回はSkillHacks（スキルハックス）に新しく追加されたコーポレートサイト作成をやってみたので自分用メモとしても書いてみます
今まではBootstrap3系だったのですが今回は4系を使用して講座を進めていきました
分かりやすいんで特につまるところも無くサクサクいく感じ
最初の画面はこんなかんじです
このようなwebフォントを使う時は
@font-face{
font-family:フォント名；
src: url(フォントURL、フォント形式）;
}
のようにするみたいです
基本的に今まで習ったもので出来ますね
bootstrapを使えばスライドショーも作れるようで見た目もかなり本格的な感じになります
スライドショーは正式にはcarousel（カルーセル）というらしくググったら回転台、回転木馬とかって意味があるらしいです
同時に出てきたメリーゴーラウンドなんですが、今までずっとメリーゴーランドだと思ってました
メリーゴーランドは誤った日本語表記らしいんですが遊園地ではメリーゴーランドのが多い模様。奥が深いｗ
今回<hr>で水平線をつけた時にhtml側にそのまま<hr color=”white”>として色がつけれるのを初めて知りました
色とかつけるのは全部CSS側だと思ってたんですが色々できるんですね
ページ途中からグリッドシステムを使う事もできるらしく「左に画像 右に文章」、「右に画像 左に文章」みたいに交互に配置もできる模様
グリッドシステムとは画面を横12分割してその場所にコンテンツを配置していくようなWebサイトのデザインの事です。情報を並べて表示するってイメージですね
ただそのままの設定だとスマホで見た時には画像のように文章、文章がかぶってしまうようで修正する方法も学びました
12分割で表示幅を決めていてcol-md-6と書くとパソコンで見た時だけ6個分（画面半分の幅を使ってくださいという意味）とか調整ができます
ここでの注意点はcontainerとrowをコピペして使うんですがその際</div>を忘れがちになる事ですね
今回はFont Awesomeというのを使ってアイコンなどを入れたんですがbootstrapと同じ使い方でコードをコピーしてhead内に貼り付け、アイコンフォントのコードをコピペして使いたい所に貼るだけでめちゃ簡単！
アイコン表示を大きくする時にはdivタグで囲ってあげてiconと名前をつけてそれをCSSで大きくする感じです
後から追加する時はdivの閉じタグ</div>を切り取って適切な位置に貼り付けになるのでそれだけ注意が必要ですね
リンク部分にカーソルを乗せたときの表示の変え方は
footer ul a:hover のように:hoverをつける。下の線を消す場合は
text-decoration: none;と入れるようです
aタグで飛ばす場合はIDを使い、classだと飛ばせないとのこと
hrmlを書いてからページのほうの読み込みをせず飛ばないなと数分悩んでました・・ｗ
background-attachment: fixed;で背景画像を固定する事ができて
固定するとページをスクロールした時に背景とナビゲーションバーが一緒に動かず、ちょっと凝った感じにみえます
こんな感じでスクロールした時、画像がずれていくので
見た目がカッコよくなりますが画像じゃいまいち伝わらないですねｗ
ナビゲーションのhtmlクラスにsticky-topを追加すると
下のほうにスクロールしてもバーが一定の所に表示されます
先ほどの文章がかぶってしまう件での修正方法ですが6個の要素のクラスに
order-md-1からorder-md-6とつけて
スマホ表示で文章が連続で表示されていた所だけ数字を入れ替えて
ちゃんと順番に見えるように調整して表示での問題を解決し講座終了となりました
Bootstrapを使ってサイトを作る基礎がしっかり学べた感じです
買ったあとにコンテンツ追加されるとは思ってなくて得した感が凄いです
おまけとして追加されているのですがコンテンツとして十分だと感じました
かなり本格的なサイトも早ければ1~2ヶ月で再現できるかと思います
気になった方がいましたら参考にしてみてください
【アラフォーがSkillHacks（スキルハックス）を全て受講。感想レビュー】
