『超次元ゲイム ネプテューヌmk2』 の公式サイト を見てたら、ナビゲーションリンクがふわふわしてておしゃれな感じだったので、似たような動きをするものを CSS3 で実装してみた。 (元は Flash ぽい。) ↑ こんなの デモ 実際のコード JSFiddle にあるので興味があればどうぞ。 ふわふわナビゲーション - jsFiddle 使ってるもの 以下のような CSS の機能を使ってみた。 CSS Animations : CSS Animations CSS アニメーション - Web developer guide | MDN CSS Transitions : CSS Transitions transition - CSS | MDN CSS Transforms Level 1 *1 : CSS Transforms transform - CSS | MDN メモ ふわふ
__papix__ 君が主催をして開催している Perl入学式 というイベントがあります。Unix/Linux/OSXの環境構築から始まり最終的にはWebアプリケーションをつくるハンズオン形式の勉強会を今年は年6回に分けて開催しているようです。かなり丁寧にPerlを教えているという印象があって、それがどんな雰囲気か以前から気になっていたのですが、昨日「Perl入学式 in 東京 #2」にサポーターとして途中から参加させてもらいました。 簡単に感想を述べると「これはすごくいい」。肝は最適な練習問題が所々出され、するとみんな黙々とコーディングし始めるんだけど、それが終わると、参加者同士でコードを見せ合って「これで合ってるかな？」「私はこんな風に書いたよ」と言うようなコミュニケーションが生まれてたりしているのです。正直その様子を見て感嘆しましたよ。 ＊追記「Perl入学式の補講があるらしいよ！」
こんにちは、Kanaです。 日本らしい、和のデザインを担当したときに利用した素材サイトや、フリー素材をご紹介します。 和の雰囲気をもった無料で商用利用ができる素材って、そう多くはないんですよね…。 今後また和のテイストのデザインをするときのためにも、まとめておくべく記事にしました。 それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 2014/12/10：素材サイトを追加しました。 イラスト素材和柄商用フリー素材 WArgo Pattern（ワーゴパターン） こちらの素材サイトは和素材が非常に充実しています。和風イラスト、和風写真、和柄パターンなど、和デザインを作るにあたり、欲しくなる素材がたくさん集まっています。 WArgo Pattern（ワーゴパターン） 季節素材 夢幻華
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
他人のブログをパクり無断で公開！ 被害者の対抗策が凄い アメブロ広報「数件の通報が来ている」 - ガジェット通信 特定サイトから直リンクされた画像を一発で別の画像にする方法。 私のブログはともかく、不要な負荷が増えて嫌だなと思う場合に即効できる処置方法をご紹介。 mod_rewriteが入っているサーバ＆.htaccessが利くサーバの場合は以下のように書いて直リンクされた画像のディレクトリに設置します。 RewriteEngine on RewriteCond %{HTTP_REFERER} ^http://ameblo.jp/sfida2010/.*$ RewriteRule ^(.*)$ http://example.com/deny/unko.png [R=301] /images/ 以下に直リンクを受けている画像群がある場合は、/images/.htaccess として保存して下
Edit images directly in your CMS. Now as a plugin for Joomla 1.5. - Picture Editor, GD, PHP, Open Source, GPL WEB上で画像のリサイズ/回転/切抜き等が可能になるPHPのオープンソース「PHP Image Editor」が公開されています。 そのまま使ってもいいですし、CMSなんかの組み込み用に使ってもよさそう。Joomlaのプラグイン形式でも公開されています。 指定サイズにそのままリサイズする機能 左右に９０度回転する機能 範囲を選択して切り抜く機能 明るさとコントラストを調節する機能 デモを使ってみると結構便利でしたので試してみましょう。 関連エントリ オープンソースの便利PHPスクリプトまとめサイト「Open Source PHP」 オープンソースGoogleAnalytic
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
（13.07/05 14:39PM 追記） フリーの漢字フォントを集めたギャラリーサイト、しれっと開発しました。 「漢字フリーフォントギャラリー」 → 解説はコチラ 世にフリーフォントは数あれど、「日本語フォントで漢字が使える」となると、途端に希少になるのが２バイト文字の寂しさ。 そんな中いつも大変お世話になっている、一握の砂の如き「漢字が使えるフリーの日本語フォント」について、忘備録代わりに各フォントの簡単な使用条件、禁止事項の要約も含めてまとめてみました。 果てしなき道でも勇猛果敢に進む、フリーフォント職人の猛者達に敬礼！ その前に注意事項を少し。 当エントリー内にある各フォントの使用条件や禁止事項は、あくまで現時点（09年8月6日現在）での各規約をかいつまんだ、個人的なメモのようなモノですので、実際にフォントをご利用になる際は、必ず先方の利用規約やreadme.txtなんかを読んでく
今日は、SEO業界に特有な用語をさらっと解説します。SEO業界以外では使わないものや、ほかで使われているのと意味が違うものなど、知っておかないと、その筋の人と会話しづらくなるものに限定して紹介しましょう。 検索エンジンの仕組み関連オーガニック検索（オーガニックサーチ、自然検索）ユニバーサル検索（ブレンド検索）SERP（サープ）インデックスアルゴリズムQDFリンク関連リンクグラフ被リンク（バックリンク、インリンク、インバウンドリンク）リンクジュースリンクポピュラリティ（リンク人気）アンカーテキスト（リンクテキスト）有料リンクオーガニックリンク（ナチュラルリンク）nofollow（ノーフォロー）リンクビルディング（リンク構築）オーソリティ（オーソリティ性）その他SEO関連ブラックハット、ホワイトハット、グレーハットペイレベルドメイン名ワードサラダリダイレクトウェブマスターツール、サイトエクスプ
APIやRSSなどを提供しているサイトは、情報を簡単に扱うことができますが、例えば Yahoo!の検索結果とか、mixiのニュースとか、あるサイトの一部を取り出したいことってよくあります。（とはいえ、著作権違反には注意 そんな時、PHPのライブラリである「htmlSql」を利用すると便利。このライブラリに、ファイルでもURLでも文字列でも、HTMLで作られたものなら何でも与えると、解析して取り出しやすくしてくれます。しかも、その取り出し方はSQL！ 例えば、「id属性が’test’の p要素の内容を取り出したい」という場合には、次のようなSQLを使います。 SELECT text FROM p WHERE $id=="test" 超パワフル。ということで、これを CakePHPで利用するためのテクニック。 まずは、ダウンロードしたファイルの中から次のファイルを「app/vendors」フォ
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。 ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。 今回はこうしたウェブ開発を仕事としている人が利用しそうなツールをまとめてみたいと思います。 スケジュール管理 Googleカレンダー もはや説明不要のスケジュール管理システム。 ドラッグによる複数日数のスケジュール投稿は、なにかと連日作業になるウェブ製作にぴったり。 また、タスク管理も結合されたため、細かい作業などの記入も可能。なにより複数人での予定の共有もできるのが便利です。 メール Gmail もう使っている人も多数いるかもしれませんが、Googleが提供するGmailはかなり強烈なアプリケーションです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く