非常に興味深い記事を発見しまして、そこからわが家の自閉症スペクトラム（アスペルガー症候群）の当事者3人に起こっていた事の裏付けになりそうなので、ちょっとまとめてみようかと思いました。 福井大学と金沢大学の合同チームが発見したもので、【自閉症スペクトラムの人の脳は、相手の心を理解する部分と、自分の考えや行動を司る部分のつながりが弱く、ほとんど連携していなかった】というものです。対して定型発達者は、両方の部分が相互的に連携しているのが、MRIで確認できたとか。 この【人の心を理解する】と【自分の考えや行動】の関係には、非常に思い当たるものがあります。以前にも発見された【発達障害の場合、左脳前部と右脳後部のつながりが弱い傾向にある】という記事と合わせて考えると、いくつかの特性の裏付けになりそうな気がします。

レスポンシブサイトでメニュー等のナビゲーションを扱う際、 PC向けレイアウト時にはボタンをページ上に並べ、 スマートフォン向けレイアウト時にはボタン一式を折りたたんで ハンバーガーボタンでメニューを開閉させるUIにすることで スマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。 そんなレスポンシブ対応のナビゲーションメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったらスマートフォン向けのナビゲーションに切り替わります。 PC向けナビゲーションではボタン類は画面内に横並びですべて表示されます。 スマートフォン向けナビゲ

特に自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。 ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。 全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。 November 16, 2017

Web担当者に向けたGoogleAnalyticsの機能解説。前回ご紹介した基本の5つの設定に加えた8つの機能を今回はご紹介します。実践的な内容も含みますが、前半分と加えて使えば鬼に金棒です。 損しないよう、この機会に一度、設定を見返してみましょう。 １. 広告やキャンペーンの計測 初期設定では取得できないデータを計測する場合、計測方法は大きく2つあります。 AdWordsからの流入 その他広告キャンペーンやメルマガからの流入 それぞれの設定について説明します。 AdWordsからの流入 GoogleAdWordsのアカウントをAnalyticsと連携すると広告グループや広告キャンペーン、キーワードなどの情報が自動的に計測出来ます。こちらを連携させてみたいと思います。その際、AnalyticsへのログインはAdWordsにログイン出来るアカウントを使用する必要がありますのでご注意ください。

チートシートで使われているサンプルコード コマンド gulpをグローバルにインストール: $ npm install -g gulp gulpをローカルにインストール: $ npm install --save-dev gulp $ npm install --save-dev gulp-other-plugins タスクを実行: $ gulp task_name 複数タスクを実行: $ gulp task_name other_task JavaScript: gulpfile.js Single Dest & Watch Multi Dest Incremental Rebuilding Only Changed Async Streams Serial Join Stream Array CoffeeScript: gulpfile.coffee Single Dest & Watc

HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。

ここのところのgulpの勢いに負けて、自分もついにGruntからgulpに移行しました。gulpはGruntと同様フロントエンド開発用のタスクランナーです。最初はGruntとそれほど変わらないだろうと思っていましたが、タスクを書いてみるとその違いがすぐにわかりました。シンプルに書けるだけでもgulpはかなり良いです。今回、自分の理解を深めるついでに基本的なタスクの書き方をまとめてみました。 gulpの特徴まずgulpの特徴を簡単に書いていきます。 ストリーム: gulpは、「the streaming build system」と言われているようにNode.jsのストリーム（ファイルのパスとファイルの中身の情報を持ったオブジェクト）を使って処理を行っていきます。そのため中間ファイルを生成することなくタスクが実行されていくため高速に処理がなされます。並列処理: さらにgulpは、処理が一つ一

CSSの「:hover」疑似クラスを使えばマウスオーバー時にその要素に対して何らかのスタイルを適用させることが可能ですが、:hoverエフェクトを指定した要素以外の要素にスタイルを適用させたいときには隣接要素の場合は「+」、兄弟要素の場合は「>」として以下のようにします。 <style type="text/css"> <!-- #test:hover{ background-color: blue; } #test:hover + #target{ background-color: red; } #test:hover > #inner{ background-color: green; } #test:hover > #inner:hover{ opacity: 0.7; } --> </style> <div id="test"> <div id="inner"></div> </

