久々にウェブデザインをしました。
デザインというより、コーディングメインのLP制作ですね。
このブログもそうなんですが、ぼくは最近はWordPressでサイトを作ることが多いです。
コンテンツの入れ替えや追記などの作業がやりやすいですし、専門知識がなくても作業ができますからね。
ですが、今回は1枚のLPにフォームを付けるだけでしたのでコーディング作業でした。
VSCodeを使ってるんですが久々過ぎて色々と忘れてました。。。
ということで自分用のメモです。
サイト（LP）制作を1からやる流れ
ローカル開発の1からの流れを備忘でメモします。
基本的な流れとしては、
フォルダ作成 → VSCode起動 → html → CSS
でOK
1.VSCode起動まで
ドキュメント内にサイトフォルダを作成
→ VSCodeで開く
以上
2．html ＋ CSS
Emmet(エメット)を使うと素早く入力が可能
HTMLの場合は「！→Tab」で宣言文が書ける
宣言文はコレのこと↓↓
<!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">初期では言語が英語になってるので「ja」に変更する
CSSはフォルダを作る
その中にstyle.cssファイル作成
head内にこれを追記してCSSをリンクさせる
<link rel="stylesheet" href="css/style.css">3．書く
まずHTMLから書く
それぞれの塊は
header
main
article
nav
section
aside
footer
を使う。
header、main、footerは1回しか使えない
よく使うのはsection 迷ったらsection
プレビューは拡張機能のHTMLプレビューを使う。
ブラウザで見たいときには、ドラッグ＆ドロップでブラウザに持っていくと表示される。
CSSは苦戦する
CSSで表示を制御するのはなかなか思う通りにいきません。
ブラウザで表示して検証画面を見ながら修正していくしかありません。
ググったコードを見て、どこに効かせればいいかを考えるのみ
頑張りましょう。。
どんな知識も無駄ではない
久しぶりにHTMLとCSSのコードを触りましたが、ある程度は書けました。
1度学んだ知識は使えるので無駄ではないということですね。
ぼくは現在LINE公式アカウントの運用代行をしてますが、ウェブデザインの知識やスキルはかなり使えてます。
配信用の画像やリッチメニューの制作は、デザインの基礎知識とツールを使えるスキルがあるからできてます。
フォームの見栄えをカスタマイズするのもCSSなので、コードを書いてカスタムできます。
ウェブデザインはプログラミングのように高度に言語を操って何かを実行するということはほぼありません。
マークアップして表示を整えるだけです。
ですがどの言語も基礎知識があるだけで解読可能となります。
英語の文章ってなんとなく読めるけどロシア語ってわからないでしょ？
そんな感じです。
なのでウェブ系の言語だけでも知っていると、ウェブ系の仕事をする上では役に立ちます。
何事も無駄ではないので学びを止めないようがんばります。
日記みたいな記事になっちゃいましたね。。。
ぼくのLINE公式アカウントでは活用テクニックをご紹介しています。
登録して実際にLステップを体験してみてください！
LINEを活用できていないかもというあなた、ぜひご登録ください。
※登録者には活用法のチェックシートの特典がございます
↓ 今すぐ登録で特典をゲット ↓
Amazon Kindleにて電子書籍を出版いたしました。
これを読めばLINEの正しい作り方、正しい運用の仕方がわかりますよ(^^)
LINE公式アカウントの正しい運用【本質的ガイド】 です。
ぜひご覧くださいね(^^)
