IDEA * IDEAドットインストール代表のライフハックブログ
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel
少しのコードで実装可能な20のCSS小技集
少しのコードで実装可能な20のCSS小技集CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能な CSS 小技集 シリーズ【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集まずは CSS 基礎編1. div を中央揃えにするほとんどのサイトが基準となる div を画面の中央揃えに設定しています。左右の margin を auto にして中央揃えに。 3. 複数のクラスを指定実はクラスは一度に複数指定できます。スペースを空け
[携帯]submitボタンの大きさ調整 │ これからゆっくり考L +α
よくありがちな「検索」とか、「送信する」とか、そういったボタンの文字サイズ（ボタンのサイズ）が変更できるか、の検証です。 今までsubmitボタンの大きさを変更したことが無かったのですが、とあるソースを見ていたら、 <input type="submit" value="ボタン" style="font-size:x-small;" /> という記述をみかけて気になった次第です。 サンプルページ →サンプルページを見る <input type="submit" value="ボタン" style="font-size:x-small;" /> こんな感じで、inputタグの中でfont-sizeを指定してます。 <div style="font-size:x-small;"><input type="submit" value="ボタン" /></div> 下の方は、inputタグ内で指定
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
[携帯]デザインの時、fontサイズを何pxにしてますか？ │ これからゆっくり考L +α
携帯サイトのデザインをする時、デバイスフォントの部分（アンチエイリアスをオフにしてる部分）を何ピクセルにしてますか？ PCサイトの場合だと、通常の文字サイズを12pxないし13px、小さい文字を10pxで作成しているデザインをよく見るのですが、携帯でもそのパターンが多いなーと感じています。 ユーザーが端末側の設定で文字サイズを変更している場合がありますが、検証する時は通常「標準（中）」の文字サイズでやっています。標準の文字サイズでチェックして、微調整をしたりしてます。 ※会社の方針や案件によっては違うかもしれないので一概には言えませんが。 デフォルトの設定から変更していない人の割合が多い、とどこかに書いてあったような...？ で、端末側の設定で文字サイズ標準（中）にすると、意外と文字が大きく表示されるんです。 なので、デザイン上の文字サイズを12px、10pxで作成してしまうと、実機で見た
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
photoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」
photoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」 WEB制作は人によって使うツールは様々だと思いますが、その中でも多くのWEBデザイナーが利用しているツールphotoshop。今日紹介するのはphotoshopでWEBを作る人のためのWEBデザインチュートリアル「20 High Quality Photoshop Web Design Tutorials」です。 Create a Clean and Classy Web Design in Photoshop 様々なデザイン感のWEBデザインをphotoshopで制作するのはどうしたら良いのかという、実例を交えたチュートリアルが多数公開されています。 詳しくは以下 ■Awesome Portfolio Design ポート
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
ke-tai.org > Blog Archive > ケータイ向けメルマガの装飾文字をまとめているサイトのまとめ
ケータイ向けメルマガの装飾文字をまとめているサイトのまとめ Tweet 2010/3/15 月曜日 matsui Posted in 記事紹介・リンク | 2 Comments » ちょっとついでがあったので、ケータイ向けメルマガの装飾文字について軽く調べてみました。 自分のメモ代わりに記事の形にまとめます。 まず大事なのは、デコメールに代表されるHTMLメールか、通常のメールかの選択です。 HTMLメールでもよければ装飾に苦しむことはあまりありません。 2010年1月の時点で、HTMLメール対応機種の割合は98.0%とのことです。 → ビートレンド株式会社 携帯端末毎のアクセス実勢を調査 [betrend.com] 利用率的には、もうHTMLメールで全然OKのようですね。 しかしながら、配信システムが対応してなかったり、利用者層によっては逆に開封率が下がってしまったりなんていうことも考え
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」:phpspot開発日誌
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」 2010年03月25日- jQuery Plugin: Give Your Characters a NobleCount The Product Guy テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」。 今、テキストエリア内に何文字はいっているのか？というのは、文字数制限をしているフォームにとっては重要なユーザビリティになりますね。 送信ボタンを押した後に、文字数オーバーです、というのは不親切ですしサーバに無駄なリクエストが増えることになります。 Twitter では残り文字数を表示していますが、これをjQueryで１行で実装してしまえるのがこのプラグイン。 $(element).NobleCount('#ta
CSSビギナーに気をつけてほしい5つのポイント | コリス
スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
ke-tai.org > Blog Archive > ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました
ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました Tweet 2010/3/19 金曜日 matsui Posted in DoCoMo, ソフト紹介, タレコミ | 1 Comment » フォーラムからmemokamiさんにタレこんでいただきました。 情報提供ありがとうございます。 ドコモ純正の定番ケータイエミュレータである「iモードHTMLシミュレータII」が8.4にバージョンアップしたとのことです。 → NTTdocomo iモードHTMLシミュレータII [nttdocomo.co.jp] 前回のバージョンアップから約5ヶ月ぶりの更新ということになります。 今回の変更内容は以下の通りです。 シミュレートモード5から8までのブラウザエンジンおよびFlashエンジンのバージョンアップ メイン画面のデザインを変更 テーマ設定機能に対応 通
フリーで商用利用もできて実用性重視のアイコンセット「Elegant Themes Icon Pack」
有料のWordPressテーマを作成して販売している「Elegant Themes」が自身の有料テーマのために作成したアイコンを1つにまとめて無料で配布しています。 「オープンソースや商用利用できるアイコンを探してみたが使えるレベルのモノがなかったので自分で作ってみた」ということなのでどれもこれも実用重視のデザインとなっており、かなり完成度が高いです。 ダウンロードは以下から。 Elegant Themes Icon Pack, For Free!- Elegant Themes Blog http://www.elegantthemes.com/blog/resources/elegant-themes-icon-pack-for-free 含まれているアイコンはPNG形式で背景は透過済み、全部で74種類、サイズは48×48ピクセルとなっています。 大体どのようなアイコンが含まれているか
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNG vs. JPG ～間違いを防ぐ6つの助言～ | AUTHORITY SITE
今“ 知っておくべき”ケータイサイト制作事情 第3回 目次 | デザインってオモシロイ -MdN Design Interactive-
MdN Design｜総合情報サイト
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ピュアCSSで実装された吹き出しのデザイン例色々:phpspot開発日誌