構成

今回は静的サイト。使用したフレームワークはBootstrap。

サイト自体の枠組み・レスポンシブデザイン・サイト内を飾る部品の多くはBootstrapを使用して、背景色・フォントとかサイトのグリッドとかに関係ない部分をCSSに書きました。大きなデザイン崩れはないと思うが、小さな崩れはまた修正します。

フロントエンドの練習も兼ねているので、HTMLを割と真面目に書きました。

ちなみに、HTMLのSanitize ( Normalize )はBootstrapが担ってくれているので、やっぱり何かしらのフレームワークは入れた方が無難。

Bootstrap臭を抜く

Bootstrapは標準の物をそのまま使うと、「ああ、Bootstrap使ったのね」っていう見栄えになっちゃいます。

そこで、Bootstrapっぽさをなくすために、カスタマイズすることができます。

一番地道な手法はCSSでゴリゴリにいじる。ただ、これは一つの変更がどこまで影響するのかわかりません。僕はCardの四隅をもうちょっと丸くしようとして手動でいじってみたところ、Cardの上部の写真が飛び出ました。これは写真も四隅を丸めて一件落着で良かったのですが、こういうことが起こりかねないのでCSSでいじるのはちゃんと学んでからにした方がいいと判断しました。

そこで、Bootstrapをカスタマイズしてテンプレートの形で提供しているサービスがあります。
私は startbootstrap.com から SB Admin 2 というテンプレートをダウンロードして使用しました。

これは Bootstrap　カスタマイズ ってぐぐるとあっという間に詳しいやり方が出てくると思うので、申し訳ないですけど説明割愛。

かなり簡単にカスタマイズできるのでお試しください！

Bootstrapの `Carousel` にYoutubeの動画を埋め込む

Carousel とは

画像がスルスルと左右に移動するようにJSが組み込まれた部品ですが、これにもYoutubeの埋め込みを入れることができます。(Bootstrap 公式Document Carousel https://getbootstrap.com/docs/4.4/components/carousel/)

やり方はimgの部分を埋め込みリンクに変更すればうまくいくはずです。


<div class="carousel-item">
    <img class="d-block w-100" src="XXXX.jpg" alt="Third slide">
</div>
<div class="carousel-item">
    {{ ここに<iflame></iflame>のYoutubeの共有埋め込みリンクを放り込む }}
</div>

ちなみに動画のサイズを変更するにはのタグ内にwidthとheightの数値をいじる部分があるので、それで変更してください。

フォントの変更

工夫でもなんでもないですが。

Google FontsをCDNで利用するのはもはや定石なのかもしれませんが、使用していることは申し上げておきます。

挿絵を入れる

無機質なページになることは想像がついたので、Adobe Fresco(iPad お絵かきソフト)で謎の桜(?)の盆栽を書きました。ほぼ絵を描くのは初心者ですので、これだけ映えるように見えるのは、相当ソフトが優秀ということでしょう。

ちょっと華やかになったかな。意外と上手に描けた気がします。線がところどころ迷子にっているのはご愛敬。

ちなみに、index.htmlの最初のページのJappao's PortfolioはGIMPで画像編集して作りました。実はAdobe系よりGIMPの方が使用歴が長く操作に慣れているのでGIMPでさくっと作りました。（フリーソフト万歳）
本当はちゃんと文字も盆栽画像も元ソースのまま貼り付けるべきなのですが、ちゃんとやる方法が思い浮かばなかったので。これは改良点として次の課題にします。

おしまい

以上。

もうちょっと頑張れよって言われると思いますが、今回はここまでで。

このポートフォリオに乗せるためにこれからも開発頑張れそうです。

まだネタがあるので随時ポートフォリオ更新していきます。ぜひご覧になってください。