header {
background-color: #f6f3f1;
opacity: 0.95;
box-shadow: 0 3px 5px rgba(148, 135, 115, 0.4);
height: 55px;
width: 100%;
position: fixed;
z-index: 1;
display: table;
font-size: 16px;
}

少し透過させて、下に薄っすらと影をいれたらググッと見栄えが良くなりました。

また、aタグのCSSには全て:hoverを入れました。装飾はなんでも良いのですが、やっぱりカーソルが載った瞬間に変化が起こらないとモヤモヤしますよね。実装したら一気にポチポチ押したくなるサイトになったので、これからも:hoverまで気をまわして実装したいと思います。

さらにお問い合わせフォームも作ったのですが、その際にとても有益な記事を見つけたのでシェアさせて頂きます。

websae.net

よく、性別や年齢を尋ねるお問い合わせフォームを見かけますが、あれ、本当に必要ですか？

このツッコミにグッと来ました。

本当にその機能は必要なのか？

議論に議論を重ねて、最低限必要な機能に注力する。

そういう議論が巻き起こる仕事がしたい＞＜超楽しそう！

というわけで、今日はちょっとした工夫が全てなんだということを学びました。

影をつけたり、透過させたり、:hoverで変化を起こしたり、「そもそもその機能要るのか？」とゼロベースで考え直したり...

良いデザインはちょっとした気遣いと気付きで生まれるものですね。

明日はMySQLと戦います(唐突)。ではでは。

2016-06-05

三本線のアイツ

ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。

(1) 概要

会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました！

(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する

まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。

www.nxworld.net

こちらの1番を用いました。

余談ですが自作にあたって一番驚いたのが、ハンバーガーナビゲーション部分のHTMLファイルが

HTML

<a class="menu-trigger" href="#">

<span></span>

<span></span>

<span></span>

</a>

こんなに簡単な記述だということでした。spanの空タグとは予想外。

(3) クリックするとハンバーガーが×になるアニメーションを実装する

続いて、アニメーションの実装を行いました。

CSS (一部のみ)
.menu-trigger.active-btn span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
/*transform: translateY(20px) rotate(-45px);*/
}

JS

$(function( ){
$('.menu-trigger').on('click', function( ) {
$(this).toggleClass('active-btn');
return false;
});
});

起こしたい変化(今回はハンバーガーから×になること)にクラス名をつけて、それをjsファイルで「クリックしたらそのクラスが追加されるよ」と書けばいいだけなんですね...

HTMLファイルは全くいじらないということに驚きました。

(4) ハンバーガーをクリックしたら、メニューも出てくるようにしたい

続いて、ハンバーガーをクリックしたら、メニューも出てくるようにするために、メニューを実装しました。まずはそのビュー部分から。

HTML

<div id="menu-bar-item">
<ul>
<li><a href="#section1">ニュース</a></li>
<li><a href="#section2">事業内容</a></li>
<li><a href="#section3">実績紹介</a></li>
<li><a href="#section4">VISION</a></li>
<li><a href="#section5">CONTACT</a></li>
</ul>
</div>

CSS

#menu-bar-item {
display: none;
background-color: rgba(0, 0, 0, 0.8);
text-align: right;
margin-top: 0px;
width: 360px;
margin: 0 auto;
}

#menu-bar-item li {
padding: 16px;
}

#menu-bar-item li:not(:last-child) {
border-bottom: 1px solid white;
}

#menu-bar-item a {
color: white;
}

#menu-bar-item a:hover {
color: pink;
}

ポイントはモーダル実装でお馴染みの、初期値はdisplay: none;にすることです。

続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。

qiita.com

これを元に書いたCSS、JSがこちら。

HTML

#menu-bar-item.active-btn {
display: block;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}

@keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

JS

$(function( ){
$('.menu-trigger').on('click',
function( ){
$(this).toggleClass('active-btn');
$('#menu-bar-item').toggleClass('active-btn');
return false;
});
});

今回の実装一番の学びが、クリック１つで２つのイベントを起こしたいときに、２つ連ねて書けばOKだということでした。

というわけで、無事、ハンバーガー完成です(｀・ω・)b

2016-06-01

今日の反省

今日は会社のHP作成の続きを行っていました。

レスポンシブデザインにしようと画策していたのですが、

中々うまくいかないので、PC用とスマホ用で別々のHPを作る事にしました。

スマホ版のHPといえば、ハンバーガーナビゲーション！

ということで、ハンバーガー作りにチャレンジしたものの、参考にしたサンプルコードの解読ができず、今日は断念して、他の部分のコーディングを行いました。

悔しいです(T^T)

まだまだHTML CSSマスターへの道は長い！

一歩一歩進みます(｀・ω・)b

今出来なくてもきっと何度も見たり読んだり書いたりしてれば、上達しますから！

【今日の学び】

・最後の１つだけ除く、というオプションの付け方を学びました。

条件に外れた場合だけ装飾するCSS3「:not()」の使い方 [ホームページ作成] All About

2016-05-28

近日中に達成したい目標整理

プログラミングが楽し過ぎて、目標を定めるのを怠ってたので、目標を整理します。

