▶ 実 行
▶ 実行
クリア
#新年の挨拶をする #DOM操作 #HTML設定 #DOMスタイル一括設定 #2021/01/01 /*設定:フォント・文章*/ DOM親要素に『 <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap" rel="stylesheet"> <div id="文章1">明けまして、<br>おめでとうございます。</div> <div id="文章2">令和三年元日 くれあ</div> <div id="絵文字1">🐮</div> 』をHTML設定します。 /*使う:視覚効果*/ 「#文章1」に{文字サイズ: 「40px」、余白:「10px」、「font-family」:「Noto Serif JP」、/*行間*/「line-height」:「40px」、}をDOMスタイル一括設定します。 「#文章2」に{文字サイズ: 「16px」、色:灰色、「font-family」:「Noto Serif JP」、/*字下げ*/「text-indent」:「18em」}をDOMスタイル一括設定します。 「#絵文字1」に{文字サイズ: 「120px」、余白:「60px」、/*字下げ*/「text-indent」:「0.5em」、/*行間*/「line-height」:「60px」、/*透明度*/「opacity」:0.8}をDOMスタイル一括設定します。 /*ノート ・Googleフォント https://fonts.google.com/ ・DOMを日本語で設定する「DOM和スタイル」 https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E5%92%8C%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB&show ・そもそもDOMとは? DOMとはDocument Object Modelの略称。直訳すると文書要素形式。 https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction DOMとは、HTML文書などの構成要素を参照や操作する決めごと(API)の一つ。 https://jsstudy.hatenablog.com/entry/dom-document_object_model ・色定数 https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E8%89%B2%E5%AE%9A%E6%95%B0&show ・描画領域にかく場合 「40px Noto Serif JP」に描画フォント設定。[0,50]へ「文章」を文字描画。 */