HTML,CSSについてぼんやり知っていたけど、0からページを作ったことがなかったので、作っていくなかで調べたこと、学んだことを書いていきます。

今回作ったポートフォリオページ

worksにこれから成果物をいっぱい載せていく予定！
ポートフォリオといいつつ内容がほとんど自己紹介なのは…
これからゴリゴリ開発してここにいろんなもの載せられるようにがんばらなきゃ！！

CDN

Content Delivery Networkの略

jQueryの例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

上のようにHTML内に記述するだけでjQueryが使えるようになる。すげぇ

いままで、フォントにしろフレームワークにしろ、ダウンロードしてフォルダに配置して…というのが一般的な導入方法だと思っていたので、あまりの手軽さに感動してしまった。
これはWebエンジニアやりたくなるぞ…
~~作ってる途中で知ったのでBootstrapはダウンロードして使ってしまっている。悔しい~~

時間がたつとページ遷移するやつ

<META http-equiv="Refresh" content="3;URL=content/index.html">

もっとJavaScriptとかでごにょごにょやってるもんだと思ってた。
かんたん。

onLoad=setTimeout("location.href='/content/index.html'",3000)>

JavaScript版、タグの中に入れる

gitブランチの便利さ

github.ioは自分のリポジトリのmasterブランチが勝手にページに反映される。

今回ポートフォリオを作成するにあたって、
　　1.pythonのpelicanを使う
　　2.スクラッチで0からゴリゴリ書く
　　3.テンプレートをダウンロードして加工する
の3つを考えていた。

今回はお勉強の趣旨もあったので2番メインで作成したが、pelicanも気になる…ほかの人が作ったテンプレートの方が絶対見栄えいいな…ということで、
basic_htmlブランチとpelicanブランチ、templateブランチで分けて、公開したいものをmasterブランチにマージする、
ということをしてみた。
いちいちアップロードし直さなくていいのめっちゃ楽！

まだチーム開発のメンバーになったことはないけど、実際の開発プロジェクトでも、リリースバージョンを分けるとかでこういう使い方してるのかなと感じることができた。
バージョン管理もかなり便利だった。

画像のランダム表示

HTMLとCSSでは乱数を扱えない
↓
JavaScriptとうまく組み合わせよう
↓
jQueryならCSSに追加できるらしい
↓
background-image:の後ろにurl(画像path)を指定したい…
↓
pathを文字列で配列に入れる
↓
url()の中に文字列結合
↓

$('.box').css('background-image', 文字列);

でCSSに追加できた！

感想

記述量多いなあ～～～!!!!
まだ技術不足で無駄が多いのか、HTMLなら仕方ないのかどうなんですかね
自分はやっぱりPythonが記述量減らせて好きだなあと再認識
とはいえかなり無駄が多いのも事実なのでこれから無駄な記述をなくせるようにしていきたい

(関係ないけど)Udemyのブラックフライデーセール

この機会に教材いくつか買ってみたいので、
Web開発、AI・機械学習、Python、開発全般、エンジニアとしての基礎
あたりのキーワードでおすすめがあったら教えてください！