スマートフォンの普及率が全世帯の62.6％となり、個人でみると20～29歳は83.7％になった。一方でパソコンの普及率はじわじわと減少し、20～29歳ではスマホを下回る78.8％だ（総務省「平成25年通信利用動向調査」調べ）。ふだん使う端末の影響だろう、若者は文字をフリック入力でつづり、キーボード離れがすすんでいる。 この現象は、偏差値60近い大学に通う学生でも事情は変わらない。 「同級生に、両手の人差し指でキーを探しながらキーボードをよちよち打っている人がいますよ。それでレポートも書いています。だからといってデジタル全般が苦手というわけじゃなくて、スマホだと両手でものすごく速くシュッ、シュッとやっているんです。そこまで極端じゃない人でも、私自身もキーボードよりもスマホのフリック入力のほうがラクですね」（都内の女子大学生） 神奈川大学非常勤講師で情報処理を教える尾子洋一郎さんも、教え子たち

今年見かけたアイコンセットの中で、個人的に好みだったものやダウンロードしたアイコンセットの備忘録です。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 アイコンによってはフリーで使用・ダウンロードできるのは一部のみで、すべてのアイコンを使用・ダウンロードしたい場合は有償になるものもあります。

社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は 「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ です。 流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^; 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。 ① Heroku Heroku を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は Git で push するだけ です。 商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デ

目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellで関連記事の表示で良く使うリストスタイルのデザインを作る方法　←今回はこれ 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 まずtable-cellの基本的な書き方はこちらの記事をご覧ください。⇒【CSS】table-cellで関連記事の表示で良く使うリストスタイルのデザイ

グーグル、ウェブやアプリにも使える｢マテリアル・デザイン｣なアイコンをリリース2014.10.22 15:0014,206 統一感って大事です。 グーグルが｢Androidバージョン5.0（Lollipop）｣と共に発表した｢マテリアル・デザイン｣。これは、デバイスに依存しないデザインコンセプトであるため汎用性が高く、ウェブにも応用できる優れものです。Androidアプリの開発者でなくても、デザインの参考になるものでしょう。

twitter facebook hatena google pocket スクロールした際になんらかのエフェクトがあると注目を浴びさせることができると思います。 jQueryプラグインのcrossfade.jsを利用すると画像をぼかして、印象的にすることが可能です。 sponsors 使用方法 crossfade.jsからファイルをダウンロード。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="crossfade.jquery.js"></script> <script> $(function(){ $('.crossfade').crossfade(); }); </script> 上記を記述した

2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ

周りの多くがSublime Textユーザーという中、乗り換えるタイミングを見失ってしまいなぜか未だに「Coda 2」を使っているg.O.R.i（@planetofgori）デス。こうして記事の冒頭で名乗ったのは久しぶりだ。 さてさて、「OS X Yosemite」にアップデートし、新しいUIにも慣れ、少しずつサードパーティアプリもアップデートされている。中でもサイトのコーディング用に使用している「Coda 2」は、「OS X Yosemite」に合わせてアップデートしたのだが、実は待っていても一向にアップデートされない。一体なぜか。 実は「Coda 2」の最新バージョン「Coda 2.5」はMac App Storeから取り下げ、直販に切り替えたのだ！僕と同じく「Coda 2」を使っている人は公式ページに直接アクセスし、「Coda 2.5」をダウンロードそしてインストールするべし！ 既に

一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種

iPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。 まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。