material uiはGoogleの提唱したマテリアルデザインを導入したCSSフレームワークです。各UIコンポーネントも用意されています。Reactとセットになっているみたい。まだよく調べていませんがなかなか良さそうです。年末に触れ・・たらいいなぁ。ライセンスはMITとの事。 material ui
WordBench Nagoya 11月勉強会の最後にアンカンファレンス(班別質問タイム的な感じの)をやった時、「Kさんが毎回必ず入れるプラグインを教えてほしい」という質問をいただいたのですが、残念ながらタイムアップとなったため、ブログにまとめることとなりました。 前提として サイトの用途によって必要なプラグインも変わってきますが、スタンスとしては クライアントワークで、企業サイトを作るというケースを想定 公式ディレクトリ登録プラグイン なるべく高機能ではない(負担の低そうな)もの 迷った時は国産(知人作) という感じです。 基本的なWordPress関数で済むような処理は原則として自分で書きますので、なるべくコードを書かずに表示をいじったり機能を追加したい、という方向けではないと思います。 ですので、よくある「使えるプラグイン○個まとめ」的なエントリーとはまた違ったプラグイン選定になって
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量(800bytes)プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
By Global Panorama 「検索エンジンといえばGoogle」と言えるほど世界中で使われているGoogle検索は、ブロック崩しができるなど隠れたキーワードや機能がコッソリ追加されていることでも知られています。そんなGoogle検索で知っていると便利な工夫や、ちょっとしたキーワードの追加で超絶便利にしてくれる35機能がDigital Trendsでまとめられており、その中から27の機能が日本語でも使えることが確認できました。 The 35 Best Google Search Tips and Tricks | Digital Trends http://www.digitaltrends.com/computing/the-35-best-google-search-tips-and-tricks/ 検索での句読点、記号、演算子 - ウェブ検索 ヘルプ https://supp
TL;DR 2014/12/01:続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 1.キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
コンテンツで信頼性をもつための方法を4つ紹介しているこの記事、後編となる今回は「言及されることで信頼性を高める」「連想から生まれる信頼性を活用する」について解説する。→前編をまず読む 3. 言及されることで信頼性を高める信頼できる人が積極的に共有していると、文句なく信頼できるものだ。 言及した人の信頼性が言及されたものにも付加される。Mozの読者なら、言及されることで信頼性が高まることは、問題なく理解できるだろう。 グーグルが検索クエリへの関連性が同程度と思われるコンテンツに優先順位を付ける際は、リンクをはじめとする言及が主要な要因として用いられている。 ユーザーも、共有に値する投稿なのかを判断する際に、誰かに言及されているかどうかを信頼性の根拠にする。こうした言及によって信頼性が高まり、口コミで広がるコンテンツが生まれる。 では、あなたのコンテンツが言及されて信頼性を獲得すためにはどうす
こんにちは!イラストレーターのあんみです。 最近はデジタルで手描き風にイラストを描くことにひっそりはまっています・・・! アナログのような表現ができるブラシを作ることが楽しいです^^ こちらの鉛筆ラフですが、実はPhotoshopで描いています。 今回はこのように鉛筆でスケッチを描いたように見せることができるブラシの作り方をご紹介しようと思います。 PhotoshopのバージョンはCS6です。 鉛筆ブラシの作り方 メニューの「ウィンドウ」→「ブラシ」を開き「楕円(ハード8)」を選択します。 「シェイプ」「滑らかさ」にチェックします。 「テクスチャ」にチェック ●パターンピッカーを開く→右上の三角▼をクリック→アーティスト→「麻布」を選択 ●「反転」にチェック ●拡大・縮小「50%」 ●明るさ「-10」 ●コントラスト「42」 ●「描点ごとにテクスチャを適用」にチェック ●描画モード「減算」
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
無料でストレージ容量無制限のクラウドストレージサービス「Hive」がスタート、Androidアプリも後日リリース予定 世の中には様々なクラウドストレージサービスが存在しますが、最近「Hive」と呼ばれる無料アカウントなのにストレージ容量が無制限という新サービスがローンチしました。Hive は香港のスタートアップが運営しているクラウドストレージサービスで、現在はベータ版として一般公開されています。このサービスの特徴は、無料でいきなりストレージ容量が無制限という点です。Hive はそもそもストレージ容量で収益を上げようというサービスではなく、広告とプレミアムアカウントの料金を収益の柱にしており、ユーザーアカウントを作成すれば即無制限になります。しかし、1 週間に 50GB までしかアップロードできないとか、動画以外は 1 ファイル上限 250MB までといった制限が付きます。また、無料アカウン
世の中には様々なクラウドストレージサービスが存在しますが、最近「Hive」と呼ばれる無料アカウントなのにストレージ容量が無制限という新サービスがローンチしました。 Hive は香港のスタートアップが運営しているクラウドストレージサービスで、現在はベータ版として一般公開されています。 このサービスの特徴は、無料でいきなりストレージ容量が無制限という点です。Hive はそもそもストレージ容量で収益を上げようというサービスではなく、広告とプレミアムアカウントの料金を収益の柱にしており、ユーザーアカウントを作成すれば即無制限になります。 しかし、1 週間に 50GB までしかアップロードできないとか、動画以外は 1 ファイル上限 250MB までといった制限が付きます。また、無料アカウントでも動画をストリーミング再生する場合などには広告が表示され、ファイルのダウンロード時やストリーミング再生時には
WordPressで複数の画像を横並びにしたいならWPCanvasプラグインが便利すぎた!2014.11.09 WordPressでブログ記事を書いていると、複数の画像を横並びにして表示させたいケースがあります。当ブログでは今までCSSで調整したり、テーブルを組んでからラインを消したり、相当の労力をかけて表示を試みていました。(これが本当面倒くさい・・) しかし、WP Canvas – Shortcodes プラグインを使うようになってからは、記事内に任意のカラムを簡単に指定することができます。 このような ⇒ 理論派 vs 感情派 の8つのブログ運用談義コンテンツも短時間で作れるようになりました。 ここでは、1分程度で2枚の画像を横並びにする工程を解説します。私のようにCSSやhtmlが苦手だったり、まったく分からない方にはとても便利ですね。 WP Canvasの設定方法① カラムを選択
この「いくつかのブラウザ」とは IE のことを指していると思われますが、href プロパティに絶対 URL を設定しなおすことで、URL のスキーム部分を取得できるようになります。 // http://www.example.org/ 上で実行しているものとする。 var elm = document.createElement('a'); elm.href = '/foo?bar#baz'; // IE 6 / 7 で絶対 URL を設定。 // elm.href = elm.cloneNode(false).href でもよい。 elm.href = elm.getAttribute('href', 4); // IE (少なくとも 8 ~ 11) で絶対 URL を設定。 elm.href += ''; elm.protocol // => "http:" elm.hostname
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。
単語を入力するだけでイメージにぴったりな画像を提示してくれ好きなカラーを直感的に探し出してカラーパレットやカラーコードを表示してくれるネットサービスが「Colores」です。 Colores http://colores.manugarri.com/ これがColoresのトップページ。単語を入力するテキストボックスがあるだけという超シンプルなデザインです。 例えば「tree(木)」と入力するとこんな感じでカラーパレットやイメージ画像をずらりと表示してくれます。 単語にぴったりの画像と、その画像に使われている主な色がカラーコード付で表示されるので、イメージにあうカラーコードをすぐに調べられるというわけです。 また、イメージに合うカラーパレットは正方形や…… 長方形で表示されるので、これをクリックすると…… Dribbbleというデザイナーのコミュニティサービスにジャンプ。入力した単語にぴっ
Illustratorでお絵かきをするのは楽しい!(っ´ω`c)♡ 自分はこんな感じで使っていますというネタを放流してみました。 先日参加したグループ展「Vectorial Love」でのライブペイント、Illustratorユーザーイベント「dot-Ai」などでセッションさせていただいた時のネタを含みます。 みんなも楽しくべジェるといいですよ!
Webページのテンプレートと言えば汎用的なものが好まれますが、ちょっと物足りないと感じることも多々あります。そんなときにはいっそのこと、特定の目的に合わせたテンプレートを選ぶのも良いです。 Mobile App Introduction Templateはまさに目的が明確で、モバイルアプリ紹介ページ用のテンプレートになっています。今時の画面デザインで紹介ページを作成する際にはぜひ! Mobile App Introduction Templateの使い方 こちらがメイン画面。フラットなUIで格好良いですね。 機能説明ページ。アニメーションもあります。 スライド式の説明ページ。 もちろんレスポンシブなデザインです。 スクロールすると表示されるツールバー。 Mobile App Introduction TemplateはTumblrに似たカラーリングのテンプレートになっています。後はアプリの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く