タグ

2015年3月17日のブックマーク (7件)

  • 今すぐSublime Text を消してAtom をダウンロードすべき5つの理由

    今すぐSublime Text を消してAtom をダウンロードすべき5つの理由
  • ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」:phpspot開発日誌

    Slideout.js - A touch slideout navigation menu for your mobile web apps. ネイティブアプリに近い動作のサイドメニューWeb実装「Slideout.js」。 ネイティブに近い実装をするのはなかなか難しいですが、比較的いい感じの挙動のサイドメニュー実装がJSのみで実現できます。 関連エントリ シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • 安全なウェブサイトの作り方改訂第7版の変更点と変わらない点

    IPAの安全なウェブサイトの作り方 改訂第7版が公開されました。 このエントリでは、安全なウェブサイトの作り方の元々もつ特徴(変わらない点)と、第7版の変更のポイントについて説明します。 なお、私は安全なウェブサイトの作り方の執筆者の一人ではありますが、以下の記述は私個人の意見であり、IPAを代表するものではありませんので、あらかじめご承知おきください。 安全なウェブサイトの作り方の変わらぬ特徴 安全なウェブサイトの作り方の特徴は、「まえがき」の中で述べられています。 書は、IPAが届出を受けたソフトウェア製品およびウェブアプリケーションの脆弱性関連情報に基づいて、特にウェブサイトやウェブアプリケーションについて、届出件数の多かった脆弱性や攻撃による影響度が大きい脆弱性を取り上げ、その根的な解決策と、保険的な対策を示しています。 すなわち、以下の2点がポイントと考えます。 脆弱性の選定

    安全なウェブサイトの作り方改訂第7版の変更点と変わらない点
  • ここまで動かせる!楽しいcss アニメーションのサンプル集 - コムテブログ

    TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル 1.アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s

    ここまで動かせる!楽しいcss アニメーションのサンプル集 - コムテブログ
  • Googleが勧める、SEOで今注目の2つの技術はJSON-LDとWeb Components

    [レベル: 上級] Googleはウェブマスター向け公式ブログで、JSON-LDとWeb Componentsの2つの技術を共に使うことを推奨しました。 JSON-LDとは JSON-LDは、Linked Data(リンクト・データ)を記述するためのフォーマットです。 SEOにおいては、構造化データのボキャブラリの1つであるschema.orgを記述するシンタックスとして利用できます。 構造化データとしてのschema.orgやJSON-LDについては、このブログで詳しく解説してきましたね。 [構造化データ初級者向け] schema.orgとMicrodata、RDFaって何が違うの? 【徹底解説】JSON-LDを使ったschema.orgの記述方法 ゼロから始めるセマンティックSEO&構造化データ at CSS Nite LP36 schema.orgのこれまでと今、そしてこれから at

    Googleが勧める、SEOで今注目の2つの技術はJSON-LDとWeb Components
  • 【徹底解説】JSON-LDを使ったschema.orgの記述方法

    [対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。 CSS Niteで講演 2014年9月20日(土)に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。 僕は出演者として登壇し、セマンティック検索と構造化データ、schema.orgをテーマに公演しました。 このなかで、JSON-LDの使い方についても説明しました。 [撮影:飯田昌之] 参加者には録画した動画とスライドが提供されています。 年内には(無償で)一般公開される予定です。 ですが、JSON-LDを使ったschema.orgをもっともっと多くのサイト管理者に使ってもらうことが僕の希望です。 3か月近くも待たせたくありませ

    【徹底解説】JSON-LDを使ったschema.orgの記述方法