http://web-director.info/archives/4258
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
SEOの健康診断を10分で行う方法 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
出張が続いて更新を怠っており失礼しました。今日からまた地道に記事投稿を再開させていただきます。ということで、久々の記事はあなたのサイトのSEOの状況を10分でチェックしてみようという日常的にSEOに取り組んでいない方にはピッタリの記事を。 — SEO Japan SEOに詳しいものの、全体像をつかむことに苦労しているデジタルマーケッターは多い。 そのため、ウェブサイトのSEOを一目で理解する能力は、重要であり、磨きあげていく必要がある。大変だと思うかもしれないが、実は、10分もあれば全体像を把握することが可能である。しかも、高価なツールを利用する必要もない。 今回紹介するステップを参考にして、ウェブサイトの健康をチェックし、競合者の取り組みを確認し、SEOを改善する上で必要な作業を発見してもらいたい。 これから、大まかな概要を説明していく。今回は、具体的なSEOの分析方法を取り上げるつもり
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ブログをノベルゲーム風に表示する - 日直地獄
ノベルゲーム風に日記を書いてみたいと思ったことはないでしょうか。 書けたら面白いかもと思うけれども、特にそんな需要は無いんじゃない？くらいでしょうか。 私もそう思います。 とはいえ、実際に見てみないと評価できない、と思ったので作りました 機能紹介 テキストの表示 このように一文字毎に表示されます テキストのスキップ 文字送り中にマウスをクリックすると、パラグラフ全体が表示されます 背景画像の設定 文章中にimgタグがあると、自動でbackground-imageに設定されます フルスクリーン表示モード フルスクリーンで表示することが出来ます。人の日記をフルスクリーンで読みたいという需要はあるでしょうか ブラウザで可能な表現が可能！ HTML読み込んでいるだけなのでだいたいなんでもできるはず!! やったね！！！ 以上です。おわり。ところで、完成して色々な文章で試していたら、読みやすいのでは？
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
CSS3でバウンドするアニメーションが簡単に作成できるジェネレータ「Bounce.js」 | ライフハッカー・ジャパン
PayPayカードのメリット・デメリット|怖いと言われる理由と評判レビュー。ゴールドと一般どっちがおすすめ?
スマホユーザーの過半数が広告嫌いかもしれなくて震えた – 55.5%が「自ら意思を持って広告をクリックしたことがない」 | sakedrink.info
This domain may be for sale!
米国で行われている経済徴兵制とは
西沢大良 @tairanishizawa →集団的自衛権が容認されると、過去10年間米国で起きてきたことが日本でも起ります。つまり仕事をしたい人・お金が必要な人にたいして、特殊な人材派遣会社から電話がかかってくるようになる。別に若者だけじゃあないよ。中高年であれ女性であれ、電話がかかってくるようになる。 2014-07-01 02:56:45 西沢大良 @tairanishizawa →西沢の知人S（米国人、西沢と同年齢）は、タクシー会社をクビになっった数ヶ月後、その手の電話をもらった（約10年前）。「就活イベントに参加しませんか」と。「Sさんの経歴を見込んで仕事をご紹介させて下さい」と。「ご自宅のある街で就活イベントを開きますので、ぜひご参加下さい」と。 2014-07-01 02:58:32
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
47NEWS（よんななニュース）
［能登半島地震・石川県］被災の志賀原発、外部電源の一部使えず完全復旧に少なくとも半年 北陸電力、施設の安全に「影響なし」
机の下にベッドが付いてます。会社で快適に眠れます…。終電で帰れない激務の人におすすめ。 : インテリア雑貨の伊勢海老太郎ブログ
どうも、おもしろい雑貨が大好きな伊勢海老太郎です。海外サイトでおもしろい雑貨を見ていたら、おもしろい机を見つけました。でも人が机の下で寝ています。ベッドのようにも見えますが…。これは何なのでしょうか。 実は机の下にベットが内蔵されている机です。これなら激務で終電を逃しても大丈夫です(笑)。どうせ会社に泊まるなら、椅子を並べたり床に横になったりしないで、少しでも快適に寝ちゃいましょう(笑)。 会社の机にベッドが付いていたら「終電で帰れないの？」 「そんなに忙しいの？」「この会社ブラックなの？」と新入社員は思うかもしれません…。 日中は少し大きめの机です。大きさ以外はいたって普通です。 机の上の板が何やらスライドしています。 机の側面の壁は取り外しができるようです。開放感がありますけど、会社で使うなら壁は欲しいですね(笑)。よく見るとテレビもあるようです。けっこう快適に過ごせるかもしれません。
センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ
作成：2014/06/30 更新：2014/11/01 Webデザイン > サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．グラデーション＋フラットデザイン ２．ダッシュボードの配色例 ３．高級感を出す配色 ページ別 ４．採用ページ ５．404ページ 職種別 ６．和菓子系（不足の美） ７．女性向け（エディトリアルデザイン） ８．医療系 ９
スタートアップにおけるデザイナーの存在意義とは？「Design dot BEENOS vol1」レポート #BEENOS - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
スタートアップに関わる人々のためのイベント「Design dot BEENOS」が新しくスタートした。筆者は6月27日（金）に開催された初回のイベント「スタートアップにおけるデザイナーの存在意義」に参加した。 「Design dot BEENOS」はBEENOSが主催するイベントだ。アマゾンデータサービスとの共催となっており、コンセントのUXアーキテクトにして書籍「Lean UX」の監訳者でもある坂田一倫氏と共に開催するイベント。 初回には、スタートアップの創業者であり、経営者であり、デザイナーでもあるQiitaの小西智也氏が登壇し、自身の経験を語った。 小西智也氏は、Increments取締役、創業者兼デザイナーとして、これまで「Kobito」「Qiita」「Qiita:Team」の3つのプロダクトの開発に携わってきた。スタートアップは、限られたリソースで、何が当たるかわからない中プロダ
コピペで使える！ CSSで凝った背景を作るサンプル集 | ライフハッカー・ジャパン
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？ 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性
リスティング担当者から見た、イケてるランディングページ10選（2014年ベスト10） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！幼稚園くらいの時、ウルトラマンに出てくる「ダダ星人」という敵のあまりの怖さに号泣し、吐きました。 メディア事業部のきょうへいです。 以前「リスティング担当者から見た、イケてるランディングページ10選」という記事を書かせていただきました。 この記事を書いたのは2012年なので、そろそろ新しい記事を書こうと思い、2014年版を発表することにしました。 2012年のLP、2014年のLPと見比べてみるのも面白いかもしれません。 Nike Football リスク上等. Nike.com http://www.nike.com/jp/ja_jp/c/football/riskeverything 世界29都市で同時開催された超攻撃的な変則フットボールマッチ、「WINNER STAYS 激戦上等」というイベントのLP。 イベント自体は既に終了していますが、イベントの詳細情報、アプリのダウ
フルスタックエンジニア講座 http://fullstack-engineer.com/ の集金口座っぷり - いろいろやってみるにっき
出遅れた感ｗ(挨拶)。 フルスタックなスキルを身につける即戦力エンジニア養成講座「フルスタックエンジニア」 最初見掛けたときは暇つぶしにiPhone5cを見てた電車内だった。トップページでフルスタックさが伝わってこなかったので、[ネタ]タグだけでブックマークして忘れてたｗ。 今までフルスタック話は極力スルーしてきたのだが、こういうネタには参加しておきたいｗ。スルーの理由は、フルスタックエンジニアって結局これといった定義も無いバズワードなんで、色々文句や突っ込みは入れやすいけど、だからどう？っていう話。 以降の話は「フルスタックエンジニア」なる技術者を求めるプロジェクトは、ベンチャーなどのコンシューマ向けサービス構築プロジェクトだと仮定する。少数精鋭の。 B2Bはちょっとプロジェクトの組成も金の出方も違う気がするし、B2Cでも金融機関などのプロジェクトではSIer仕切りで人がわさわさいるから
Photoshopで、任意のレイヤーを別ファイルの同一座標に複製する。｜会社辞めブログ
やぁみんな！ atomだよ！ 今日は、複数のPhotoshopファイルで作業をするときの、ちょっとしたコツを書いていくぞ。 Photoshop のファイルAからファイルBへ同一座標でレイヤーを複製 Photoshopでデザインデータを制作していると、あるファイル（A）から別のファイ（B）の同じ場所に、レイヤー（グループ）を持って行きたいときって、あるよね。 そんなときは、「レイヤー（グループ）を複製」メニューを使うといいんだ。 たとえば。。。 ヘッダー画像のデザイン作業ファイル（ex.header-design.psd）から ヘッダー以外の部分の決定稿ファイル（ex.base.psd）に、ヘッダー画像の決定稿を移したい。 レイヤー（グループ）を複製 そんなときは、両方のファイルを開いて、複製元（この場合はheader-design.psd）の移したいレイヤー（グループ）を右クリック。 「レ
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 スケールダウンの仕組み 実装はこんな感じになります。 HTML まずは上部のコントローラー、このラジオボタンで各タブの動きを制御します。 デザインを変更して利用したり、タブのみにしたい場合は非表示にするのも有りですね。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-c
「素直に承諾したものが損をする」というシステムへの疑問 - いつか電池がきれるまで
先週の『怒り新党』で、こんな投稿が紹介されていました（記憶に基づいて書いているので、ディテールは違っていると思います。ご容赦を） わたしは、家電量販店などの「店員さんと交渉すると安くなるシステム」が許せません。 あーだこーだと値引きを要求する人のほうが安く商品を買うことができ、何も言わずに店の言い値で買ってあげる善良な客は、表示価格で買って損をするというのは、おかしいと思います。 ああ、僕も「店員さんと価格交渉とかするのはめんどくさいし、それでも一応交渉はして、最初の条件提示くらいで引き下がってしまう」ので、この人の気持ち、わかります。 去年、車を買い替えたときも、「あんまりギリギリのところまで交渉して値引きさせようとして悪い印象を与えるよりは、『良い客』だというイメージを植え付けて、アフターサービスをしっかりしてもらったほうが良いのではないか」とか、自分に言い聞かせたりしていました。 ま
Google純正 WordPressプラグイン『Google Publisher』 - H2O Blog.
Googleが WordPress用の純正プラグインをリリースしました。現在βテスト中です。 プラグイン画面から「Google Publisher」などで検索をしてインストールすると、設定画面に項目が増えます。 最初に Googleアカウントと接続する必要があり、それが済むと次の2つの機能が使えるようになります。 Google Adsense挿入機能 Google Webmaster接続 特に、Webmaster接続はこれまで「Google XML Sitemaps」などの別のプラグインを使っていましたが、純正プラグインでできるようになると、いろいろ楽ちんで良いですね。Google Analyticsの操作もできるようになれば良いのに・・ 管理画面を見ると、JetPackと同じような構成になっているので、今後どんどん機能が増えていくのかも知れません。楽しみですね。 WordPress ›
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すぐに使える！アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop
Flipsblog.jp
