2020-02-18

スプリットレイアウトの作成

f:id:yachin29:20170215112552p:plain

スプリット＝分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれます。
「スプリットレイアウト」の中でも、デザイン上のスプリットレイアウトのみのスクロール一体タイプと、CSSで画面半分を固定表示にして、残りの半分のみスクロールさせるスクロール分割タイプに大別されます。
さらには画面を4分割や5分割など、色々なパターンがあります。

www.nodai.ac.jp

www.haluta.jp

minico.handmade.jp

2020-02-03

レスポンシブサイトの制作

Webサイト制作

今回のレスポンシブサイトの制作ポイント

1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事
2、webアイコン（Google Fonts）（Font Awesome）を使う事
3、３つあるコンテンツ部分のホバーにアニメーションを追加

使用するテキスト

Ristorante Felica


Home
Concept
Menu
Access


Ristorante Felicaは、
食とアートと音楽が交差する空間を創造します。
シェフ・矢島が提供するのは、イタリア料理に「東京」の
エッセンスを取り入れたモダンイタリアン。
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。


Concept
画像
仮テキスト

Menu
画像
仮テキスト

Access
画像
仮テキスト


©️ Ristorante Felica

作例
Cafe de Felica

2月4日作業分
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブサイトの作成</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner">
<h1>Ristorante Felica</h1>
<nav class="g-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>
</div>
</header>

<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>

<div class="lead">
<h2>Ristorante Felicaは、
食とアートと音楽が交差する空間を創造します。</h2>
<p>シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>


<div class="wrapper">
<div class="block">
<a href="#">
<h3>Concept</h3>
<p class="block-photo"><img src="img/01.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>

<div class="block">
<a href="#">
<h3>Menu</h3>
<p class="block-photo"><img src="img/02.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>

<div class="block">
<a href="#">
<h3>Access</h3>
<p class="block-photo"><img src="img/03.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>
</div><!--/.wrapper-->
<footer>
<p><small>&copy; Ristorante Felica</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";

/* ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
 

header{
border-bottom: 4px solid #de7330;
padding-top: 20px;
}
.header-inner{
max-width: 1260px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
h1{
color: #de7330;/*メインカラー*/
font-family: 'Cinzel', serif;
font-size: 40px;
}
.g-nav>ul{
display: flex;
}
.g-nav li{
margin: 0 20px;
}
.g-nav a{
display: block;
padding: 20px;
text-align: center;
color: #de7330;
font-weight: bold;
font-size: 18px;
font-family: 'Cinzel', serif;
}
.g-nav a:hover{
text-decoration: underline;
}

/*メインビジュアル部分*/
.main-visual{
max-width: 1260px;
margin: 40px auto 60px;
}
.main-visual>img{
max-width: 100%;/*フルードイメージの設定*/
}

/*リード文部分*/
h2{
text-align: center;
}
.lead>p{
max-width: 800px;
margin: 20px auto 80px;
}

/*block部分*/
.wrapper{
max-width: 1260px;
margin: 0 auto 80px;
display: flex;
justify-content: space-around;
padding: 20px 0;
}
.block{
width:30%;
padding: 20px;
box-sizing: border-box;
transition: 0.2s;
}
.block:hover{
box-shadow: 0 0 15px #aaa;
}
.block h3{
color: #de7330;
font-family: 'Cinzel', serif;
font-size: 30px;
margin-bottom: 10px;
}
.block-photo{
overflow: hidden;
margin-bottom: 10px;
}
.block-photo>img{
max-width: 100%;
transition: 0.5s;
}
.block:hover img{
transform: scale(1.2);
}
.block-txt{
color: #222;
}


footer{
width: 100%;
height: 100px;
background: #de7330;
color: #FFF;
}
footer>p{
text-align: center;
padding-top: 20px;
}

2020-01-14

CSS演習問題

HTML+CSS

f:id:yachin29:20170810015813p:plain

今回の制作の仕様

header要素の幅960px高さは350px
header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる
ボタンは5つを均等の幅で設置し、高さは50px
コンテント要素の幅650px 高さ500px
フッター要素の高さ50px
コンテント要素内の文章は回り込みをさせる
各要素の空き・色は適宜
ナビゲーションボタンをホバーした際に文字色と背景色が変わるように

使用するテキスト

CAFE de FELICA


毎日食べたい、おうちみたいなごはんやおやつ

CAFE de FELICAは、あなたのもうひとつの「おうち」になりたいごはんやさんです。
毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。
気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。
ぜひお越しください。

コピーライトマーク CAFE de FELICA

使用する画像
f:id:yachin29:20170810020015j:plain

※header画像は自身で用意する事（サイズ960px X 350px）

f:id:yachin29:20170901172657j:plain

作例

