Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
登録数2倍にしてと言われた時の正しい対処法
コミュニティマネジメントとは何か、なぜ今重要か / これから始めるコミュニティマネジメント入門 (1)Takaaki Umada
無料で使えるWordPressテーマ「Simplicity」が良い。
このブログはWordpressを使っているのですが、その中でSimplicityというテーマを使用しています。 ブログを開始するにあたって、自分で作ろうか有名どころのテーマをカスタマイズしようかどうしようかと迷っていたところ、調度良いタイミングで、フォロワーのわいひら(@MrYhira)さんという方がテーマを公開されていたので、「これはなかなかよさそう」だと思い、 ちなみに、わいひら(@MrYhira)さんは、頸髄損傷でほぼ寝たきりの生活をしつつ、寝ログというライフハック系ブログを運営されたり、テーマを公開したり、フリーソフトを公開していたりと、パワフルな方です。 ここからはSimplicityを簡単に紹介します。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEOの最適化 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル 手軽に収益
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
WordPress を使いこなそう
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
USBメモリ内にWordPress用のローカル環境を5分で構築、持ち運び可能なフリーのソフトウェア・Instant WordPressが超便利っぽい
昨日初めて知ったんですが、今まで知らずに損してた、みたいな気持ちになったので、同じ思いをする人が一人でも減るようにと思ってご紹介。ソフトを解凍するだけで、WordPressのローカル環境を構築できる、というソフトウェア。USBで持ち運びも可能。 今まで知らずに損してましたｗこれ、有名なのかな・・・ Instant WordPressをUSBメモリやポータブルHDDなどにダウンロードして、自動セットアップするだけで、WordPressをローカル環境を構築、その環境ごとUSBフラッシュメモリで持ち運びも出来てしまいます。構築まで5分くらいで出来ましたよ。これは便利だなーって思いました。 WordPressを環境ごと持ち運び出来ます。覚えておくとかなり役に立つ気がします。 出先でクライアントさんと打ち合わせ中にWebに繋げなくても直接見せて動作確認することも出来るし、自宅のデスクトップでいつも作
試しておきたい、PHPで動作するオープンソースなオススメCMS 5選。 » とりあえず9JP
この記事ではオープンソースなオススメCMSを5個紹介します。 ※ブクマコメントやツイートでいくつか他CMSの名前が挙がっていたり、リプライ等頂いたので、下部にて別枠で紹介させて頂きます。 コーポレートサイトの制作に特化したCMS。 いわゆる、中小企業の自社紹介サイト系を作成する場合に、十分な機能が組み込まれている。 ・ユーザ管理 ・ページ管理 ・簡易ブログ（ニュースリリースなど複数設置可能） ・メールフォーム（複数設置可能） ・フィードリーダー ・携帯サイト ・Twitter連携機能 など。 また、対応しているDBが、SQLite、MySQL、PostgreSQLと幅広く、更にはCSVでの利用も可能な変り種。 殆どのレンタルサーバ上で動作すると思うので、導入の敷居は非常に低い。 ライセンスはGPLと商用ライセンスの2種類。 株式会社日本情報化農業研究所が提供している国産のCMS。 主に一般
Facebook APIのつかいかた (OAuth 2.0) - Censorable log
FacebookのAPI、以外と日本にまとまった文献が少ない。 日本語版が少ないのと、コロコロ仕樣が変わっているせいだ。 「Facebook Connect API」なんかで検索しても、ぜんぜんいいページに辿りつかないので書く。 Twitterにくらべて、FacebookのOauth2.0 APIは、すごく簡単にできている。 Twitterもそうだが、「認証して見れるデータ」と「認証しなくても見れるデータ」の２種類がある。 認証しなくても見れるデータのほうが、セキュリティも低いし、入力もプログラムもカンタン。 ■認証しない系 たとえば、ぼくの基本情報は、 https://graph.facebook.com/hiroki.nakamura https://graph.facebook.com/●●●● こんだけ。 これで、基本情報がJSON形式で、充分とれる。 さらに、 https://g
Webサイトをgithubで管理してpush時に自動的に同期する方法 - Blog by Sadayuki Furuhashi
Webサーバに Subversion のサーバを立てておき、HTML や CSS を commit することでWebサイトを更新する方法は、良く知られているテクニック、らしいですね*1。更新の履歴を残すことができるし、ましてチマチマとFTPやsftpでアップロードするよりずっと簡単です。 しかし SVN の代わりに git を使おうとすると、pushしてもリポートリポジトリではファイルを更新してくれません。 また、リポジトリはWebサーバ上に作るよりも、便利な管理インタフェースがある github（や噂のgitosis）に置いておきたいところです。 そこで、github の Post-Receive Hook を使うと、リポジトリに変更を push すると同時に、Webサーバにも同期させることができます*2。 Webサーバに同期する前に、Sphinxでドキュメントを整形したり、SassをC
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
2011年2月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル
先月の記事が相当人気でしたので今月もやります。また今月も人気なら来月もやります。 これは Web サービスに使えると思った情報 Web サービスを作りたくなるアイディア込みの記事 今年こそWebサービスを作りたい人に伝えたい５つのこと（＋番外編） – パパパパ この記事は精神からではなく、アイディアから Web サービスを作りたくしてくれる記事でした。私はこの記事を通して以下のことを学んだというか勝手に気づいたのでリストアップしておきますね。 ブログパーツを作って宣伝をする。 自動的に一周するサイクルを考える。 面倒くさいものを作ることで大手に参入されない。 時間を短縮する関係のサービスを作る。 食べログとぐるナビから Web サービスの現在と今後を見る [jp]グルメサイトは転換期に来てるんじゃないかなあという話 この一点に置いて、私は個人的にグルメ系の Web サービスとは誰かが得
jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」:phpspot開発日誌
jqmPhp | HTML Code Generator for jQuery Mobile Framework | jqmPhp jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」。 次のようなコードにより、簡単にjQueryモバイルのページを作れます。 <?php include 'lib/jqmPhp.php'; $j = new jqmPhp(); $j->addBasicPage('', 'Hello World', 'It's works!'); echo $j; ?> addBasicPageメソッドによって、jQueryモバイルでのページを簡単作成可能。 単にページの追加だけではなく、ボタンを追加したり、各種コントロールの追加がPHPで出来るところが特徴です。 以下、jqmPhpで作ったページデモ。実際に動作するデモページはこちら このスマートフ
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
RSS全文配信してると記事を丸々転載されてしまうので、WPプラグインを使って逆に転載サイトを利用してみる
マンガ：Webディレクター 江口明日香が行く
