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

杉野市之助｜ 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_06>]]

トランジション：[[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