【レイアウト構成】番外編:プラグイン「slick」/カルーセルスライダー

このまま学習を続けて、本当に実務で通用するのか不安な方へ。

そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

全体をdivタグで囲みます。

スライダー画像
スライダー用の全ての画像をul、liタグで記述します。
jQueryでスライダーの読み込みを行うために、ulタグにid名を指定しておきます。
プラグイン「slick」の実行
jsファイル内で、スライダー画像用のulタグに対してslick()関数を使用して実行します。ulタグにsliderというid名を使用した場合、「$(‘#slider’).slick();」となります。

あなたのコーディング力、実務で通用しますか?

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

  • 模写はできるようになってきたけど、実務に通用するか不安
  • ポートフォリオに悩んでいる・載せる実績がない
  • 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

コーディングを仕事にしていきたい方へ

Codejump Pro

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

  • ポートフォリオに載せる実績がない・・・
  • 実務経験がゼロ・・・
  • 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』(出版社:技術評論社)がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

  • 第1章【入門編】プロフィールサイト〜フレックスボックス
  • 第2章【初級編】ブランドサイト〜ポジション
  • 第3章【中級編】サービスサイト〜複数ページ
  • 第4章【上級編】カフェサイト〜複数レイアウト
  • 第5章【応用編】ランディングページ〜動きのあるWebサイト
  • 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。

コーディング練習メニューに戻る

Codejump

著者:Codejump運営者

X
将来Web業界での活躍を目指す人のために、お役立ち情報や学習コンテンツを発信していきます。
運営者情報

おすすめの記事

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】かんたんなHTML、CSSでできるシンプルな練習サイト

【中級編】かんたんなHTML、CSS、JavaScript(jQuery)を使用した複数ページの練習サイト

【上級編】少し複雑な HTML&CSS&JavaScript(jQuery)を使用した様々なレイアウトの練習サイト

【応用編】複雑なHTML&CSS&JavaScript(jQuery)を使用した動きのある練習サイト

【番外編】Webサイト制作でよく使うHTML、CSS、JavaScript(jQuery)を練習