name| Webデザイン演習
※学内ネットワークのみ閲覧可
HTML
- BASIC SAMPLE:html_sample01
- TAG P:html_sample02
- TAG H1 - H6:html_sample03
- TAG LIST:html_sample04
- TAG A:html_sample05
- TAG PRE:html_sample06
- TAG TABLE:html_sample07
- TAG IMG:html_sample08
- TAG AUDIO/VIDEO:html_sample09
- TAG IFRAME:html_sample10
- TAG FORM:html_sample11
CSS
- BASIC SAMPLE:CSS_sample_01
- 背景:CSS_sample_02
- テキスト・フォント:CSS_sample_03
- リスト:CSS_sample_04
- ボックス(margin/padding/border):CSS_sample_05
- 疑似クラス(:hover):CSS_sample_06
- トランジション:CSS_sample_07
- 疑似要素(::before/::after):CSS_sample_08
- CSS Layout 1:layout_sample_01
- CSS Layout 2:layout_sample_02
- CSS Layout 3:layout_sample_03
- CSS Layout 4:layout_sample_04
- Responsive Design 1:responsive_sample_01
- Responsive Design 2 (Mobile First):responsive_sample_02
- Responsive Design 3 (IMG):responsive_sample_03
- Responsive Design 4 (Menu1):responsive_sample_04
- Responsive Design 5 (Menu2):responsive_sample_05
- Responsive Design 6 (Menu3):responsive_sample_06
JavaScript
- BASIC SAMPLE:javascript_sample_01
- BASIC SAMPLE 2:javascript_sample_02
jQuery
- jQuery 1:jquery_sample_01
- jQuery 2:jquery_sample_02
- jQuery 3:jquery_sample_03
- jQuery 4:jquery_sample_04
- Slider:jquery_slider
- LightBox:jquery_lightbox
:
:
:
この事例ではリンクが無効ですが、受講生のページではリンクが有効になる前提です。
最終成果物
資料
公開リポジトリ
※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。
制作環境
- OS: macOS 12.4
- Editor:mi
- Browser:Safari