コーディング ２日目

ルールを決めて、コーディングを進めていく

JavaScript

HTMLのbody要素の中にJavaScriptを読み込む記述を追加する

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/googlefonts.js"></script>

外部サーバにあるファイル（「jquery」というライブラリ）の読み込み（CDN）
下二つは自分でjsファイルを作る

GoogleFontsを読み込む際・・・ちらつきをなくす

CSSに記述

/* Webフォントによるちらつきをなくす */
html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

全体（html）を「visibility: hidden;」で画面表示をなくして
Webフォントの置き換えが完了（html.wf-active）したら
画面に表示をする「visibility: visible;」

みたいな感じ

記事デザイン [tmp_format.html]

<div class="Box_body">
  <div class="Box_inner narrowArea">
    <div class="format">
   ・
   ・
   ・
    </div>

<div class=”format”>の中に記事コンテンツを記述する
記事内で使用するHTMLタグには極力class名を付与せず、運用更新時の手間を省く

「css/style.css」に<@import url(_format.css);>を追加

「css/_format.css」を作成して定義を記述していく

ボタン用デザイン

ボタン用HTMLを追加

<div class="btnBox -center">
  <a class="btn -type1" href="#">ボタンタイプ1</a>
  <a class="btn -type2" href="#">ボタンタイプ2</a>
  <a class="btn -type3" href="#">ボタンタイプ3</a>
</div>

ボタンデザインを定義

「css/style.css」に<@import url(_btn.css);>を追加

「css/_btn.css」を作成して定義を記述していく