ブログ

WebサイトがHTMLやCSSといったデータを元に表示されているのは多くの人が知っていると思います。
「HTML等のデータを作ってWebの海にポンと投げればページが公開される」
そんなイメージを持つ人も多いのではないでしょうか。私はそう思っていました🤗笑
確かに私も何も考えず説明するとすればそういった感じなのですが、仕事をする上ではもう少し掘り下げたほうがいいかと思います🙋‍♀️

Webは意外と物理的

まずページに表示させたいテキストや画像をコンピューターが読み取れる言語にしてデータを作ります。
これがHTML（HyperText Markup Language／ハイパーテキストマークアップランゲージ）です。
そこに色をつけたり大きさを変えたりとスタイルを追加します。
これがCSS（Cascading Style Sheets／カスケーディングスタイルシート）です。

他にも色々ありますが、とりあえず基本となるこれらのデータを「Webの海にポンと投げる」、つまりサーバーにアップするとそれが全世界に公開できるようになります。

サーバーときくとなんとなく目に見えないもののようにも思えますが、日本や世界の各地に設置されたハードウェアが搭載されたコンピューター機器になります。
データ共有にも使えるので意外と会社にも普通にあったりします。

データの作成も人間ですし、サーバー機器の設置や管理も人間です。
Webは自動でいろいろやってるように見えて、実はとっても人力・物理的なのです。

公開時に必要な「アップする場所」

日常でWebを利用するだけなら必要ないですが、Webを公開する側となるとさらにもう少し深く掘り下げる必要があります⛏👷‍♀️

先程「サーバーにアップする」と書きましたが実はこれには様々な方法があります。
Webページを公開するとなると、個人では難しい設定が多数あるのでドメインやレンタルサーバーを扱っているサービスを経由する必要があります🌏

世界中に数多くのサーバーやサービスがあるため、“どのサーバーにどうやって”アップするかの取捨選択が必要になります。
そうなると選択肢が莫大になりそうですが、「どんなページを作りたいのか」「何を公開したいのか」といったことによってある程度絞られます。

例えば一般的なWebサイトであればドメインとサーバーが必要となりますが、LP（ランディングページ）に購入ボタンを設置しそこから直接商品を買えるようにするなら、ECカートシステムを使う必要もでてきます。

ドメイン🏠

URLになる。好きな文字列と「.com」「.jp」「.net」といった組み合わせ。お名前.comやムームードメインといったサービスを利用して取得する。継続的な費用がかかる。

サーバー🌏

データをアップロードする場所。お名前.comやエックスサーバー、ロリポップ等のサービスを利用して用意する。継続的な費用がかかる。

ECサイト構築システム・カートシステム🛒

ECサイトに必要な発注・発送や決済等を処理するためのシステム。楽天RMSやヤフーストアクリエイターPro、Futureshop、ショップサーブ、BASE等。無料から有料まで様々。

Webサイト公開場所チャート

サーバーやシステムはクライアント側ですでに利用していたり決まっていたりする場合もあります。

下記に簡単なチャートを作ってみました。

FTP📑

ファイル転送プロトコル。 データの保存場所とサーバーを繋ぎ、データをアップロードすることができる。専用のソフトを使用する。フリーソフトなら無料。

CMS💻

コンテンツ管理システム。HTMLがわからなくても簡単にWebページやブログを制作できる。代表的なものにWordpress、a-blog cms、baserCMS等がある。無料から有料まで様々。

システムに組み込む必要があるかどうかなど、わからないところはコーダーはじめフロントエンジニアの方やクライアントに確認してみてください。

どんなページをどこに公開するかを先に理解しよう

クリエイティブが完成して公開となったときに「ドメインやサーバーが必要だった！」「システムに組み込む必要があった！」となると、進行が滞ったり最悪やりなおしになってしまいます。

「（WebサイトやLP等）どんなページを」「（サーバーやCMS上等）どこに」アップするかを明確にして、計画的に制作を始めましょう。

Webに携わるデザイナーやディレクター、営業といったいわゆるノンコーダーの方がWebについて具体的に学ぶことは必要なのかを考えてみたいと思います。

結論

必要です🙋‍♀️

デザイナーさんやディレクターさん、そもそも営業さんがhtml・cssをはじめとするWebを表示させる方法について理解していないと、現場で問題が起きることが多々あります。
最終的に納期が遅れたり制作し直しということも…！
Webに関わる皆様はぜひ！今すぐ！！Webページをつくるための最低限の知識を身につけてください！！

ここでいう“Webを学ぶ”というのはプログラミング的な意味ではなく、もちろん「HTMLを手打ちできるまで覚えろ！」とかいう意味でもありません。
Webページがどのように作られてどのように表示されているのかというWebの基本的な仕組みを知ることを指しています。

これを理解していることで、具体的には下記のような問題を防ぐことができます。

Webを理解していることで防げる問題

制作するものが明確になる

