• 追加された行はこの色です。
• 削除された行はこの色です。
• 杉野市之助/Webデザイン演習 へ行く。

---

#author("2025-07-16T14:00:01+09:00","default:member","member")
*杉野市之助 ｜ &scale(70){Webデザイン演習};
[[Webデザイン演習]]
~


**HTML
-HTMLの練習：[[html_sample_01>https://www.kyusan-u.ac.jp/~k22as019/html_sample_01/index.html]] ※学内ネットワーク限定
-HTMLの練習：[[html_sample_01>https://giraffe529.github.io/html_sample__01/]] ※Github

-<p>：[[html_sample_02>https://giraffe529.github.io/html_sample_02/]]

-<h1>〜<h6>：[[html_sample_03>https://giraffe529.github.io/html_sample_032/]]

-<ul><ol><dl>：[[html_sample_04>https://giraffe529.github.io/html_sample___04/]]

-<a>：[[html_sample_05>https://giraffe529.github.io/html_sample_05/]]

-<pre>：[[html_sample_06>https://giraffe529.github.io/html_sample_06/]]

-<table>：[[html_sample_07>https://giraffe529.github.io/html_sample_07/]]

-<img>：[[html_sample_08>https://giraffe529.github.io/html_sample__08/]]

-<audio><video>：[[html_sample_09>https://giraffe529.github.io/html_sample__09/]]

-<iframe>：[[html_sample_10>https://giraffe529.github.io/html_sample_10-2/]]

-<form>：[[html_sample_11>https://giraffe529.github.io/html_sample_11-2/]]

//&small(この事例ではリンクが無効ですが、受講生のページではリンクが有効になる前提です。);
~
~
**CSS
-CSSの練習：[[css_sample_01>https://giraffe529.github.io/css_sample_01-2/]]

-背景：[[css_sample_02>https://giraffe529.github.io/css_sample_02/]]

-テキスト：[[css_sample_03>https://giraffe529.github.io/css_sample_03/]]

-リスト：[[css_sample_04>https://giraffe529.github.io/css_sample_04/]]

-ボックス：[[css_sample_05>css_sample_05>https://giraffe529.github.io/sample_05/]]

-疑似クラス：[[css_sample_06>css_sample_06>https://giraffe529.github.io/sample_06/]]

-トランジション：[[css_sample_07>css_sample_07>https://giraffe529.github.io/sample_07/]]

-疑似要素：[[css_sample_08>https://giraffe529.github.io/sample_08/]]

-CSS Layout 1（flex）：[[layout_sample_01>https://giraffe529.github.io/CSS-Layout-1/]]

-CSS Layout 2（position）：[[layout_sample_02>https://giraffe529.github.io/CSS-Layout-2/]]

-CSS Layout 3（grid）：[[layout_sample_03>https://giraffe529.github.io/CSS-Layout-3/]]

-Responsive Design 1 (Mobile First)：[[responsive_sample_01>https://giraffe529.github.io/Responsive-Design-1/]]

-Responsive Design 2 (Menu)：[[responsive_sample_02>https://giraffe529.github.io/responsive_sample_02b/]]

//&small(この事例ではリンクが無効ですが、受講生のページではリンクが有効になる前提です。);
~
~
**JavaScript
-BLANK FILE：[[javascript_blank>https://giraffe529.github.io/javascript_blank-/]]

-BASIC SAMPLE 1：[[javascript_sample_01>https://giraffe529.github.io/javascript_sample_01/]]

-BASIC SAMPLE 2：[[javascript_sample_02>https://giraffe529.github.io/javascript_sample_02/]]

-Swiper：[[javascript_swiper>https://giraffe529.github.io/javascript_swiper/]]
~
~
**jQuery
-Slider：[[jquery_slider>https://giraffe529.github.io/jquery_slider-a/]]

-LightBox：[[jquery_lightbox>https://giraffe529.github.io/jquery_lightbox-/]]
~
~
**最終成果物
-GitHub：https://github.com/giraffe529?tab=repositories
-Portfolio：https://giraffe529.github.io/portfolio-main/
&small(※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。);

-サイトマップ
#image(site map.png)
-ワイヤーフレーム
|#image(07101.jpg)|#image(07102.jpg)|
#image(07103.jpg,center,45%) 
//~
//***公開リポジトリ
//-GitHub：https : // github.com/johnsmith
//-Portfolio：https : // johnsmith.github.io/portfolio/

~
***制作環境
-OS： macOS  15.5
-Editor：Visual Studio Code
-Browser：Chrome, Firefox, Safari