夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

gulp初心者がなんとなく使えるようになるためのまとめ_2(gulpのプラグインを使ったタスクの書き方)

この記事の執筆時点のgulpのバージョンは3.9.1です。 gulpが持つ基本的な機能 gulpのタスクはgulpが用意しているAPI(機能)を使って書いていきます。 gulp.task タスクを作る時に使う関数です。gulp.task('taskName', function)という形式で、タスク名と処…

gulp初心者がなんとなく使えるようになるためのまとめ_1

ある案件で、PHPなどのサーバーサイド言語を使わずに、ヘッダー・フッターなどの共通化ができるツールでコーディングできないか?ということで、教えてもらって使い始めたGulp。 そのお仕事もひと段落したので、なんとなく使ってわかってる気にならず、ここ…

HTMLのviewportについてわかりやすく書いてみた

この記事は下記URLにお引越ししました! http://diet-dev.com/2017/05/23/html-viewport/

CSS | marginの相殺とは

marginの相殺とは? まず、marginの相殺とはなんなのか、(気取って)MDN の概要を見てみましょう。 ブロックの top と bottom のマージンは結合される(折り畳まれる (collapsed))ことがあり、結合されるマージンのうち大きなほうのサイズを持った一つのマ…

CSS3 の 要素 box-sizing: border-box; とは?

この記事は下記URLにお引越ししました! http://diet-dev.com/2017/05/28/box-sizing/

::after ::before 擬似要素の基本から実際の使い方まで1から理解しよう

CSS

疑似要素ってありますよね。僕は技術書で初めて見ました。最初見た時、「え、なんだ、これ?」って思いませんでしたか?ですが覚えると、とっても便利なのでさっそく使いこなしましょう! 擬似要素とは MDNのガイドラインには、下記のように書いてあります。…

JavaScriptの基本的な書き方 日付 / 時刻データを操作する Dateオブジェクト

Date オブジェクトを生成する Dateオブジェクトの生成には必ずコンストラクタを経由する必要があります。Dateオブジェクトのコストラクタには以下の構文などがあります。See the Pen 20160815DateObject by r.shimizu (@r_shimizu) on CodePen. Date オブジ…

CSS3セレクタ nth-child と nth-of-type の違い

セレクタの中でも使い勝手がいい擬似クラス nth-child と nth-of-type とは? 使い勝手がいいことを言う前に、まず、わりとどうでもいい疑問かもしれませんが、「nth」の言葉の意味を紹介します。n はnumberという意味で、 th は、4th, 5th, 6th...で使われ…

css3で追加されたremという単位が便利な理由

CSSにおけるフォントサイズの指定は、相対指定の「em」や「%」、絶対指定のpxが一般的です。 また、CSS3に新しく「rem」という単位を使った指定方法もあります。今回は、remという単位が便利な理由をpxやemと比較してまとめます。 remはレスポンシブウェブデ…

オブジェクトとは(JavaScript)

オブジェクトは、まさに「モノ」そのもの オブジェクトとは、名前をキーにアクセスできる配列です。 ハッシュ、連想配列などと呼ばれることもあります。 通常の配列はインデックス番号しかキーにできないのに対して、オブジェクトは文字列をキーにアクセスで…

JavaScriptの基本的な書き方 制御命令_ループ(反復処理)と例外処理

プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。 今度はループと例外処理です。反復処理には主に下記の4つがあります。 while文 do...while文 fo…

JavaScriptの基本的な書き方 制御命令_条件分岐

プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。 単純分岐 if 変数xが10以上か否かで出力する文字列を変えるサンプルコードSee the Pen 2016080…

効率的なCSS設計の基本「基本、HTMLの要素名にスタイルを指定しない」

CSSは、簡単に書けるメリットがある一方、非常に破綻しやすいデメリットもあります。 保守性が高まる、CSS設計の代表例をメモします。 HTMLの要素名にスタイルを指定しない リリース後や改修後も、後から部分的な変更や、ブラウザやサイトの仕様変更によって…

HTML5とCSS3の勉強もしよう

今後、フロントエンド寄りの業務が多くなるので、改めて知らなかったことをまとめておこうともいます。 (知識の定着も兼ねて)Javascriptも合わせて、HTML5,CSS3を改めて勉強してみようと思います。まず、ちょっと前にこの本「スラスラわかるHTML&CSSのきほ…