このブログは、css3 で実装されたアニメーションを直感的に理解しマスターできるように作成しました。 なので、細かい説明、パラメータは省きます。 css3 のアニメーションで何ができるかを学んでいただければ。 ブラウザの世界では、今まではjavascript(Jquery) Flash などでアニメーションを実現してきた。 それが、人類の限界と思われていた、、、が、、、、、、、、 確かにある。 css でアニメーションを実現できる方法が。 最初は私も混乱しましたよ。 何せ、css3で追加されたアニメーションに深くかかわるプロパティが複数あんですから。 いや、基礎的な要素もアニメーションに欠かせませんよ。 でも、いろいろあると言っても、やはり css3 で追加された transform 形を操る。歪み、移動、回転など。 transition 動きを与える。Transform と

jQueryで特定のHTML要素にcssプロパティを追加/変更/削除する記述方法をメモします。 jQueryでstyle属性を直書きする場合は css( )メソッドを、cssを追加、削除する場合は addClass( ) / removeClass( )メソッドを使用します。 まずは、事前にhtml内でjQueryを読み込んでおきます。（既に記述済みの場合はいりません） <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 書式 jQueryでstyle属性を直書きしたい場合は「css( )」メソッド ひとつのstyle属性の場合 $('要素').css('プロパティ', '値'); 複数のstyle属性を設定する場合 $('要素').css({'プロパティ':'値

こんにちは、WEBマーケティング部の杉尾です。 今回はCSSで要素を横並びにする方法の第四回目として、 『display: table-cell; 』を使う方法を紹介します。 ⇒ソースだけ見たい方はコチラ floatでの横並びはコチラ ⇒【CSS】floatとclearfixで要素を横並びにする方法を紹介します（前半はfloatの説明） 『display: inline-block; 』での横並びはコチラ ⇒【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話） CSSで横並び 第四回目 displayプロパティについて 前回、『display: inline-block; 』で要素を横並びにする方法を紹介した際に、 displayプロパティについての説明をしました。 これは、HTMLタグで書いた要素をどのように表示するか指定す

コンテンツ幅よりも大きい画像を配置し、ウィンドウがコンテンツ幅より小さい時にだけ横スクロールバーを出す方法です。 今回は主な方法を3パターンご紹介します。配置したい画像や他の要素のスタイルによって使い分けてみてください。 よくある失敗例 まずはよくある失敗例をご紹介します。こんな風になってしまったことはありませんか？ コンテンツ幅ではなく、画像の幅で横スクロールバーが出てしまう……。 コンテンツ幅からはみ出す部分が表示されない……。 ウィンドウを縮めると背景部分がずれてしまう……。 そもそも横スクロールバーが表示されない……。 こんな大変な状態とは無縁の、キレイなコーディングの方法を見ていきましょう！ 達成したい条件 コンテンツ幅より大きい横幅の画像を配置 画像は左右中央に配置 ウィンドウ幅を大きく（小さく）しても、画像の位置がずれない ウィンドウ幅がコンテンツ幅より小さい時にだけ横スクロ

前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル

こんにちは、てっちゃんです。 みなさんはお花見しましたか？今年は安定した暖かさで例年よりもすごしやすかったなと思いました。 そして、私事ですがこの春から花粉症デビューになりそうというお話をいただきまして、毎日マスクが手放せません。いやー、のどのイガイガがたまらなく嫌ですね。 今回は、cssの設計について調べたことを書いていこうと思います。 弊社でもフロントエンド陣によりある程度のコーディングガイドラインは決まっていますが、 記述の細かい仕様までには及んでいません。コンポーネントの作り方なども人によって差異が出てきます。 複数人で作業とも慣れば尚更その差異は大きくなります。cssは記述自体はとても簡単でそれゆえに、とてももろくすぐに壊れてしまいます。 参考：なんでCSSすぐ死んでしまうん そこで壊れにくcssを設計するためには以下が重要だと言われています。 拡張性 保守性 明瞭性 参考：CS