Fireworksでモックの変更に便利なシングルレイヤー編集 | Webデザインのタネ一定期間更新がないため広告を表示しています
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
＆nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)
いかがでしょう？ WEBブラウザにもよりますが、結構実際の見た目も違うように思います。 で、冒頭の「半角スペースと 」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。 「 を半角スペース (0x20) に置き換える」プログラムがあるように、「 を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。 冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした おまけとして、 を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。 use HTML::Entities; use Encode; use Data::Dumpe
正確な文章の書き方
このページでは、正確な文章を書くための秘訣をまとめてみようと思います。それほど文章がうまいとはいえない私が、文章の書き方について述べるのですから、むこうみずな行為であることは百も承知です。しかし、数年に渡って探求した正確な文章の書き方が、少しでもみなさんの役に立てばという思いを自分への励ましに代えて筆をとります。 ここでお話するのは、「文章をいかに正確に書くか」や「自分の考えをどうやったら適切に表現できるか」であって、決して「どうやったら人を感動させる名文句が書けるのか」ではありません。 このページを読んだら「科学技術文献」を書くための技術が少しは身に付くのではないかと期待しています。しかし、 人はいさ 心も知らず ふるさとは 花ぞ昔の 香ににほひける (紀貫之) などのような心に残る文章が頭に浮かぶようになるわけではありません。 絵の書き方に例えて言うなら、ここで述べる内容は、色彩や調和
Facebook でシェアしたサイトを Evernote で管理すれば素敵なオンラインブックマークの出来上がり
最近、巷では Facebook が盛り上がってきたので、フェンリルでも Facebook をもっと活用したい！ ということで、個人的にも Facebook を使い始めたプロモーション担当の坪内です。SPGRA だけを担当しているわけじゃありません。はい。 とりあえず、Facebook ユーザーの方は、下記いいね！ボタンを押してみてください。 はい。 いいね！いただきました。 特にエントリーの内容とは関係ありません。すみません。 さて、これまで、私はプライベートでも役立ちそうな WEB サービスや気になったブログエントリーなどは、ブックマークレットを使って、Gmail から Evernote にメールして、Evernote 上で管理していました。 HeartRails Caputure のブックマークレットでキャプチャを撮って、Gmail 本文に貼りつける、という一手間が加わっていたので、ち
【デザイン TIPS】背景を変えても境界線がボケないボタンを作るには
デザイナーの大西です。 Web ページなどで使うボタン作成の小技を書きたいと思います。 使い回ししやすいボタンを作るための手法のひとつとして、「違う色の背景に置いてもボケない境界線」が重要です。 淡い色合いのボタンを作る場合、そのボタンの周囲を囲む境界線も淡めの色になると思います。 淡めの境界線は白系の背景に置けばきれいに見えますが、濃い色や境界線に近い色の背景に移すと・・・ ボタンの周りがもやもやして見えませんか？ 背景とボタンの境界があやふやになるとボタンの立体感（クリックできそうな感じ）が損なわれてしまいます。 境界線のたかが 1px かもしれませんが、見た目だけでなく使い勝手にも関わる重要な部分です。 ■「違う色の背景に置いてもボケない境界線」の作り方 境界線のボケを防ぐには、暗い色を使って境界線を描き、白背景に置いてきれいに見えるように透明度を調節してやります。 暗い青色で描いた
【完全版】アップル非公開『iPhone』の隠しコマンド全部見せます！ バッテリ寿命がのびるコマンドもアリ – ロケットニュース24（β）
2010年8月7日 いままで『アップル社が公開していないiPhoneの隠しコマンド』と『iPhoneに裏モードが存在した！ 裏モード突入の隠しコマンドを公開』という記事を掲載してきたが、あまりに反響が大きかったため当編集部は徹底して隠しコマンドを調査！ ほぼすべての隠しコマンドを発見したので、ここに紹介したいと思う。隠...【完全版】アップル非公開『iPhone』の隠しコマンド全部見せます！ バッテリ寿命が伸びるコマンドもアリ 2010年8月7日 いままで『アップル社が公開していないiPhoneの隠しコマンド』と『iPhoneに裏モードが存在した！ 裏モード突入の隠しコマンドを公開』という記事を掲載してきたが、あまりに反響が大きかったため当編集部は徹底して隠しコマンドを調査！ ほぼすべての隠しコマンドを発見したので、ここに紹介したいと思う。 隠しコマンドとは、『iPhone』の電話番号記入
Getting Started - Google Font API - Google Code
Getting Started This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. Contents A quick example Here's an example. Copy and paste the following HTML into a file: <html> <head> <link rel="stylesheet" type="text/css" href=
Meet the Pseudo Class Selectors | CSS-Tricks
Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { /* Yep, hover is a pseudo class */ } They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. H
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
はてブを通して記事をEvernoteに取り込むたった一つの方法 | nanapi[ナナピ]
はてブを通して記事をEvernoteに取り込むたった一つの方法 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。はじめに Evernoteにはユーザ専用のメールアドレスが与えられ、そこに送信した本文がそのままEvernoteに取り込まれます。これを利用して、気に入った記事をひょいひょいとEvernoteに保存する方法を紹介します。 設定ポイント Evernoteに取り込むためのはてブの専用タグを決める 例えば「star」とか「fav」とか、それが特別なものであることが分かるようなものであれば何でもよいでしょう。 はてブの専用タグのRSSをまるごとRSSで全文化する はてブのRSSは概要しか書かれていないので、これを全文化したRSSを取得するようにします。これにはまるごとRSSを利用します。 例えば僕の「mobile」タグの全文化RSS
Twitterから特定の職業の人だけを探す方法 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
Boot CampのWindowsパーティションのサイズを変更するには - パソコンよろずQ&A
よろずと言いつつ、すっかりBoot Camp Only Blogです。現在、更新・コメント返信は一時休止しております。 ごぶさたしております。 今回は、隊長＠やから建設様より情報提供いただきましたWincloneを使って、Windows Vistaのインストールされたパーティションのサイズを変更する方法をご紹介します。 【08/02/11追記】保存元ならびに保存先のフォーマットがFAT32の場合の補足を追加いたしました。 ■Wincloneのインストール まずは、Wincloneをダウンロードしてアプリケーションフォルダにインストールしましょう。 【08/05/01追記】Winclone 2.0へのバージョンアップに伴い、Mac OS X 10.4.x (Tiger) では動作しなくなっております。現在Mac OS X 10.4.xをお使いの方は、バージョンアップしないようにご注意ください
豆本やコピー本の作り方も！自宅でも簡単にできる「製本」 - はてなニュース
ちょっとした冊子を作りたい時、本を作りたいけど印刷所に頼むほどではない時など、自宅でも印刷や製本ができると便利ですよね。今回は製本の基本からコピー本や豆本の作り方まで、自宅でもできる「製本」の方法をご紹介します。 ■製本の種類もいろいろある？ 製本といっても、文庫本のように背表紙に全てのページがくっ付いているものや、フリーペーパーのように真ん中がホチキスで留められているものなど、様々な方法がありますよね。 ＜製本の基本を覚えよう＞ ▽とじ方、道具から折丁印刷まで | 手作り製本 - BindUp バインドアップ こちらのエントリーでは、次の4つの方法について、手順を写真付きで解説しています。 糸かがり綴じ：背の部分に糸を通してとじる方法。 無線綴じ：折丁（印刷された紙をページ順になるように折りたたんだもの）の背に接着剤を付けてとじる方法。 網代綴じ：折丁の中にも接着剤をしみ込ませ、折丁同士
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ホーム画面の配列を失わずにiPhoneを復元させる方法 | ライフハッカー・ジャパン
IDEA * IDEA
faq/3/206 - OpenOffice.org Q&A
Evernote 使い方解説一覧 - できるネット＋（できるネットプラス）
