今さら聞けないHTML　

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter4」＞「02 Webページで使用される画像形式」

目的：「[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://amzn.asia/d/gXoQkWz)」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。

|注意点|
|:—|
|🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。|
|例）🤔<(感想、考察、疑問点など)| ___ （参考書籍） 1. [イラスト図解式 この一冊で全部わかるWeb技術の基本](https://amzn.asia/d/gXoQkWz) 1. [HTML5 & CSS3 デザインレシピ集](https://gihyo.jp/book/2017/978-4-7741-8780-8) （参考サイト） 1. [ラクスエンジニアブログ](https://tech-blog.rakus.co.jp/entry/20201112/svg#SVG%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E6%99%AE%E5%8F%8A%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B

HTMLにProcessingで作ったものを見る方法

# はじめに
みなさん！！Proccesingという言語は知っていますでしょうか？Proccesigとは，アートやデザイン，グラフィックスやアニメーションに使われるJavaベースの言語です．私の大学では，プログラミングに慣れ親しむために，登竜門としてProcessingを学びます．そして，私はその時にかなりの力作ゲームを作成したので，せっかくならポートフォリオで遊べる状態のものを載せたいと思い．webでProcessingを見られるようにしてみました．

# 手順
２種類あります．やり方としてはJavaScriptと似ています．
そのまま同じファイルに書き出すのと，別ファイルで作って呼び出すという２種類です．
短いコードは同じファイルに，長いコードは別ファイルを作ることをおすすめします．
では，，，
### HTMLファイルに直接書く方法
以下のコードのように``で囲んで，直接書き込みます．
実際にコピペしてみてください．円がカーソルをついてくるようなものが出てくると思います．
コードを変えて色々遊んでみてください．
“` index.html

親子関係を押さえよう！display: flex;でレイアウトを管理する方法

# はじめに
横並びに表示するCSSは主に`flex`と`float`の2種類あることを学びました。
使い勝手がいいのは`flex`だと思うのですが、深掘りすると親子関係が重要なのだとわかったので、それをまとめたいと思います。

# ? `display: flex;`とは
レイアウトを簡単に管理するためにCSSで使うもの。

# 結論
複雑なレイアウトを簡単に作成でき、レスポンシブデザインにも対応しやすくなる。
最初のスタイルは**親要素**から書き始める！

# 設定方法
【見た目】

このように横並びで表示させたい時にまずHTMLから、

“`html:index.html

アイテム1

htmlでパズルゲーム作成

スライディングパズル（15パズル）を作成します。以下は、基本的なHTML、CSS、およびJavaScriptのコード例です。
“`index.html

シャッフル



“`
“`Style.css
body {
display: flex;
flex-

htmlで表の上を固定

HTMLとCSSを使用して、表の上2行だけを固定し、残りの行を上下にスクロールできるようにする方法を以下に示します。

“`html