Jw_cadを勉強しようと思ったキッカケは、昔、就職面接の時にCADを使えない事が原因で不採用になった経験が有ったからです。
Jw_cadの勉強に使用したテキストは、「11コマンドでスラスラ描けるJw_cad7」（エクスナレッジ）です。
このWebページは、以前HPビルダーで作成したものを基にしてテキストエディターでコーディングしました。（「トップ」と「独学の記録２」は一から記述し、「独学の記録１」は以前作ったものを一部改変しました。）
他に、WordPressを使用して作成したプログラミングについてのサイトも有り、こちらからジャンプ出来ます。
Webページ作成上のポイント
- Jw-cad背景画像でウィンドウ全体に覆うためにbody要素のCSSで「background-size: 100% 100%;」と指定しました。
- 1.の方法では「独学の記録１」のJw-cad背景画像がズームされすぎてしまうため、Jw-cad背景画像をヘッダー・フッター・左右サイドバー用の4つに分割しました。
- 左右サイドバーを両端に配置するために, Jw-cad背景画像用のヘッダー・フッター以外の部分を包む親要素を作り、そこをflexコンテナにして、CSSのflexboxで「justify-content: space-between;」を指定しました。
- flexアイテム（Jw-cad背景画像のヘッダー・フッター以外の部分）にCSSのflexboxのorderプロパティを指定して要素の配置順を変更しました。
- 750px以下の場合にJw-cad背景画像のみを透過させるために,Jw-cad背景画像を設置したヘッダー・フッター・左右サイドバーにCSSのメディアクエリ（「@media screen and (max-width:750px)」）で「opacity: 0.5;」を指定しました。
- 花火の画像をJw-cad背景画像以外の部分の背景画像に使いたいと思ったところ、750px以下の場合にJw-cad背景画像の部分に花火の画像が透けてしまうため、750px以下の場合の「opacity: 0.5;」を辞めました。
- また、タイトルのフォントはGoogleフォントを使い、タイトルのネオン効果はCSSで実装しました。
- さらに、リンク先を別タブで開くためにHTMLのtarget属性の値を「”_blank”」としました。
- リンクにカーソルをホバーさせた時に点滅させるためにCSSのanimationプロパティ（「-webkit-animation: flash 1.5s linear infinite;」と「@-webkit-keyframes flash{50%{opacity: 0;}}」）を使いました。
- ナビゲーションと自己紹介を中央揃えにするためにCSSのFlexboxでflexコンテナに「justify-content: center;」と指定しました。
- 「トップ」ページ上部の画像のスライドを実現するために、jQueryのプラグインであるslickを利用し、CDN（コンテンツ・デリバリー・ネットワーク）で必要なファイルを読み込みました。
- スライドには複数のブレイクポイントを設定し、それぞれで表示するスライドの数を変更しています。また、スライドを中央に配置するために子要素にCSSで「margin: auto;」を設定しました。
- 中央のスライド画像のみを少し拡大させるために前提として、slickのオプションで「centerMode: true,」（表示スライドの中央寄せ）を設定しました。
- slickで各スライド要素に対して与えられるclass属性（.slick-slide）にCSSで「transition: 1.5s ease-in-out;」と「transform: scale(.90);」を設定しました。
- 中央のスライド画像に対して与えられるclass属性（.slick-current）にCSSで「transform: scale(1.1);」を設定しました。
- 左右のスライド画像が見切れて表示されないようにするために、slickのオプションで「centerPadding: 0,」（センターモード時のスライドの左右paddingを指定）と設定しました。
- 「トップ」ページのWebページ作成上のポイントの所を2列にするために、CSSでflexboxの「flex-flow: row wrap;」と「justify-content: space-around;」を設定し、垂直方向に中央揃えするために「align-items: center;」を設定しました。
- 「トップ」ページのWebページ作成上のポイントの所を750px以下では1列にするために,CSSのメディアクエリ（「@media screen and (max-width:750px)」）で「flex-direction: column;」を設定しました。
- 「トップ」ページのWebページ作成上のポイントの所を行ごとに赤・青になるように、CSSの:nth-child疑似クラスの引数をそれぞれ「(4n+1)、(4n+2)、(4n+3)、(4n+4)」と指定しました。
- 「トップ」ページのWebページ作成上のポイントの所の右側をグラデーションにするために、CSSで「background: radial-gradient(ellipse farthest-side,色)」を設定しました。
- 350px以下ぐらいから謎の余白が右端に生じる様になったため、これを解消するために、body要素の中身を全てdiv要素で包み、そこにCSSで「overflow: hidden;」を指定しました。
- 「独学の記録１」ページでは、HTML5で廃止された要素（align 属性、border属性、font属性、bgcolor 属性、valign属性、cellpadding属性、cellspacing属性）を削除し、CSSでスタイルを指定しました。
- 全ページにトップへ戻るボタンをjQueryを使って追加しました。
- 花火の音を出すために、HTMLのaudioタグを使い、「autoplay controls loop」と設定しました。（Google Chromeでは、仕様上自動再生は出来ないようです。）
- 花火が打ちあがっている描画は、JavaScriptのライブラリであるp5.jsを使って作られていたものをWeb上で探し、コードを一部改変しました。
- 利用しているレンタルサーバーの仕様とp5.jsで作られるHTMLのCanvasタグの影響でページ下部に余白が発生してしまうため、ページ下部のJw-cad背景画像をコメントアウトしました。