新年の挨拶をする #DOM操作 #HTML設定 #DOMスタイル一括設定

CSSの設定やGoogle フォントにより新年の挨拶を表現しました。

エディタ

プログラム

#新年の挨拶をする #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]へ「文章」を文字描画。
*/

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