杉野市之助/Webデザイン演習の履歴(No.5)

杉野市之助｜ Webデザイン演習

Webデザイン演習

HTML

HTMLの練習：html_sample_01 ※学内ネットワーク限定
HTMLの練習：html_sample_01 ※Github

<p>：html_sample_02

<h1>〜<h6>：html_sample_03

<ul><ol><dl>：html_sample_04

<a>：html_sample_05

<pre>：html_sample_06

<table>：html_sample_07

<img>：html_sample_08

<audio><video>：html_sample_09

<iframe>：html_sample_10

<form>：html_sample_11

CSS

CSSの練習：css_sample_01

背景：css_sample_02

テキスト：css_sample_03

リスト：css_sample_04

ボックス：css_sample_05>css_sample_05

疑似クラス：css_sample_06>css_sample_06

トランジション：css_sample_07>css_sample_07

疑似要素：css_sample_08

CSS Layout 1（flex）：layout_sample_01

CSS Layout 2（position）：layout_sample_02

CSS Layout 3（grid）：layout_sample_03

Responsive Design 1 (Mobile First)：responsive_sample_01

Responsive Design 2 (Menu)：responsive_sample_02

JavaScript

BASIC SAMPLE 1：javascript_sample_01
BASIC SAMPLE 2：javascript_sample_02
Swiper：[[javascript_swiper>]]

jQuery

Slider：[[jquery_slider>]]
LightBox：[[jquery_lightbox>]]

最終成果物

資料

サイトマップ（GoogleDriveにアップロードしてリンク）
ワイヤーフレーム（GoogleDriveにアップロードしてリンク）

公開リポジトリ

GitHub：https : // github.com/johnsmith
Portfolio：https : // johnsmith.github.io/portfolio/
※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。

制作環境

OS： macOS 14.4
Editor：Visual Studio Code
Browser：Chrome, Firefox, Safari