この記事の執筆時点のgulpのバージョンは3.9.1です。 gulpが持つ基本的な機能 gulpのタスクはgulpが用意しているAPI（機能）を使って書いていきます。 gulp.task タスクを作る時に使う関数です。gulp.task('taskName', function)という形式で、タスク名と処…
ある案件で、PHPなどのサーバーサイド言語を使わずに、ヘッダー・フッターなどの共通化ができるツールでコーディングできないか？ということで、教えてもらって使い始めたGulp。 そのお仕事もひと段落したので、なんとなく使ってわかってる気にならず、ここ…
この記事は下記URLにお引越ししました！ http://diet-dev.com/2017/05/23/html-viewport/
marginの相殺とは？ まず、marginの相殺とはなんなのか、（気取って）MDN の概要を見てみましょう。 ブロックの top と bottom のマージンは結合される（折り畳まれる (collapsed)）ことがあり、結合されるマージンのうち大きなほうのサイズを持った一つのマ…
この記事は下記URLにお引越ししました！ http://diet-dev.com/2017/05/28/box-sizing/
疑似要素ってありますよね。僕は技術書で初めて見ました。最初見た時、「え、なんだ、これ？」って思いませんでしたか？ですが覚えると、とっても便利なのでさっそく使いこなしましょう！ 擬似要素とは MDNのガイドラインには、下記のように書いてあります。…
Date オブジェクトを生成する Dateオブジェクトの生成には必ずコンストラクタを経由する必要があります。Dateオブジェクトのコストラクタには以下の構文などがあります。See the Pen 20160815DateObject by r.shimizu (@r_shimizu) on CodePen. Date オブジ…
セレクタの中でも使い勝手がいい擬似クラス nth-child と nth-of-type とは？ 使い勝手がいいことを言う前に、まず、わりとどうでもいい疑問かもしれませんが、「nth」の言葉の意味を紹介します。n はnumberという意味で、 th は、4th, 5th, 6th...で使われ…
CSSにおけるフォントサイズの指定は、相対指定の「em」や「%」、絶対指定のpxが一般的です。 また、CSS3に新しく「rem」という単位を使った指定方法もあります。今回は、remという単位が便利な理由をpxやemと比較してまとめます。 remはレスポンシブウェブデ…
オブジェクトは、まさに「モノ」そのもの オブジェクトとは、名前をキーにアクセスできる配列です。 ハッシュ、連想配列などと呼ばれることもあります。 通常の配列はインデックス番号しかキーにできないのに対して、オブジェクトは文字列をキーにアクセスで…
プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。 今度はループと例外処理です。反復処理には主に下記の４つがあります。 while文 do...while文 fo…
プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。 単純分岐 if 変数xが１０以上か否かで出力する文字列を変えるサンプルコードSee the Pen 2016080…
CSSは、簡単に書けるメリットがある一方、非常に破綻しやすいデメリットもあります。 保守性が高まる、CSS設計の代表例をメモします。 HTMLの要素名にスタイルを指定しない リリース後や改修後も、後から部分的な変更や、ブラウザやサイトの仕様変更によって…
今後、フロントエンド寄りの業務が多くなるので、改めて知らなかったことをまとめておこうともいます。 （知識の定着も兼ねて）Javascriptも合わせて、HTML5,CSS3を改めて勉強してみようと思います。まず、ちょっと前にこの本「スラスラわかるHTML&CSSのきほ…
JavaScriptの基本的な書き方（2-1/p24） See the Pen p24 by r.shimizu (@r_shimizu) on CodePen.まず、JsのコードをHTMLのファイルに組み込むのはスクリプトタグのタグの役目です。 <script>Jsのコード</script>上記のtype属性を見てください。旧来のHTMLでは、style要素とsc…
2016年の8月1日の今日、Javascriptを基礎から勉強してみようと思います。なぜこの言語から勉強をするかというと、8/22からフロントエンドエンジニアとして働くからです。 また、フロントエンドエンジニアこそ、Javascript（今後Jsって略します）って言語を操…
CSSでサイト制作をする際、避けては通れない要素を簡単に書いておきます。 知っておけば、不用意な見た目の崩れを防げます。 擬似要素（Pseudo-elements） 要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。 w3g.j…
http://www.yomiuri.co.jp/national/20160303-OYT1T50018.html?from=twwww.yomiuri.co.jp概要、美容系の医療機関のサイトが、効果を誇張していたり、リスクが分かりにくかったりで、消費者のクレームが増えたので、厚労省が広告配信の規制を検討するというも…
私は、Webメディアに訪れるユーザーの行動などを分析し、課題を発見して、改善する仕事をしています。そこで、「ユーザーの行動を分析するうえでかかせないGoogleアナリティクスの使い方」について解説していきます。 Googleアナリティクスの使い方がわから…
属性セレクタ class属性やid属性も含め、特定の条件を満たす属性（href,targetとか）で指定できるので、 動的に吐き出される要素と相性が良いので重宝します。 擬似要素・擬似クラス CSS3セレクタで追加された「:not()」 W3Cでは「E:not(s)」という風に説明…
この記事は、さらに読みやすくするため、 下記URLにお引越ししました！cssのfloatを解除する方法 | Dev.Designer's Diet Bloghttp://diet-dev.com/2017/08/26/css_float_layout/
DJしてたのなんて、10年も昔の話です。 あの頃はホント夢中になってやっていたので、今の音楽の趣味は、ほぼあの頃のままだし、今もたまにムズムズと、MIXしたくなる。 誰のためでもなく、自分のために作ります。まとまったMIX CDを作りたくなる時は決まって…
破綻しやすいCSS（その１）「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: …
よりよい設計のゴールとして、GoogleのエンジニアであるPhilip WaltonさんのBlogを引用すると。 予測しやすい事（Predictable） 再利用しやすい事（Reusable） 保守しやすい事（Maintainable） 拡張しやすい事（Scalable） 予測しやすい事 これは、思った通…
リンクは、他のページのURLを指定するだけでなく、特定の場所まで移動させることもできます。 リンク先の指定には、タグについているCSSのid属性を使用します。 <a href="saki.html#aaa">aaaの位置へ遷移</a> リンク元のページのこのaタグをクリックすると、 下記のページだけでなく、こ…
ココに書かれたプログラムや説明文は 高橋 征義 (著), 後藤 裕蔵 (著), まつもと ゆきひろ (監修) (2013)"たのしいRuby 第4版" ソフトバンククリエイティブ から引用しています。_____________________________________________________________ 配列の要素…
師匠が言ってた。 好きなのに理由なんて無いだろ。 好きだという事が何かの理由なんだよ。 って、"好きだという事が何かの理由なんだよ。" って、ちょっと意味分からんけど、 とても安心する言葉と思った。 なんか、多くの人が理由を求める人が多い気がする。…