[http://yachin29.webcrow.jp/test01

2020-01-14

ブロックレベル要素とインライン要素の違い

HTML+CSS

HTMLには色々な要素（h1とかp）がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。
この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じてしまう、意図しないズレや空きを無くす事が出来ます。

インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。例えば、p要素の中のspan要素のように、段落のなかの一部を修飾・強調するような使われ方をする要素です。一般的なブラウザでは改行されず、横に並びます。

<a>、<abbr>、<br>、<em>、<img>、<input>、<label>、<select>、
<small>、<span>、<strong>　など

ブロックレベル要素

ブロックレベル要素は、見出し・段落・表など、HTMLを構成する基本となる要素で、一つのブロック（かたまり）として認識されます。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは改行されます。

<div>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<table>　など

配置ルール

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。一方、インライン要素の中には、他のインライン要素を配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。

正しい配置方法

<p><span>段落となります。</span></p>

間違った配置方法

<span><p>段落となります。</p></span>

インライン要素の特性
width – 効かない
height – 効かない
margin – 左右は効くけど、上下は効きません。
padding – 一応上下左右効くけど、上下は不安定 …。

特別なインライン要素 img、input、textarea

同じインライン要素でも img タグ、input タグ、textarea タグなどは特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。
しかし、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです。

width – 効く
height – 効く
margin – 効く
padding – 効く

インライン要素をブロックレベル化する「display: block 」

width や heightを指定できないインライン要素に対し、
「display: block 」を指定する事でa要素などをブロックレベル化する事が出来、width や heightを指定する事が出来ます。

a {
  display: block;
}

2019-12-04

githubでissue管理をする

Git

基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。

githubでissueを作る
issueに対応する作業ブランチを作る
ローカルで作業が終わったらcommitして、リモートリポジトリにpushする。コミットする際にコミットメッセージをissue番号にすることでcommitがgithub上のissueと結びつく
githubでプルリクエストを作る
githubでプルリクをマージする。コンフリクトがないことを確認してボタンを押す。本来なら責任者が再鑑してからマージする。
githubでissueをクローズし、いらないブランチを削除
マスターブランチにチェックアウトしリモートリポジトリからpullして最新状況を取得する
1に戻って次のissue（作業）を作る

qiita.com

2019-12-03

Gitを使うーGitHubとSourceTreeの導入

git

f:id:yachin29:20180728033807p:plain

Gitとは？

Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機能追加で更新するのは、どれとどれか？」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub（ギットハブ）とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ますが、プライベート（非公開）リポジトリを利用したい場合は、有料プランに登録する必要があります。

SourceTree

Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。

Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の１つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。

コミットとプッシュ

コミット(commit) ：ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。

プッシュ(push) ：ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

基本的な作業の手順としては

「ローカルリポジトリ」のデータを変更させて
コミットしてから
「リモートリポジトリ」にプッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。

GitHubとSourceTreeの導入方法

f:id:yachin29:20170314234848p:plain

GitHubでの作業

GitHub上での作業は非常に簡単で単純ですが、基本的にインターフェイスが英語なので、ある程度慣れが必要になります。
まずはGitHubのアカウントを作りましょう。
続いて、プランを選択します。有料のプランもありますが、無料で使えるFreeプランがあります。Freeプランはソースがオープンになってしまいますが、今回はFreeプランで登録するので、「Free」を選んでから「Finish sign up」ボタンをクリックします。

リポジトリの作成

アカウントを作った後に、そのプロジェクトのマスターがリポジトリを作成します。
GitHubにログインした状態で、「New Repository」ボタンを押します。

f:id:yachin29:20170317105000p:plain

次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。
また、リポジトリの種類を「Public」か「Private」を選択します。この「Private」リポジトリは、有料会員のみ作成することが可能なので、ここでは「Public」を選びましょう。
最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。.gitignoreやlicenseについては後で追加や変更ができますので、Noneを選択します。

f:id:yachin29:20170317105303p:plain

必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。
次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。また、このリモートリポジトリのアドレスはプロジェクトチームの他のメンバーがGitHubとSourceTreeを紐付ける時に必要になるので、他のメンバーにも教える必要があります。

SourceTreeのインストール

次に以下のサイトからSourceTreeをインストールします。
ja.atlassian.com

SourceTreeでの作業

GitHub上に作った「リモートリポジトリ」をローカル上にコピー（クローン）します。
「リモートリポジトリ」のURLをコピーし、SourceTreeの「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先（ローカル上）のディレクトリを指定します。
（ローカル上に「リモートリポジトリ」のクローンである「ローカルリポジトリ」を作る際には中身が空のディレクトリを用意してあげる必要があります。）
そしてクローンすると、新しくローカルリポジトリが作成されます。

作業開始直後はまだ何も表示されませんが、その後更新作業などを進めていくと、このようにグラフが伸びていき、作業の進捗状況なども可視化でき、解りやすくなります。
作業を進めるとこんな感じになります。
f:id:yachin29:20170317110837p:plain

複数人でブランチを分けていった場合
f:id:yachin29:20180421092702p:plain

以上で、GitHubとSourceTreeの導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。

参考サイト
qiita.com
qiita.com

2019-11-27

LP（ランディングページ）の作成

Webサイト制作

ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。

コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などをコンバージョンにする場合が多いです。コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことをコンバージョン率（ CVR）といいます。コンバージョン率は、コンバージョン数÷ 訪問数で算出することが出来ます。