【webデザイン】勉強録 模写コーディング編①
VSCord拡張機能の導入
VSCordの拡張機能、種類多過ぎて何入れたら良いか分からなかったけど
下記サイトの拡張機能入れたら
とても便利だった◎
模写コーディングサイト
模写コーディングの勉強にぴったりなサイト！
こんなに分かりやすく解説してくれるのに
無料でいいの！？ってくらい親切☺︎
私はまずは「Profile」というサイトを模写してみます。
フォルダ・ファイル作成
模写コーディングは初めてなので
初歩の初歩から記録しておきます。
フォルダの作成
デスクトップに「Profile」というフォルダを作成
VSCordでフォルダを開く
index.html / stylesheet.css 追加
imageフォルダ作成(画像保存用)
模写コーディング用のサイトで使用されている画像をimageフォルダに保存
サイト全体の画像を一括で保存する
Chromeの拡張機能を入手！！！
▶︎image downloader
もう拡張機能マニアになりそう(笑)
imageフォルダに画像を保存できたら
いよいよHTMLにコードを書く。
HTMLテンプレート作成
Emmetを使ってテンプレートを出力
ん？Emmetってなんだ？？
Emmetは、以前Zen-Codingと呼ばれていた、HTMLやCSSを省略記法で簡潔に記述するためのツールです。
実際にやってみよう！
! + Tabキー
⬇︎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
どん！
テンプレートが一瞬のうちに…✨
あとは変更と追記をして…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styleshert.css" />
<title>Document</title>
</head>
<body>
</body>
</html>
言語をJapaneseに変更
linkタグを追加してcssファイルを読み込む
早速Emmetを使って link + Tabキー で展開
下準備完了！
こんなの一文字一文字打ってられないよね！
助かる〜〜〜
Emmet使いこなしたらかっこいいわ
今からちょこちょこ使っていこう。
次回の予定
bodyタグ内にコードを記述する
cssコードを記述
おつかれさまでした〜🌝
この記事が気に入ったらサポートをしてみませんか？