「そんなものわかっとるわ」と思われるかもしれませんが、「今作ろうとしているページはどういうページなのか」ということが最初にはっきりしていないと、最後に大変なことになります。

例えば新規でLPを作るとします。幅は何pxで色は何を使って…これくらいは制作のとき必ず必要となるのでイメージがつきやすいと思います。

しかし実はそれ以外にもなくてはならない情報があるのです。

どこにページをアップするのか

作ったLPを最終的にいったいどこにアップするか、これがかなり重要になってきます。
新規でドメインを取得したり、クライアントのサーバーに直接アップしたり、クライアントのECサイトに埋め込んだり…実はさまざまな方法から選ぶ必要があるのです。

ここを把握していないとせっかくフロントエンジニアがページをコーディングしても最悪の場合すべてやり直し…ということになることも。

ページを作って公開するだけだと思っていたら…

• 新規でドメインを取得して公開だった！ ➡️ 工数が増え納期が遅れる
• クライアントのサーバーに直接アップしなければいけなかった！ ➡️ FTP情報の確認に時間がかかり納期が遅れる／コーディングの仕様規定があったためやり直しになる
• 現状のECサイトに埋め込む必要があった！ ➡️ 使えるjs（javascript）やcssに限りがありやり直しになる／表示幅が決まっておりデザイン修正になる

後からこんなことになるなんて恐ろしいですね…！
納期が遅れるなんて最悪です🥶

何よりクライアントやフロントエンジニアに「あっこの人はわかってないんだな」と思われてしまいます。

問題が起こらないようにするには？

解決策は簡単です！
制作に入る前に確認しましょう！！👏👏

しかし「何を聞けばいいかわからない」「聞いたけどわからないので指示がだせない」「他の人に丸投げ」ということになりかねません。

そうならないためにHTML・CSS等が実際にどのように使われて、どのようにページを表示させるのかという最低限の知識が、Webを制作する人全員に必要になってくるのです。

このブログでは【ノンコーダーからはじめるWeb制作入門】と題してWebを作るうえで必要になるWebの知識を、がんばってまとめていきたいと思います🙇‍♀️

LPに使えそうなボタンが…でっかくなｃｃｈ👂👂👂
大小にアニメーションするボタン。
LPなので勝手に画像ボタンを想定。

画像ボタンが拡大したり縮小したりする

デモ

HTML

<div class="cv_btn">
  <a href="#"><img src="画像URL"></a>
</div>

CSS

.cv_btn {
  margin: 0 auto;
}
.cv_btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

cssで作る開閉で向きが変わる矢印付きアコーディオン！！！（タイトルママ

こちらのサイト様の合わせ技です。
ありがとうございます😭😭

とはいえやっと人様に還元できるようなコードが書けたよ。

右端に矢印Ver

デモ

「バー」を押すとアコーディオンが開いて、矢印の向きが変わるよ。
バーや内容にimgを指定することもできる。

HTML

inputのid名とlabel名を連動させるのがポイント。
つまり3つ目を増やすときはcssにmenu_bar03を追加する。

<div class="menu">
  <input type="checkbox" id="menu_bar01" />
  <label for="menu_bar01">バー01</label>
  <ul id="links01">
    <li>内容01-A</li>
    <li>内容01-B</li>
    <li>内容01-C</li>
  </ul>
  <input type="checkbox" id="menu_bar02" />
  <label for="menu_bar02">バー02</label>
  <ul id="links02">
    <li>内容02-A</li>
    <li>内容02-B</li>
    <li>内容02-C</li>
  </ul>
</div>

CSS

アニメーションを矢印のcssに追加すると、矢印がクルっとなってたのしい。

/*アコーディオン全体*/
.menu {
	width: 100%;
	padding: 10px 10px 20px;
}
.menu input {
	display: none; /*チェックボックスを隠す*/
}

/*バー部分*/
.menu label {
	cursor :pointer;
	display: block;
	text-decoration: none;
	color: #fff;
	line-height: 1;
	position: relative;
	margin: 0 0 10px;
	padding: 10px;
	background-color: #333;
}

/*開いたときに表示される部分*/
.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 1px;
}
.menu li {
	max-height: 0;
	overflow-y: hidden;
	-webkit-transition: all 0.5s; /*閉じるときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
	max-height: 30px; /*開いたときに表示されるliの高さ*/
	opacity: 1;
	-webkit-transition: all 0.5s; /*開くときのアニメーション*/
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
 /*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child {
	margin-bottom: 20px;
}

/*閉じた状態の矢印描画*/
.menu label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	position:absolute;
	right: 2%;
	top: 0;
	bottom: 15%;
	margin:auto;
}
/*開いた状態の矢印描画*/
.menu input[type=checkbox]:checked + label:after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	right: 2%;
	top: 7%;
	bottom: 0;
	margin:auto;
}

こちらは左に＞の矢印Verで、さらにめちゃくちゃ勉強になるサイト様🗽