WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

目黒 一人飲み・二次会ならカラオケバー OZ (オズ)

受講生の作品

目黒 一人飲み・二次会ならカラオケバーOZ (オズ)


目黒で一人飲み＆二次会ならカラオケバーのOZ(オズ)。目黒駅西口徒歩8分・大鳥神社徒歩2分。目黒区下目黒に1994年創業。映画・演劇・音楽好きのマスターが居るカラオケBAR。お一人飲みはもちろん、結婚式の二次会や歓送迎会等の団体予約もOK！


oz-since1994.com

f:id:yachin29:20171207181613p:plain

https://oz-since1994.com

新井薬師の定食屋 7seki

受講生の作品

新井薬師 手づくり定食のお店 7seki|

新井薬師の定食屋7seki|新井薬師駅（中野区、西武新宿線）南口すぐにある定食屋7seki。ボリューム満点の山盛り唐揚げ定食やとんかつ定食をご提供しています。ご飯大盛り無料。ランチにも夕ご飯にも。看板犬がいます。

7seki.com

f:id:yachin29:20171207180756p:plain

http://7seki.com/

PDFでの書き出し

ポートフォリオ
知ってるようで、知らずに損してるAcrobatとPDFのアレコレ（3）キモは「PDFプリセット」。IllustratorからのPDF書き出しを極める

https://blogs.adobe.com/creativestation/dtp-acrobat-pdf-kihon-03



知ってるようで、知らずに損してるAcrobatとPDFのアレコレ | Adobe Creative Station

webサイトにGoogleAPIを導入する

Webサイト制作

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。
Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選択肢の１つです。２つともGoogleのアカウントさえあれば、無料で特別なスキルもいらずに簡単に作成する事が出来ます。
さらにGoogleユーザー同士でドキュメントの共有や編集も出来ます。

APIとは

APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。 ソフトウェア開発の際、いちから全てを作るより、APIを利用すればもともとあるプログラムを呼び出して、その機能を組み込んだソフトウェアを開発することができる。

Googleフォームの便利なポイント

  • HTML・PHPの知識が無くても、簡単にフォーム機能をwebサイトに導入する事が出来る。
  • 入力データをスプレットシートに自動で保存してくれる
  • Googleフォームの管理画面で編集が可能
  • セキュリティー・サーバー運用もGoogleが管理しているのでとりあえずは安心。それでも不安な人は有料のアカウントであるGoogle Apps for Workを使うと、最高度のセキュリティーが受けられる

Googleフォームを作る

f:id:yachin29:20161202102606p:plain


設問が済んだら、コードを取得してhtmlファイルにコピペするだけ！
f:id:yachin29:20161202104622p:plain


Googleカレンダー

Googleカレンダーもフォームと同様に特別なプログラミングスキルが無くてもwebサイトに簡単に導入出来ます。またスケジュールの差し替えや追加などもGoogleカレンダーの編集画面で変更出来、導入したwebサイト側のカレンダーと同期させる事でリアルタイムで情報を更新させる事が出来ます。



Google カレンダー スタートガイド - パソコン - カレンダー ヘルプ



Google フォーム - アンケートを作成、分析できる無料サービス

GoogleMapの導入

liginc.co.jp

1カラムレイアウトの作成

HTML+CSS

f:id:yachin29:20160203184948p:plain

divタグ　　・・ひとかたまりの範囲として定義する

divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。


今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。
カラムとは段を組むこと（段組）を指します。今回は１つのカラムを組んでレイアウトしていきます。
また画像も自身で選び、Photoshopで適切なサイズにトリミングして使用しましょう。

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

Copyright 2017 Net Smart All Rights Reserved.

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの練習</title>
<style>
html,body,h1,h2,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
.container {
  width:800px;
  margin:0 auto;
}
.header {
  height:400px;
  background: url(img/header.jpg) no-repeat;
}
.concept {
  height:300px;
  background:#EFFFF6;
}
.service {
  height: 300px;
  background:#626262;
}
.footer {
  height:100px;
  background:#9ADBEC;
}
h1 {
  padding-top:20px;
  margin:0 0 20px 30px;
}
h2 {
  width:260px;
  border-bottom:4px solid #444444;
  margin: 0 auto 40px;
  text-align:center;
  padding:20px 0 10px;
}
.concept h2 {
  color:#5C5C5C;
}
.service h2 {
  color:#FFFFFF;
  border-bottom:4px solid #FFFFFF;
}
.concept p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
}
.service p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
  color:#FFFFFF;
}
.footer p {
  text-align:center;
  line-height:100px;
}
</style>
</head>

<body>
<div class="container">
<div class="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div class="concept">
<h2>Concept</h2>

<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div class="service">
<h2>Service</h2>

<p>低価格・高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
<div class="footer">
<p>Copyright 2017 Net Smart All Rights Reserved.</p>
</div>
</div>
</body>
</html>