目標1: 会社のHPを仕上げる。

そのためにするべきこと。

HTML CSS CSS3をマスターする。
レスポンシブデザインを理解する。
サーバーへのアップロードの仕方を理解する。

具体的な学習計画

上記2つは完了済みなので、他を完了させます。

これを終えたら、GitHubのマイページを改良する事で身につけたことを応用します。

目標2: soundcloud APIで何か作る

そのためにするべきこと。

JavaScriptを理解する
SoundCloud Developersの内容を理解できるようになる
他のAPIを使ってみる(API慣れする)

具体的な学習計画

こうやって書いてみると明確になりますね。

定期的に整理します。

目標掲げておいてアレですが、

Node.jsが猛烈に気になるので今夜はこれをやります！！！！

Node.js入門 (全16回)

2016-05-26

ネタ帳 - EDM業界とヲタク業界は極めて似ている

タイトルまんまです。

EDM業界とヲタク業界って非常に似ているんですよ。

どちらも、

原作がある
それを真似て、新しいものを創りだす人がいる
原作も新しいものも買う人がいる
1.~3.が集うでっかいイベントがある

という共通点があります。

EDM業界なら、1.はOriginal mix、2.はRemix、 3.はリスナー、4.はフェスです。

ヲタク業界なら、1.は原作漫画、2.は同人誌、3.はヲタク、4.はコミケです。

こうして見ると、結構似てないですか？

ここで私が言いたいのは、この2つのマーケットってものすごくお金が回りそうだということです。調べてないですけど、実際回ってますよね。フェスもコミケも数百億というお金が平気で動いています。

なぜ、こんなにもお金が回るのでしょうか？

私は、このマーケットに出てくる人々は、誰もが買い手であり売り手であるからだという答えに辿り着きました。

例えば、1.を創った原作者でも、Remixや同人誌を買う人がいますし、2と3は同一人物である事も多いですよね。つまり、買い手になったり売り手になったりと、立場が変わる分満たされる欲求が増える訳です。(買い手の時は物欲、売り手の時は承認欲求などなど...) だから飽きがこなくて、ずっとそのマーケットに居続けてもらえるのかなと思いました。

買う行為と売る行為が同時に生まれるマーケットとでも言いましょうか。

非常にビジネスチャンスを感じるんですよね。(言い方が胡散臭くてすいませんw)

こういうマーケットを見つけ出して、面白いプロダクトや文化を創りたいと常日頃思っているので、今日は文章に書き起こしてみました。

2016-05-26

今日の学び - slick.jsは神

今日は会社HPにスライダーを埋め込む作業を行いました。

初めは自力でjsファイルの構築を試みたのですが、撃沈。

ぐぐったら高性能で美しいスライダーを発見しました。

それがこちらのslick.jsです。

slick - the last carousel you'll ever need

サイトデザインから既に洗練された印象を受けますよね。とても素敵です。

[超ド級の初心者がやったslick.js実装の手順]

(1) ヘッダーのget it nowをクリックして、Download Nowから圧縮ファイルをダウンロード

(2) 解凍したslick-1.6.0ディレクトリの中を覗く。とりあえずindex.htmlをchromeで開くとサンプルが見られるのでオススメです。ついでにテキストエディタでも閲覧して、どんな風にコードが書かれているか覗きましょう(｀・ω・)b

(3) 以下のファイルを、自分のHP用ディレクトリの最適な場所に分配する(要するにcssファイルならcssディレクトリに、jsファイルならjsディレクトリに...ということです)

・jsファイル: slick-1.6.0/slick/slick.min.js

・cssファイル: slick-1.6.0/slick/slick.css および slick-1.6.0/slick/slick-theme.css

・fontファイル (※どうやらこのfontファイルは、font awesomeのようなもののようです。これをちゃんと入れておくと、スライダーについている矢印も正しく表示できます): slick-1.6.0/slick/fontsディレクトリに入っている4つのファイル全部。

(4) slick-theme.cssファイルの中身を弄る

slick-theme.cssをテキストエディタで開いて、上から17行目までに書いてあるurl('パス')の部分を、先ほど自分で分配したパスに直してあげましょう。こうすることで、ちゃんとそれぞれのファイルが読み込まれます。

(5) htmlファイルに読み込む宣言を書く

ここまでできたら、htmlファイルに「slick.jsを読み込むよー」という宣言をします。

まずはcssファイルから。cssファイルは<head>の中に書きましょう。

パスは適宜変えてください。続いてjsファイル。こちらは</body>の直前に書きます。

<script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).on('ready', function(){

$('.slider').slick({

});
});
</script>

(6) スライドさせたい写真をhtmlファイルに書き連ねる。

</div>

以上です。これでかっこいいスライダーが実装できます。

みなさんもぜひやってみてください！

Mi in progress

研究者ではなく、エンジニアになることを決意した人のブログ。

イルカちゃん(MySQL)を愛でるの巻

ちょっとした工夫が全てなんだろうな

三本線のアイツ

今日の反省

近日中に達成したい目標整理

ネタ帳 - EDM業界とヲタク業界は極めて似ている

今日の学び - slick.jsは神