タグ

web制作に関するtoguoのブックマーク (96)

  • Online code convert tools and utilities - Beautify Converters beautifyconverter.com

    CSS Minifier Make it minified, compressed by removing newlines, white spaces, comments and indentation.

    toguo
    toguo 2017/01/07
    いろんなコードをいろんな形式に変換したり、整えたり出来るWebサービス
  • root不要!Androidのhostsを書き換える | Excite Smartphone Engineer's Blog

    エンジニアの黒田です。 Androidをroot化するメリット・デメリットは至るところで紹介されています。 開発者としては「hostsを書き換えたい」という理由が多いのではないでしょうか。 root化することは非常にリスクを伴いますし、なにかあってからではサポートが受けられません。 そこで今回はroot化せずにhostsを書き換える方法ご紹介したいと思います。 と、言っておいてなんですが、実はAndroidのhostsは書き換えていません。 簡単に説明するとAndroidをproxyサーバー経由でネットワーク接続し、proxyサーバー側のhostsを書き換えるという手法をとりました。 1. apacheのProxyサーバー機能を有効にする 今回は自分のmacをproxyサーバーにしました。 既にmac内でapacheを立てていましたので、httpd.confに下記を追加 <IfModule

    root不要!Androidのhostsを書き換える | Excite Smartphone Engineer's Blog
    toguo
    toguo 2015/04/29
    いちいち社内にDNSサーバー用意するの面倒だと思っていたので、この方法使える
  • 縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks

    モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます! 明けましておめでとうございます。年もWebNAUTをよろしくお願い致します。私の新年1目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター: ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか? デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

    縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT by Beeworks
    toguo
    toguo 2015/01/18
    たまに印刷して配布したほうが理解されやすい時もある時に困っていたので嬉しい。
  • オリジナルフォントを使ったデザイン - クックパッド開発者ブログ

    こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか? ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特

    オリジナルフォントを使ったデザイン - クックパッド開発者ブログ
  • CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ

    CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ? とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか? 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版(2014年8月リリース)。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

    CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
  • これからのWebデザインはIllustrator派が増えてくるのでは? | 5 LOG

    個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか? そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ(ナビゲーションとかボタンとか見出しとか)が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる

    これからのWebデザインはIllustrator派が増えてくるのでは? | 5 LOG
  • HTMLメール制作のコツや便利なサービスいろいろ

    2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター(メールマガジン)はありますか?私は利用しているWebサービス趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう! ↑私が10年以上利用している会計ソフト! HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通

    HTMLメール制作のコツや便利なサービスいろいろ
    toguo
    toguo 2014/07/17
    HTMLメールのTipsとか
  • 【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
  • 4年続けてわかった、個人ブログで行うプレゼント企画成功の秘訣

    2017年6月29日 Web関連記事, マーケティング 毎年新年に実施している「Webクリエイターボックスプレゼント企画」。今年もたくさんのご応募をいただき、無事終了してホッと一息ついているところです。さて、Twitterを使えばフォロワーも増え、ブログの宣伝にもなるキャンペーン企画ですが、単に景品を揃えて宣伝すればいいというものでもありません。Webクリエイターボックスが4年行ってみて感じた、企画の流れや注意点を10項目に分けて記事にしました。もしブログで何かしら企画をお考えでしたら、ぜひ参考にしてみてください! ↑私が10年以上利用している会計ソフト! 1. 企画のタイミング まず第一に考えるのは、いつするか?という点。Webクリエイターボックスはブログ開始日が1月4日なので、それにあわせて行なっています。景品に応募の際に「◯周年おめでとうございます!」等、お祝いの言葉もいただけて中の

    4年続けてわかった、個人ブログで行うプレゼント企画成功の秘訣
    toguo
    toguo 2014/01/14
    twitterキャンペーンを実施するための準備や集計方法について
  • Macでも無料でIE確認するためのModern.IEが想像以上に快適だった

    これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks(10

    Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
    toguo
    toguo 2013/11/30
    IEの表示確認をするための仮想環境作り
  • 既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT

    extractCSSJavaScript製のオープンソース・ソフトウェア(MIT License)です。 スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。 トップページです。まず右側に現状のHTMLソースを入力します。 そしてExtractボタンを押すとスタイルシートが出力されます。 入れ子向上も適切に処理されています。 extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。 MOONGIFTはこう見る

    既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT
    toguo
    toguo 2013/09/28
    HTMLの構造から考えた時に、なんかしら使う機会がありそう。
  • フリーランスの全国Webサイト制作料金表 2013年度版

    全国で活躍するフリーランス・SOHOの皆さんの、... / フリーランスの全国Webサイト制作料金表 201... / 東京:GYPSYの制作料金他...全23件 全国で活躍するフリーランス・SOHOの皆さんの、制作料金を掲載しているページを集めました。料金相場や価格設定の参考にご利用ください。 ※掲載している情報は2013年9月18日時点のものです。最新価格やそのほかの価格に関しては、リンク先をご確認ください。

    フリーランスの全国Webサイト制作料金表 2013年度版
  • もうCSS設計で悩まない!「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

    構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"

    もうCSS設計で悩まない!「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
  • re-dzine.net situs togel online toto 2023 -

    By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

    re-dzine.net situs togel online toto 2023 -
  • コーディング規約を作ろう

    2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト! コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「

    コーディング規約を作ろう
  • Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ

    Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、家のBootstrapから。 Bootstrap 3 スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。 最新のBootstrap 3rc1(7/27に公開)はリリース候補版です。 Examples Templates for Bootstrap Bootstrap純正のテンプレートやページの仕掛けが揃っています。 Narrow marketing 小さいプロジェクト用の軽量のテンプレート。

  • 文字化けしない中国語ホームページの作り方(文字参照を使った方法) | どんと来い、中国語

    尚、この変換ツールは中国語の漢字だけでなく、ピンイン文字や日語、またハングル文字など、あらゆる文字を立ち所にして「文字参照」に変換します。 多言語のホームページに役立ててください。日語の「髙」や「﨑」なども変換できます。(基的なabcやスペース・改行などは変換しない仕様になっています) 文字が点「・」になってしまう場合 お使いの環境によっては、・が表示されるだけで、中国語が出ない場合があるようです。 このような場合はフォントが日語になってしまっていることが原因なので、次のように書くことで文字化けせずに中国語を表示することができます。 そのままコピー&ペーストでしてHTMLファイルに貼り付けて試してみてください。 (スタイルシートでフォントを指定してあげることでも対応できます。中国語のフォントについてのページも参照してください。) <font face="MS UI Gothic">

  • Webサイトの作り方のまとめ!ブラウザチェック。

    サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware+IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使

    Webサイトの作り方のまとめ!ブラウザチェック。
  • Pure.css

    CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu

  • もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜

    WordPressでサイトを制作するとき、2人以上のチームで取り組むことも多いと思います。例えば「構築担当者」と「デザイン担当者」で1つのサイトを構築するような場合です。 同じ会社内で一緒に作業するときと違って、ノマドワーカーのようにそれぞれが別の場所で作業する場合は、直接ファイルを手渡しするようなことはできません。 そんなとき、メールにファイルを添付してやりとりしていますか? Webサーバーに直接アップロードして更新していますか? どちらにせよファイルの管理と意思疎通をしっかりやらないと、せっかく更新したファイルがまた元に戻っちゃいますよね。 そんなコラボレーションワークでのファイル管理に、Git(ギット)を使ってみましょう。ファイル管理の煩わしさから開放され開発がスムーズにできます。 WordPressの構築を経験したことあるけど、Gitはまだ使ったことがない、という方向けにGitの使

    もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