【副業スキル探し】WHAT IS WEBサイトの裏側　#1

2023年2月9日 17:00

おはこんばんは。
２０２３年になって１か月がたちました。
今年は副業のスキルを探すために、今月は全力で様々なスキルアップセミナーに参加してきました。

副業スキル探し

まず、初回なので「副業スキル」について独自の見解を・・・。
副業として今年は収入の20％を副業収入にできればと思っています。
そのために私は何をやるべきか、ということで自分の強みだったり弱みを知りつつも、どこに時間とお金を割くメリットがあるのかについて比較検討していこうと思います。
副業に求めるもの
①利益率
②TIME IS MONEY（いかに時間を割かずに利益をうむか）
③独自性（営業がらくちん）
④どこでもできる（趣味は旅行）
⑤頭よくなれるか
⑥年齢を問わないか
⑦飽きないか

上記７点を念頭に置き、スキルとしてどのようなものを得ていくべきかを検討してみました。
WEBサイト制作/ヨガ/ピラティス/栄養士/コスメコンシェルジュ/WSET/ワインソムリエ/SAKEエキスパート/Microsoft認定試験、、このようなスキルアップの資格取得に向けたセミナーに参加していくうえで少しでも学んだことがあるので、連載のようなメモ書きのような私にとっての「アウトプット」、誰かのための「インプット」になればと思います。

WEBサイト制作の裏側

プログラミングとは？

最近、小学校でも授業が開始されたとかで有名なプログラミング、だけど私（アラサーOL）の小学校時代（15年前）では、携帯もまだ持っていなかったし、プログラミングとは？という世界。
だけど自分がもし子供を産んだ時、子供に質問されてもわからない！
若い子が入社してきて、プログラミングに対する意見があっても、理解ができないから何も言えない。
授業で教える＝当たり前　になりつつあるプログラミングの基礎はわからないと！ということで、プログラミングについて学べるスクールを探してみました。
プログラミングは、コードを送り自分で操ること。
プログラミングはわかりやすく、私たちも普段から使用しているWEBサイトやアプリの「フロントエンド」とユーザーからは見られないサーバーやデータに関する「バックエンド」に分けられるのです！

WEBサイトってどうやってできている？

WEBサイトは「サーバー」を土台としてそこにソフトウェアを埋め込むことでサイトの管理ができるようになります。
ソフトウェアの世界規模で一番人気は「WordPress」。
そこに、Webサイトの制作で使用されるプログラム言語が3種類あります。
①HTML
WEBサイトの骨組みを作り、文章や画像、リンクなどの骨組みを構築していきます。
②CSS
WEBサイトに色やレイアウトの変更で装飾を施します
③JavaScript
WEBサイトに動的動きをつけるための視覚的表現を担います

ソフトウェアツール「WORDPRESS」の使い方

世界でもっとも使われているにもかかわらず「無料」のソフトウェアなので、だれでも今すぐ触っていくことができます。
ただ、ソフトウェアツールをインストールするための土台「サーバー」は基本使用料がかかるのでやっぱりお金はかかりますね！
WORDPRESSが人気の理由はテンプレートがもともとあったりもするので、ローコード（コードが少なくても平気）なのが初心者にもおすすめらしい。
サーバーを借りたら、そこにWORD PRESSをインストールして、WEB制作を行えます。
WORDPRESSは人気だからこそ、詳しい人がたくさん説明してくれているのですごく使いやすいです！

WORDPRESSでWEBサイトを立ち上げる

まずは、外観のテーマからテンプレート指定して「有効」にすると、サイトのテンプレートが形になります。
または、テーマをダウンロードしてZIPファイルのみアップロードもできるので好きなものを探してくるのも可能です。
そして、テーマの下にある「カスタマイズ」からWEBサイトをカスタマイズしていきます。

コーディングとは

コーディングはプログラミング言語を使ってコンピュータに対して指示を与えることを指します。これによって、コンピュータが特定のタスクを実行するよう指示することです。

