目次
- 0.0.1. Flexbox 子要素が縮む、スクロールが効かないを解決！
- 0.0.2. CSSアニメーション：くるっとひっくり返るカード
- 0.0.3. CSSを使ってデザインをキレイに見せる。-part1-
- 0.0.4. webデザイナーによるhtml学び直し
- 0.0.5. 画像を和色のみの構成に変換する html を公開してみる
- 0.0.6. 【いらすとや図解】はじめてのレンダリング
- 0.0.7. 要素を画面の真ん中に配置
- 0.0.8. loading属性を使って画像の遅延読み込みを実装してみる
- 0.0.9. HTMLでリストを作成する
- 0.0.10. HTMLとCSSを使ってシャインエフェクトを作成する方法
- 0.0.11. ろうとるがPythonを扱う、、（その25：tkinterでいろいろ）
- 0.0.12. HTML, Bootstrapを使ったタブの切り替え機能の実装
- 0.0.13. 【(JavaScript)】DOMについて
- 0.0.14. 複数htmlファイルを対象に閉じタグミスを検出する方法
- 0.0.15. 【超初心者向け】HTMLの基本的なタグ名の元となる英単語のまとめ
- 0.0.16. 【Javascript】ProgressBar が動かない(一連の処理が終わってから初めて動く)現象を回避したい
- 0.0.17. display: flex;による基本的な機能
- 0.0.18. JavascriptをHTMLで使う
- 1. 文書の主見出し
Flexbox 子要素が縮む、スクロールが効かないを解決！
親要素に`display: flex;`を指定してはみ出し部分をスクロールさせたいのに`overflow: scroll;`が効かない時や、子要素が縮んでしまった時の解決方法です。
### 解決方法
縮んでほしくない要素に`flex-shrink: 0;`を指定する# 解説
`display: flex;`は要素を横並びにしたい時にとても便利なプロパティです
親要素にこのプロパティを指定すると、子要素が横並びになりますflexboxを使うと、親要素のサイズに対して子要素のサイズが大きくて入りきらない時に、子要素が縮んでしまうことがあります
### 例
– はみ出した部分がスクロールするようにoverflow-
CSSアニメーション：くるっとひっくり返るカード
クリックで回転させるカード作った、メモ✍
—————————————
CSSを使ってWebページをキレイに見せる方法について調べてみた。
## 目標
名前、メールアドレスを登録するための仕組みを作りたいので、テキストボックスに入力し、ボタンでDB登録できるようなページを作りたい。## 出来上がった画面
※まだまだ改善の余地があり## コード
実装
“`html
HTML</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/H_T_6221/items/3df43594a5fcc87551e4'>元記事を表示</a></div> <h3 id="outline__0_0_4"><a href='https://qiita.com/marietti/items/0770eff500422b286326'>webデザイナーによるhtml学び直し</a></h3> <blockquote><p>紙ものデザイナー → 独学 →webデザイナーになったmariettiです。<br /> 社内勉強会でhtmlの学び直しをしたので気になった部分や気になった書こうと思います！<br /> 主にタグがどのようなものかという部分にフィーチャーした概要説明となります。</p> <p>## 前提：最新のhtmlは…<br /> 最新のhtmlはhtml5だと思っていたのですが、もうその前提から違いました。<br /> 2021年1月28日には廃止となっており、<br /> **HTML Living Standard**が最新となっております。<br /> 自分が学んだ時にはすでにLivingStandardだったのか。。<br /> ここからは、項目ごとの紹介していきます！</p> <p>## セクショニングコンテンツ<br /> セクション、とは区切りを意味します。<br /> また、セクショニングコンテンツの要素内には**見出し**が必要です。<br /> セクショニングコンテンツには主に**article**、**aside**、**nav**、**section**が挙げられます。</p> <p>sectionやnavはよく使いますが、**見出しを置くことが推奨**されている点については把握しきれていなかったので、注意したいですね🤔</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Emmet</div> <div class='tag-cloud-link'>初心者向け</div> <div class='tag-cloud-link'>VSCode</div> <div class='tag-cloud-link'>HTMLLivingStandard</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/marietti/items/0770eff500422b286326'>元記事を表示</a></div> <h3 id="outline__0_0_5"><a href='https://qiita.com/uni928/items/55639587a2a963aee26e'>画像を和色のみの構成に変換する html を公開してみる</a></h3> <blockquote><p>画像を和色のみにした場合に<br /> どんな見た目になるかどうかを<br /> 軽くチェックするための html を<br /> 作成しましたので<br /> 皆さんの役に立てばと思い<br /> 公開してみようと思います。</p> <p>[本体はこちら(BOOTH)](https://giftedstyle.booth.pm/items/6002643)<br /> [本体はこちら(Google Drive)](https://drive.google.com/file/d/1MReoq0hTMXFdpS28ha2z-vklwN1-l_3w/view?usp=sharing)</p> <p>[洋色バージョンはこちら](https://drive.google.com/file/d/1j606X7SGYo3SqLfla0iqvL1NouyvDL4Y/view?usp=sharing)<br /> [セーフカラーバージョンはこちら](https://drive.google.com/file/d/1B9ov__zccNbMertMr1yUYAQPh_fOheto/view?usp=sharing)</p> <p>***</p> <p>このアプリケーションの見た目<br /> ![image2.png](https://qiit</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uni928/items/55639587a2a963aee26e'>元記事を表示</a></div> <h3 id="outline__0_0_6"><a href='https://qiita.com/miumi/items/3f612f00b370e40dcbc4'>【いらすとや図解】はじめてのレンダリング</a></h3> <blockquote><p># この記事に関して<br /> ブラウザのレンダリングについて書いていきます。<br /> 細かい仕様とかは抜きにしてざっくり概要を書いていきますのでわかりやすくなっているかなと思います。<br /> ブラウザのレンダリングから、具体的な問題への対処法、将来を見越した設計の基本などを今後書いていく予定です。<br /> この記事は下記の本をベースとして書いています</p> <p>https://gihyo.jp/book/2017/978-4-7741-8967-3</p> <p># この記事の対象者<br /> – レンダリングってなんですか？という方<br /> – フロントエンドのパフォーマンスになんとなく意識(興味)を持った方</p> <p># この記事で取り扱わないこと<br /> – React.jsやVue.jsといったフレームワーク特有のレンダリング<br /> – 細かい仕様等に関して(わかりやすさを重視しているため)</p> <p># 関連記事<br /> (準備中)</p> <p># レンダリングの流れに関して<br /> ブラウザにURLを打ち込んでから、ウェブページが表示されるまでにどういった超ざっくり説明すると以下の4つの工程になります。これがレンダリングと呼ばれるものです</p> <p>– Loading(リソースの読み込み)<br /> – Scrip</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>パフォーマンス</div> <div class='tag-cloud-link'>レンダリング</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/miumi/items/3f612f00b370e40dcbc4'>元記事を表示</a></div> <h3 id="outline__0_0_7"><a href='https://qiita.com/jane_marple/items/bb26cc0d7cd67e54f720'>要素を画面の真ん中に配置</a></h3> <blockquote><p>“`<br /> .container {<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> “` </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/jane_marple/items/bb26cc0d7cd67e54f720'>元記事を表示</a></div> <h3 id="outline__0_0_8"><a href='https://qiita.com/enumura1/items/b5ab3820787e21c53b21'>loading属性を使って画像の遅延読み込みを実装してみる</a></h3> <blockquote><p># はじめに<br /> loading属性を使用する事で画像やiframe要素を遅延読み込みする事ができます。<br /> 初回の読み込み時に必要のないものは遅延読み込みにすることにより、初回のページ読み込みのパフォーマンスを向上する事ができます。</p> <p># loading属性とは？<br /> loading属性で指定できる値としては、`eager`と`lazy`の2つがあります。<br /> – loading=”eager”： 初回の読み込み時に対象のリソースを読み込まれます。<br /> – loading=”lazy”：画像やiframe要素などユーザのスクロールが対象の要素に近づいたらリソースが読み込まれます。</p> <p>https://developer.mozilla.org/ja/docs/Web/Performance/Lazy_loading</p> <p># eagerとlazyを指定した要素を作ってみる</p> <p>下記のようにサンプルページを作ってみます。<br /> ページ上部から`eager`を指定した要素を1つと、`lazy`で指定した要素が2つ作成しています。<br /> 初回ロードでは`eager`を指定した「Eager サンプル」要素が読み込まれ、<br /> スクロ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>フロントエンド</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/enumura1/items/b5ab3820787e21c53b21'>元記事を表示</a></div> <h3 id="outline__0_0_9"><a href='https://qiita.com/chiikawasaki/items/3e198c2d52f19588554f'>HTMLでリストを作成する</a></h3> <blockquote><p>## HTMLでリストを作成<br /> めちゃめちゃ基本的ですがHTMLでリスト表記を学んだのでメモ</p> <p>基本的にliタグでリストの要素を囲み、それをさらにulタグで囲むと作成できる</p> <details open> <summary>サンプルコード</summary> <p>“`html:index.html<br /> <body></p> <ul> <li>りんご</li> <li>ばなな</li> <li>ぶどう</li> </ul> <p> </body></p> <p>“`<br /> </details> <p>結果<br /> </p> <p>その他にもulタグの代わりにolタグを使うと番号付きリストが作成可能らしいです</p> <p>参考にしたサイト</p> <blockquote class="wp-embedded-content" data-secret="q2UVYcuwfQ"><p><a href="https://magazine.techacademy.jp/magazine/5712">HTMLでリストを使う方法【初心者向け】</a></p></blockquote> <p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“HTMLでリストを使う方法【初心者向け】” — TechAcademyマガジン" src="https://magazine.techacademy.jp/magazine/5712/embed#?secret=q2UVYcuwfQ" data-secret="q2UVYcuwfQ" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>HTML5</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/chiikawasaki/items/3e198c2d52f19588554f'>元記事を表示</a></div> <h3 id="outline__0_0_10"><a href='https://qiita.com/waqasamin608/items/88c0ff1b07fa45a70580'>HTMLとCSSを使ってシャインエフェクトを作成する方法</a></h3> <blockquote><p>ウェブサイトにビジュアルエフェクトを追加すると、訪問者にとってより魅力的で興味を引くものになります。ボタンやテキストに追加できるクールなエフェクトの1つに「シャイン」エフェクトがあります。これは、テキスト上をライトが走るようなイリュージョンを与えます。このチュートリアルでは、HTMLとCSSを使ってこのエフェクトを実現する方法を説明します。</p> <p>ステップバイステップガイド<br /> ————-</p> <p>まず、ボタンのベーシックなHTMLストラクチャーを見てみましょう。</p> <p> “`<br /> <a href="https://forfrontend.com" class="btn-shine" target="_blank" rel="noopener">Get early access</a><br /> “`</p> <p>このHTMLコードは、`btn-shine` </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>#cssshineeffect</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/waqasamin608/items/88c0ff1b07fa45a70580'>元記事を表示</a></div> <h3 id="outline__0_0_11"><a href='https://qiita.com/infinite1oop/items/55535677efb557c1e1c9'>ろうとるがPythonを扱う、、（その25：tkinterでいろいろ）</a></h3> <blockquote><p># まとめてトライ<br /> tkinter上で、下記事項をまとめて実施した記録。<br /> – ドラッグ＆ドロップ<br /> – ２つのファイルDiff（差分）<br /> – HTML表示 </p> <p>任意のファイル２つをtkinterで作成されたWindowにドラッグ＆ドロップし、その差分（HTML with CSS）をWindowに表示するものである。</p> <p>## 最初に結果<br /> サンプル１。<br /> </p> <p>サンプル２。<br /> </p> <p>difflibで出力されるHTML(with CSS)形式を、tkinterwebを使って表示する。</p> <p>## ソースコード＋解説<br /> “`pytho</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Python</div> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>diff</div> <div class='tag-cloud-link'>drag&drop</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/infinite1oop/items/55535677efb557c1e1c9'>元記事を表示</a></div> <h3 id="outline__0_0_12"><a href='https://qiita.com/Tohru-f/items/e5f804b85b6266bcaa99'>HTML, Bootstrapを使ったタブの切り替え機能の実装</a></h3> <blockquote><p>この記事はHTMLとBootstrapを使ってタブの切り替え機能を実装したので、実装方法を共有したいと思います。プログラミング学習者の実装なので、間違いなどありましたら教えて頂けると嬉しいです。</p> <p>コードの全体像<br /> おすすめとフォロー中の２つのタブを用意して、それぞれのタブを押した時にタブ以下の内容表示を切り替えるという機能です。<br /> “`ruby:index.html.slim<br /> .tabs<br /> ul.nav.nav-tabs.nav-fill.sticky-top.blur-bg<br /> li.nav-item<br /> div class=”#{‘active’ if params[:tab] == ‘recommend’} text-center hover-bg py-3 px-2″ type=”button” data-bs-toggle=”tab” data-bs-target=”#for-you”<br /> = link_to ‘おすすめ’, home_index_path(tab: ‘recommend’), class: ‘link’<br /> li.nav-ite</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Rails</div> <div class='tag-cloud-link'>Bootstrap</div> <div class='tag-cloud-link'>slim</div> <div class='tag-cloud-link'>kaminari</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Tohru-f/items/e5f804b85b6266bcaa99'>元記事を表示</a></div> <h3 id="outline__0_0_13"><a href='https://qiita.com/ramgap/items/efe77ec71fdd52d0063d'>【(JavaScript)】DOMについて</a></h3> <blockquote><p># はじめに<br /> DOM及びその操作の概要をまとめました。<br /> JavaScriptの一部ではなかったことを学びました。<br /> 「ノード」や「要素」といった言葉の違いについても新しい発見がありました。</p> <p># DOM(ドキュメントオブジェクトモデル)<br /> – DOMは、文書をオブジェクト指向で表現したものであり、その構造はツリーである。この構造の各構成要素を**ノード**と呼ぶ<br /> – DOMのコア部分は、文書をオブジェクトで記述する機能の基礎的なものを提供する。Web APIにもあり、HTMLに向けた拡張がHTML DOM APIである<br /> – DOMで文書を表現することで、その構成要素をプログラミング言語で操作することができる<br /> – 多くはJavaScriptで行われるが、特定のプログラミング言語からは独立している。例えば、Pythonで操作することもできる<br /> – データ型<br /> – Node<br /> – 文書内のすべての構成要素は、何らかの種類のノードである<br /> – HTMLでは、エレメントノード、テキストノード、属性ノード等がある<br /> – 他のDOM APIオブジェクトのベー</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>HTML5</div> <div class='tag-cloud-link'>dom</div> <div class='tag-cloud-link'>初心者</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ramgap/items/efe77ec71fdd52d0063d'>元記事を表示</a></div> <h3 id="outline__0_0_14"><a href='https://qiita.com/toromonja/items/83835f00369fb9858e0a'>複数htmlファイルを対象に閉じタグミスを検出する方法</a></h3> <blockquote><p>複数htmlファイルを対象に、HTMLHintを使用して閉じタグミス（「Tag must be paired」エラー）が発生しているファイル名を抽出する方法を説明します。この手法は、他のVSCodeのエラーメッセージにも汎用的に使用することができます。<br /> ## 手順<br /> ### 1. HTMLHintのインストール</p> <p>まず、確認したいファイル群を含んだプロジェクトディレクトリにHTMLHintをインストールします。</p> <p>“`sh<br /> npm install htmlhint –save-dev<br /> “`</p> <p>### 2. HTMLHintの設定ファイルを作成</p> <p>プロジェクトのルートディレクトリに .htmlhintrc ファイルを作成し、以下のように設定を記述します。</p> <p>“`sh<br /> {<br /> “tagname-lowercase”: true,<br /> “attr-lowercase”: true,<br /> “attr-value-double-quotes”: true,<br /> “doctype-first”: true,<br /> “tag-pair”: true,<br /> “spec-char-escape”: </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>VSCode</div> <div class='tag-cloud-link'>HTMLHint</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/toromonja/items/83835f00369fb9858e0a'>元記事を表示</a></div> <h3 id="outline__0_0_15"><a href='https://qiita.com/MetroOsamu/items/f7299484e9ba0821e0f6'>【超初心者向け】HTMLの基本的なタグ名の元となる英単語のまとめ</a></h3> <blockquote><p># 概要<br /> HTMLの基本的なタグ名がどういった英単語の意味なのかをまとめました。<br /> 使用方法についてはいろいろなサイトに既に記載があるので、割愛しています。</p> <p># 目次<br /> アルファベット順に並べています。<br /> – [\<a>](#a)<br /> – [herf](#herf)<br /> – [\<b>](#b)<br /> – [\</p> <div>](#div)<br /> – [\<em>](#em)<br /> – [\<h>](#h)<br /> – [\</p> <hr> <p>](#hr)<br /> – [\<html>](#html)<br /> – [\<i>](#i)<br /> – [\</p> <li>](#li)<br /> – [\</p> <ol>](#ol)<br /> – [\</p> <p>](#p)<br /> – [\</p> <tr>](#tr)<br /> – [\</p> <ul>](#ul)</p> <p>## a<br /> ### 元となる英単語<br /> anchor<br /> #### 意味<br /> イカリを下す、固定する</p> <p>### 属性<br /> #### herf<br /> Hypertext Referenceの略。<br /> セットの「a href」で、「アンカーエイチレフ」と読む。</p> <p>## \<b><br /> ### 元となる英単語<br /> bold<br /> #### 意味<br /> 太字</p> <p>## \</p> <div> ### 元となる英単語<br /> division<br /> #### </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>タグ</div> <div class='tag-cloud-link'>要素</div> <div class='tag-cloud-link'>超初心者</div> <div class='tag-cloud-link'>略称</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/MetroOsamu/items/f7299484e9ba0821e0f6'>元記事を表示</a></div> <h3 id="outline__0_0_16"><a href='https://qiita.com/uni928/items/41ba3909cf4b82fefb2c'>【Javascript】ProgressBar が動かない(一連の処理が終わってから初めて動く)現象を回避したい</a></h3> <blockquote><p>html で 処理に時間がかかる javascript を組んだ時に<br /> ProgressBar を実装して<br /> 一連の処理が全て終了してから<br /> 初めて ProgressBar が動いて困った人はいますか？</p> <p>この記事ではその場合の<br /> 応急処置の 1 例を紹介したいと思います。</p> <p>この工程を踏めば<br /> ProgressBar が処理中に動作してくれます。</p> <p>***</p> <p>手順1 重い処理全体を async なメソッドに配置する</p> <p>まずは重い処理全体を<br /> async なメソッドに配置して<br /> 実行して下さい。</p> <p>“`javascript:async なメソッドの例<br /> async function MyFunction(ctx, canvas) {</p> <p>}</p> <p>MyFunction(ctx, canvas); // 必ず元の場所で実行して下さい。<br /> “`</p> <p>***</p> <p>手順2 ProgressBar の Value を変えた後に sleep 処理を書く</p> <p>次に ProgressBar の Value を変えた後に<br /> 次の処理を記述します。</p> <p>“`javascript:記述する処理<br /> const sleep = ms => </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>ProgressBar</div> <div class='tag-cloud-link'>動かない</div> <div class='tag-cloud-link'>応急処置</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/uni928/items/41ba3909cf4b82fefb2c'>元記事を表示</a></div> <h3 id="outline__0_0_17"><a href='https://qiita.com/kimascript/items/a6c2e2e50d61b69a034f'>display: flex;による基本的な機能</a></h3> <blockquote><p>## アジェンダ<br /> 基本的なdisplay: flex;でコンテンツにどのような変化をもたらすのかについてまとめます。</p> <p>## `display: flex;`によって起こる変化<br /> `display: flex;` を設定すると、そのコンテナ内の子要素は`フレックスアイテム（flex items）`となります。<br /> ※これだけ!!</p> <p>## 追加プロパティでフレックスアイテムを操作する<br /> 1. **フレックスアイテムの方向指定**:<br /> `flex-direction` プロパティを使用して、フレックスアイテムの配置方向を指定します。行方向（横並び）や列方向（縦並び）を設定できます。</p> <p>2. **フレックスアイテムの配置**:<br /> `justify-content` プロパティを使用して、フレックスアイテムをコンテナ内でどのように配置するかを指定します。中央寄せ、左右寄せ、スペースの均等分配などの配置方法があります。</p> <p>3. **フレックスアイテムの垂直方向の配置**:<br /> `align-items` プロパティを使用して、フレックスアイテムを垂直方向にどのように配置するかを指定します。中央</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>HTML</div> <div class='tag-cloud-link'>CSS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kimascript/items/a6c2e2e50d61b69a034f'>元記事を表示</a></div> <h3 id="outline__0_0_18"><a href='https://qiita.com/H_T_6221/items/2f5a079ff59d63735080'>JavascriptをHTMLで使う</a></h3> <blockquote><p>## JavascriptをHTMLで使う方法<br /> 外部のJavascriptファイルをindex.htmlで読み込み動作させる。<br /> * フォルダ構成<br /> “`<br /> .<br /> ├─js<br /> | └─sample.js<br /> └─index.html<br /> “`</p> <p>* 実装<br /> “`index.html<br /> <!DOCTYPE html><br /> <html lang="ja"><br /> <head><br /> <meta charset="uft-8"><br /> <script src="js/sample.js" async></script><br /> <title>HTML入門-JavaScriptの基本
文書の主見出し
“`“`sample.js
function ShowAlert() {
alert(“Hello world!!”);
}
“`* 結果
見やすいページを作るという目標においては及第点なのではないかと思います。
Web上のボタンを押すと指定範囲を印刷自動化
# 展示会での物理的な思い出
パラメータいじるだけでグラフィックを作成できる展示に物理的な思い出を持たせたい！！！！
クリエイティブコーディングやWeb上で作成したグラフィック、
それをポストカードやステッカーなどで持ち帰る体験を作りたいなと思いボタンを押しただけで自動で印刷まで出来上がる仕組みを構築しました
以下はその簡易実装例です## 概要
本記事では、Webページ上のボタンをクリックすることで指定範囲をキャプチャし、その画像をサーバーに送信して自動で印刷する仕組みを実装する手順を紹介します。使用技術や環境構築、各コード例を含めて解説します。
### 使用技術
– HTML2Canvas
– Node.js v18.17.0 （Express, Multer）
– ShellScript### 簡単な流れ
1. HTML2Canvasで指定範囲を保存
2. 画像データをサーバに送る
3. クライアントから送信されたデータを受け取る
5. シェルスクリプトをリクエスト
5. 印刷を実行## 実装
### 環境構築`Node.js` が入ってない方はこち
