• HTML/CSS
  • 初心者
  • 教材
  • 無料

【無料】実務のスキルが身に付くコーディング練習用教材(初心者編)

【無料】実務のスキルが身に付くコーディング練習用教材(初心者編)
現在のページ: 1 2 3 4

「HTML/CSSの勉強を始めたけど、アウトプットをどうやって行なっていけばいいんだろう?」、「jQueryの使い方がよくわからない!」など、Web制作の勉強を始めたての時はどうすれば良いのかわからないことが多いと思います。

この記事では、そのような方に向けてHTML/CSS、jQueryを解説しながらデモサイトを作り上げていきます。

「基礎しか勉強してないから1ページ作り切れるかどうか心配…」な方も安心してください。1つずつ解説しているので、学びながら作成することができます。

まずは、完成させることを目標にチャレンジしてみて下さい!

今回の初級編でコーディングしていただくのは下記です。LP(ランディングページ)と呼ばれる1ページのサイトです。

XDのカンプ画像(PC)
XDのカンプ画像(SP)

デモサイトはこちら

学べる内容

この教材は、

  • コーダー、フロントエンドを目指している
  • 実務に近いコーディングを学びたい
  • コーディングもできるWebデザイナーを目指したい

と思っている方々におすすめです。

今回は簡単な構成のLPですが、横並びのflex・レスポンシブで必要なメディアクエリなど、実務で使用するコードも多く盛り込まれています。

この教材をコーディングすることで得られるメリット

この教材はシンプルなデザイン・レイアウトなので、コーディングしやすいサイトです。シンプルなデザインではありますが、実践に役立つ基礎が詰め込まれています。

このコーディング練習教材をやり切ることで、実務で通用する技術を身につけることができます。

  • XDデザインデータからコーディングできる
  • 実務に近いコーディングを学べる
  • ポートフォリオとして掲載可能
  • jQueryの導入方法・使い方が学べる

開発環境

この記事では下記の環境でコーディングを行っているため、一部説明とは違う部分も出てくると思いますが、ご了承ください。

  • mac OS
  • VSCode(テキストエディタ)

テキストエディタをお持ちでない方は「VSCode」や「Atom」などのテキストエディタをダウンロードするところから始めてください。

この記事では「VSCode」を使用しています。人気なテキストエディタで、実務での利用者も多いです。ダウンロードや設定などは下記の記事を参考にしてください。

データ(zipファイル)

データは下記からダウンロードしてください。

完成ver

コーディング用ver

自分で1からコーディングを始めたい方はこちらのファイルをダウンロードしてください。フォルダにはreset.cssと画像が入っています。

デザインデータ(XD)

コーディング前の準備

コーディングの時に使用するフォルダやファイルの用意を行います。

フォルダの準備

フォルダを作成します。今回は「yoshi-logbook_lp」と命名しています。

フォルダを作成したらその中にcss、js、imagesフォルダを作成します。

  • css → 拡張子がcssのファイルを格納(style.css、ress.css)
  • js → 拡張子がjsのファイルを格納 (main.js)
  • images → 画像を格納 (png、jpeg、svgなど)

使用するファイルの準備

コーディングに必要なファイルを作成します。作成するファイルはHTMLファイル1つ、CSS ファイル1つ、jsファイル1つです。

HTMLファイル

  • index.html

HTMLは全て「index.html」記述します。

CSSファイル

  • reset.css
  • style.css

「reset.css」はデフォルトのCSSを打ち消すCSSです。コーディングをする上で重要なものです。CSS解説の回で、「reset.css」について詳しく解説します。CSSの記述は全て「style.css」へ行います。

「reset.css」はこの記事でダウンロードしたものを使用してください。

jQueryのファイル

  • main.js

この教材では「フェードイン」、「スムーススクロール」という動きを加えます。サイトの動きを出すときは、jQueryと呼ばれるJavaScriptのフレームワークを使用します。そのため、ファイルの拡張子はjsになっています。

VSCodeでファイルを作成

VSCodeで先ほど作成したフォルダ(yoshi-logbook_lp)を開き、ファイルを作成していきます。

VSCodeを起動し、「フォルダを開く」→「yoshi-logbook_lp」を選択。

VSCodeの「新規ファイル作成アイコン」をクリックし、必要なファイルを全て作成します。

作成するファイルは

  • index.html
  • style.css
  • main.js

全部追加すると下記のようになります。cssフォルダにはcssファイル、jsファイルにはjQueryが入っているか確認してください。

画像データはimagesフォルダへ追加

画像はこの記事でダウンロードしたものをimageフォルダへ格納して下さい。これでファイルの準備は完了です。

HTML構造を考える

コーディングを始める前にHTML構造について考えます。SEOやコーディングスピードに関わってくる部分なので、HTML構造を考えることは重要です。

今回は画像のようにHTML構造を考えてみました。各ブロックを何で囲うのかを表しています。

Yoshi-logbook LPのHTML構造参考

HTML構造を考えるときは下記についても考えます。

  • クラス名を付けるときのルール
  • 各コンテンツはどんなタグで囲うのか(section?、article?、div?)

自分なりにルールを明確にすることでコーディングがやりやすくなります。

現在のページ: 1 2 3 4