わたしは有料だったので使用しなかったのですが、「Adobe XD」や「Visual Studio Code」を使用していくようです。

HTMLを使用してコーディングを行う

HTMLにはマストで使用しないといけないテンプレートがあるようです。

<!DOCTYPE html>：DOCTYPE（ドクタイプ）宣言。使用するHTMLのバージョンを意味する
<html lang="ja">：HTMLの言語設定を””の中で表しており、「ja＝日本語」である
※ドクタイプ宣言のすぐあとに奇術師、閉じタグ（</html>）はそれ以降のコードすべてを囲います
<head>：ページのタイトルや説明文を記述する
<meta charaset="UTF-8">：文字コードを指定し、文字化けを起こさないようにします
<title>：ページのタイトルとなり、プラウザのタグや検索時のタイトルになる
<meta name="description"content="">：Webページの説明文を記載でき、検索時の説明文としても表示される
<body>：本文
h:：見出し
p:：段落
div:：要素を塊にする
img:：画像の表示
section:：章
footer:：フッタータブ
small:：テキストを小さく
ブロックレベル要素：行全体のまとまり
※縦にのみ並ぶ
インライン要素：行中の一部のまとまり（ブロック要素の一部）
※横に並び、サイズの指定も可能

プロパティの設定
background-colour:：背景色
font-family:：フォントの書体
font-size:：フォントの大きさ
font-weight:：フォントの太さ
margin:：要素の外の余白
padding:：要素の中の余白
※padding:上余白　右余白　下余白　左余白　で追記
text-align:：ブロック要素の水平方向の配置
width:：要素の横幅

CSSタグ
CSSタグを組み込む場合、<head>の中に、リセットCSSを組み込む「link:css」と入力すると予測変換ででてきた相対パス（情報やファイルなどの所在を書き表すパスの表記法）を入れ込む。→Index htmlと相対することで活用できる
リセットCSS：プラウザごとに異なる最低限の見た目を担保するデフォルトのCSSを打ち消し、どのブラウザでも見た目を同じにするスタイルシート。※マストで入れないと汚く見える※
①ハードリセット系CSS：すべてのデフォルトを削除
②ノーマライズ系CSS：有用なもののみ残しつついらないものを削除
CSS/STYLE.CSS

プロパティを使用してコーディングをしていきます

フォントはPCにインストールされていないものでも、Fontを検索して読み込むことで適用可能
※Google Fontで一覧で選択し、「＋Select this style」でリンクタブをコピー
Reset CSSとStyle CSSの間に追加する

#Style .cssでコーディングを行いながらなので２画面等でどちらも見えるようにして作業するのがやりやすそう！

CSSの #Style .cssを開いていく
@charset"UTF-8"：最初に書かなければいけないもの
Google Fontで「CSS rules to specify families」をコピーし、bodyタグで適用させる

ここからは、デザインを見て、コーディングして結果表示をルーティンで行っていく
wrapper：全体を囲う要素
Emmet：少ない記述でコードを作成することができる予測変換ツール。
div.wrapper→と打ち込むと、Emmetで予測変換ができる→<div class="wrapper"> </div>

CSSの #Style .cssを開いていく
.wrapper classを作成していく
width:（幅）px：全体の幅を確認して挿入
margin: 0 auto:：真ん中合わせ
padding top: (余白の幅）px：余白の幅

h1. class：H1タグ＝タイトル
class=XXX XXXごとにCSSの #Style .cssを開いて内容を作成していく

alt属性：プラウザ上で画像が出なかった場合に表示される名前

多分この後、レイアウトとかを学ぶ

やっていて思ったことは無料で使えるツールもあるけど、有料なものが多いので本気でやるならやるぞ～！って気持ちでやるしかないんだろうなと思いました。
そしてやっぱり難しいけど、こうやって作っているのか！たのしい！という気持ちにはなります。
さてさて、はちこさんここからどのようにやっていくか楽しみです～！

この記事が気に入ったらサポートをしてみませんか？