JavaScriptの基本的な書き方

JavaScriptの基本的な書き方(2-1/p24) See the Pen p24 by r.shimizu (@r_shimizu) on CodePen.まず、JsのコードをHTMLのファイルに組み込むのはスクリプトタグのタグの役目です。 <script>Jsのコード</script>上記のtype属性を見てください。旧来のHTMLでは、style要素とsc…

Javascript 言語としての4つの特徴

2016年の8月1日の今日、Javascriptを基礎から勉強してみようと思います。なぜこの言語から勉強をするかというと、8/22からフロントエンドエンジニアとして働くからです。 また、フロントエンドエンジニアこそ、Javascript(今後Jsって略します)って言語を操…

clearfixに必要なこと

CSSでサイト制作をする際、避けては通れない要素を簡単に書いておきます。 知っておけば、不用意な見た目の崩れを防げます。 擬似要素(Pseudo-elements) 要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。 w3g.j…

信頼性がだんだん強みに

http://www.yomiuri.co.jp/national/20160303-OYT1T50018.html?from=twwww.yomiuri.co.jp概要、美容系の医療機関のサイトが、効果を誇張していたり、リスクが分かりにくかったりで、消費者のクレームが増えたので、厚労省が広告配信の規制を検討するというも…

Googleアナリティクスの基本的な使い方 -レポートの見つけ方編-

私は、Webメディアに訪れるユーザーの行動などを分析し、課題を発見して、改善する仕事をしています。そこで、「ユーザーの行動を分析するうえでかかせないGoogleアナリティクスの使い方」について解説していきます。 Googleアナリティクスの使い方がわから…

CSS(属性セレクタ / CSS3セレクタの「:not()」)

属性セレクタ class属性やid属性も含め、特定の条件を満たす属性(href,targetとか)で指定できるので、 動的に吐き出される要素と相性が良いので重宝します。 擬似要素・擬似クラス CSS3セレクタで追加された「:not()」 W3Cでは「E:not(s)」という風に説明…

cssのfloatを解除する方法 〜あこがれの2カラムレイアウト〜

画像引用: CSSプロパティ / float,clear...ボックスなどを横並びで表示させたいときは、CSSのfloatプロパティを使用します。 例えば、下記の基本的な例を紹介します。HTML <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> CSS .main { padding: 10px; width: 1000px; background: #aaa; } .le…

たまにDJしたくなる。

DJしてたのなんて、10年も昔の話です。 あの頃はホント夢中になってやっていたので、今の音楽の趣味は、ほぼあの頃のままだし、今もたまにムズムズと、MIXしたくなる。 誰のためでもなく、自分のために作ります。まとまったMIX CDを作りたくなる時は決まって…

開発効率・メンテナンス効率のいいCSSの設計思想とは_2

破綻しやすいCSS(その1)「HTMLの構造に依存している」 HTMLの変更と、それに合わせてCSSも変更になる場合。MTHL <article> <h1>Title</h1> <div> <p>article</p> </div> </article> CSS article h1 { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: …

開発効率・メンテナンス効率のいいCSSの設計思想とは_1

よりよい設計のゴールとして、GoogleのエンジニアであるPhilip WaltonさんのBlogを引用すると。 予測しやすい事(Predictable) 再利用しやすい事(Reusable) 保守しやすい事(Maintainable) 拡張しやすい事(Scalable) 予測しやすい事 これは、思った通…

別ページの特定部分へリンクする

リンクは、他のページのURLを指定するだけでなく、特定の場所まで移動させることもできます。 リンク先の指定には、タグについているCSSのid属性を使用します。 <a href="saki.html#aaa">aaaの位置へ遷移</a> リンク元のページのこのaタグをクリックすると、 下記のページだけでなく、こ…

Ruby文法

ココに書かれたプログラムや説明文は 高橋 征義 (著), 後藤 裕蔵 (著), まつもと ゆきひろ (監修) (2013)"たのしいRuby 第4版" ソフトバンククリエイティブ から引用しています。_____________________________________________________________ 配列の要素…

好きだという事が何かの理由

師匠が言ってた。 好きなのに理由なんて無いだろ。 好きだという事が何かの理由なんだよ。 って、"好きだという事が何かの理由なんだよ。" って、ちょっと意味分からんけど、 とても安心する言葉と思った。 なんか、多くの人が理由を求める人が多い気がする。…