Web開発でIntelliJ IDEAを使うべきNつの理由 - Qiita
Nが何個かはまだ考えていませんが、Web開発でIntelliJ IDEAを使うべき理由について、いくつか書いていきます。 HTML部門 Live Edit IntelliJ IDEAには、Live Editという機能があります。 IntelliJ IDEA上で修正したHTMLおよびCSSを、リアルタイムでブラウザ側に反映させる機能です。 使用できるブラウザや反映できる箇所などに制限はありますが、画面を見ながらHTMLやCSSを調整する場合には重宝します。 (本当はスクリーンショットを入れるつもりでしたが、IntelliJ IDEA 13にしてから動かず…) Emmetサポート EmmetはZen Codingの後継で、少ないキー入力でHTMLに展開してくれます。 このEmmetをIntelliJ IDEAは標準でサポートしています。 機能的にはLive Templatesの一環で提供されて
個人的に決定版だと思う画像置換 @ WWWPArtisan
Web制作時に画像置換してますか？画像置換とは通常表示される文字列などの代わりに画像を表示するためのテクニックです。 画像置換は個人的には必須のテクニックだと思っています。なぜに必須なのかと言えば「コンテンツはHTML、デザインはCSS」だからです。 コンテンツとデザインを完全に分離させるために避けて通れないのが、コンテンツでありデザインでもある文字列の扱いです。 情報として文字列は表示すべきだが、見た目はきれいにデザインしたいという場合、現在、正式に勧告されているCSS2.1のプロパティだけでは役不足です（CSS3が正式に勧告されてブラウザがきちんと対応すれば改善されるでしょう）。そこで画像置換というテクニックが必要になります。 念のため自分の考えを言っておきますが、画像置換はスパム的なテクニックではなく、要は使う側の使い方次第だと思ってます。なぜなら、画像を表示するために使用されるim
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
RSSでベーシック認証よりアクセス制限されたページへリンクする方法 | WEBでいこう！
最近、クローズドサイト（ベーシック認証による制限サイト）を作成する機会がありました。 しかも、そのサイトの更新を効率よく通知するために、クローズドのRSSを配信したいとのこと。 使用する機会は、かなり少ないと思いますが、いざという時のために覚えておくとよいかも。 <item rdf:about="http://www.hoge.co.jp/"> <title>記事タイトル</title> <link>http://ID:PW@www.hoge.co.jp/</link> <description>記事内容</description> <dc:date>2011-08-05T00:00:00+09:00</dc:date> </item> 「http://www.hoge.co.jp/」にベーシック認証がかかっている場合、RSS内の<link>で「http://」と「www.hoge.co
角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス
Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/
アクセス解析に苦手意識を持つディレクターまたは別業種の人のための アクセス解析具体的やり方
先日「アクセス解析しました！」と言ってPVとVisit、アクセス元検索ワード上位25件のアナリティクス画面印刷データ"だけ"を渡されて、思わず切れそうになったナカムラですこんにちは。 今回はそういう意味不明なことをして恥をかかないようになるためのアクセス解析（主にGoogleアナリティクス）の基本について書きたいと思います。また、割とディレクター歴の浅い人向けの内容になる予定ですので、アクセス解析バリバリ！な方には少々物足りない内容になるかと思います。 なんでアクセス解析なんて面倒なことをするんだろう？ それは、ざっくり言い切ってしまえば、以下のような事を考えるため。もしくは考えるための指標を探すためです。 ・サイトの「良くないところ」を探して、改善する理由を見つけ出すため。 ・ユーザーが本当は何をしたいのか？を把握して「次このサイトでなんかやるとしたら 何しよう？」を考えるため。 ・ユー
Adobe Protoで作ったワイヤーフレームをPC上のDreamWeaverとかで開く方法 - undoのブログ
まるでスケッチブックに書くように、webサイトのインタラクティブワイヤーフレームを直感的に作れちゃうアプリ Adobe Proto ですが、このアプリで作ったワイヤーフレーム.proファイルをPC上で開く方法がわかりました。 情報元：Adobe Forums： Can I open Proto files in Dreamweaver? ※Adobe Protoとは http://www.adobe.com/jp/products/proto.html iOS/Androidで提供されているワイヤーフレーム作成アプリです。タブとかアコーディオンメニューとかdivとか動画とか、いろんな要素をぽんぽん並べて拡縮して文字書いて、って感じで簡単にレイアウトを作れます。プレビューモードでは実際にボタン等をクリックして動作を見ることもできます。 この記事ではiOS版Adobe Protoでワイヤ
3大「WordPressに慣れていない人がやってしまいがちだけど、こっちのほうがいいのになぁ」って思うこと
どーもどーも。最近めっきりネタストックの出来ていないマイペースたんです。 この記事は12/1～12/25の期間、毎日ブログ記事を数珠つなぎにしていく「WordPress Advent Calendar」の第19日目として書いております。 18日目の@kamiyamさんから引き継いでの記事でございます。 とはいえ、最近これはいいなぁと思ったネタはもうすでに先月書いてしまったし、V3.3はまだ全然触れてないし、最近理解を新たにしたループについての話はkzさんがさらっとスマートに書いてしまっていたりで、、、困った困った。でも考えました。 ここ最近、ありがたくも自サイトからWordPress関連のちょっとした作業依頼をいただく機会が増えました。 ご依頼内容としては、「デザインやプレーンなサイト構築についてはこなれているけれど、どうもWordPressに組み込んだ時に言うことを聞いてくれないからなん
hi-posi » スマホ向けFlashサイトを作るには？ 第一回 準備編
『スマートフォン向けFlashサイトを作るには？』このテーマで、4回に分けて記事にしました。 内容は以下の４回です。 スマホ向けFlashサイトを作るには？第一回 準備編 スマホ向けFlashサイトを作るには？第二回 Flash編 スマホ向けFlashサイトを作るには？第三回 Swiffy編 スマホ向けFlashサイトを作るには？第四回 HTML編 まずは第一回目という事で「準備編」です！ 何のツールを使って、どういう端末でチェックすればいいのかを書きました。 では、はじまりはじまり～ ■スマートフォン向けのFlashサイトを作りたい！ スマートフォンのサイトを作る機会が増えてきました。HTMLとJavaScriptをちくちく書いて作るのも良いけど、Flasherとしては、やっぱりFlashを使ってスマートフォン向けのインタラクティブなコンテンツを作りたい！です。 アプリであれば、Flas
iPhone対応したサイト構築のための基礎情報 « nulldesign
iPhone用のサイト制作の仕事が来そうなので、前もって情報をさっくりと集めておいたのですが、せっかくなので公開してしまおうと。特に目新しい情報という訳ではなくて、いろいろと散らばっていた物をまとめた物です。 iPhone対応と最適化(提案ベース) iPhoneの仕様的な部分 実相時のiPhoneの判別方法 html実装まわり viewport設定 ホーム画面にアイコンを表示 manifestファイルの設定 iPhone対応と最適化(提案ベース) ・iPhone対応 → iPhone搭載のSafari4対応 ・iPhone最適化 → ・3G通信、Wifi通信を考慮 ・UIのカスタマイズ ・ブラウザキャッシュの最適化もしくは調整等々 ・manifestファイルの設定 ・ローカルストレージによるデータの保存 iPhoneの仕様的な部分 ディスプレイサイズ 320px * 480
MS、｢Internet Explorer 6｣も2014年までサポート - 気になる、記になる…
管理人：Taisyo 海外の情報＆噂サイトで報じられている Microsoft (Windows) や Apple (MacやiOSデバイス) の最新情報を翻訳(ミスも多いですが…)してUPしています。 当サイトのメインページや個別記事へのリンク、コメント、トラックバックは自由に行って下さい。 ご連絡の必要はございません。 ある程度確認はしていますが、InternetExplorerでは一部正しく表示されない部分があり、推薦はSafariとなっています。 ニュース：総合(982) ニュース：携帯電話(346) 気になるニュース(488) ニュース：ブラウザ(204) ミニノート関連(Eee PCなど)(260) Microsoft：総合(789) Microsoft：各種アップデータ(98) Windows Vista：ニュース(512) Windows Vista：レビュー(27) Wi
IE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collection
Internet Explorerの異なるバージョン（1, 1,5, 2, 3, 4, 5, 5.5, 6, 7, 8）を同時に起動して、確認ができる「Internet Explorer Collection」を紹介します。 Utilu IE Collection 同時起動できるIEのバージョンは、インストールするWindowsのバージョンによって異なります。 当環境（XP SP3+IE7）では、上記のキャプチャのようにIE1.5, 2, 3, 4, 5, 5.5, 6, 7, 8を同時起動できました。 ※元のIE7には特に影響はありませんでした。 古いバージョンが必要ない場合は、インストール時にチェックをはずせばインストールしないと思います。
F's Garage：ややこしいシステムを使わないソースコード管理
「先祖返り」ってご存じでしょうか？ せっかく作っていたデータを、古い日付のもので上書きしてしまい、古い状態に戻してしまうことを言います。 よくWeb制作で起きがちで、複数人で一つのフォルダのソースをいじくっていたり、不注意な人がざっくり古いファイルを上書きしてしまったりすることでおきます。特に忙しい納期直前ほど起きる現象です。 不注意な人のやることと言ってしまえばそれまでですが、人は必ずミスをするものです。 不注意な人のミスをいかになくすか？というのが、世の中の生産管理の肝と考えれば、単純にソースコードの管理手法がなっていないと考える方が僕は自然だと思います。 世の中には、バージョン管理システムという名前で、CVSとかSubversionとか便利なシステムがあるのですが、これがちょっと難しい。何が難しいというと、まず用語が難しい。コミットだのチェックアウトだの聞き慣れないキーワードがついて
検索トラフィックを簡単に増やす10の秘訣 | Moz - SEOとインバウンドマーケティングの実践情報
僕は今、連れ合いのMystery Guestと一緒に、カリフォルニア州オーシャンビーチにある親戚の家で休暇を過ごしている。一緒にお気に入りのテレビ番組を見た後、Mystery Guestは1時間ほど前に眠り込んでしまった。さっきまで降っていた雨も上がり、とても静かだ。聞こえてくるのは波の音ばかり。時おり、表を通る酔っ払いの声もするけどね。 今の幸せな気分をみんなと共にしたくて、ちょっとしたプレゼントを用意した。SEOに関連して知っておいて損はない10の秘訣だ。あまり手間はかからず、かなりの効果が期待できるよ。 #1 キーワード カニバリゼーションをリダイレクトで解消するだいたいどこのサイトでも、最も重要なキーワードでターゲティングしているページが複数あるものなんだ。同じサイトのページが検索結果の2ページ目と、3ページ目、4ページ目、それに5ページ目といった具合に分かれて表示されて、結果的に
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
memokami :: 約500機種の携帯端末を網羅するケータイテストエミューレーター「P1 Emulator」を使ってみました
NetFarmさんが携帯端末500機種以上を網羅した「P1エミュレーター」のベータ版が無料で公開されました。 いままで携帯でテストするときに、まともに利用できるエミュレーターといえば、i-modeシミュレータしかなく、結局実機でのテストに頼っていました。 この「P1 Emulator」はケータイサイトのテストの救世主となるのでしょうか。 早速試してみました。 ■まずはダウンロード http://p1.netfarm.ne.jp/ ※ダウンロードには会員登録/ログインが必要です。 ■エミュレーターインストール インストールがめちゃくちゃ重かったです。 うちの環境だけかな。固まったかと思うほど。 気長に待ちましょう ■インストール完了 かなり時間かかりました。 ■ライセンス登録画面 最初に起動するとベータ版のライセンスキーを取得するように言われます。サイトに行って取得しましょう。登録したメール
独学で極める “Webデザイン”の技と心：第1回目 Webデザインの心～独学からWebデザイナーへの道のり｜gihyo.jp … 技術評論社
はじめまして。エスカフラーチェLLCのpurprinこと山田あかねです。 （株）paperboy&co.で Webデザイナーを勤めて昨年12月で退社後、今年1月にエスカフラーチェLLCの設立に携わり、現在はデザイナーとして主に社内のWebサービスの開発を行っています。 最近ではCSS Nite in Nagoya 2007で「極力ハックしない CSS」というテーマでスピーカーとしてお話させていただきました[1]。また、雑誌の記事を書くお仕事もしています。 この連載では「独学で極める Webデザインの技と心」というテーマで、前職で異業種だった私が独学でWebデザイン技術を習得したプロセスやノウハウなど、実体験を交えてお話させていただきます。 Webデザインの話となると、しばしば(X)HTMLやCSSなど技術の話がクローズアップされることが多いのですが、技術だけにとどまらず、実際に閲覧する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BLOGOS サービス終了のお知らせ
http://kengo.preston-net.com/archives/003536.shtml
株式会社アンタス - 次の時代のマーケティングテクノロジーを
