meet i2024年3月4日（月）本日、AppleがM3チップを搭載した新しい「MacBook Air 13/15インチ」を発表。予約を開始しました。 M1チップを搭載したモデルよりも最大60パーセント高速、最大18時間のバッテリー駆動時間でLiquid Retinaディスプレイを搭載。最 続きを読む
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
3キャリア対応の携帯サイトを作るには
制限の多いキャリアに合わせた作り 前回（http://www.thinkit.co.jp/article/143/2/）は、汎用的な携帯サイトを作る手順とポイントを解説しました。今回は、3キャリア対応の携帯サイトを作るテクニックと「こうしたい」を実現するデザインテクニックを技術的視点で解説します。 3キャリアに対応した携帯サイトを作るためには、各キャリアの仕様を比較し、最も制限の多い（自由度の低い）キャリアに合わせなくてはなりません。まず、第1回（http://www.thinkit.co.jp/article/143/1/）と第2回（http://www.thinkit.co.jp/article/143/2/）の内容をふまえて、3キャリアの携帯サイト制作のポイントをおさらいしましょう。 HTML／CSSに関しては、最新のデザインを取り入れるならHTML文書は「XHTML」で記述する、コ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
モバイルデザインアーカイブとは？ 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー？」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
Railsのクールなデザインを一瞬で自動生成する「Web App Theme」がステキ - このブログは証明できない。
4歳の長女がプリキュアにハマっています。ピーチを目指しているんだそうです。ですが、普段から絞め技や関節技を教えているので、寝技からの腕ひしぎ十字固めを狙ってきます。そんなプリキュアはいません。キュア・ノゲイラですか。。。 Web App ThemeというRailsのプラグインがあるのですが、これがステキすぎるのです。クールなカンジのテーマ（レイアウト＆スタイル）を一瞬にして自動生成してくれます。お、落ち着いて。ゆっくり説明するから。とにかく聞いてください。 まず、Railsのプロジェクトを作ります。 $ rails memo_app cd memo_app 手抜きするために、scaffoldを使います。で、db:migrateして、serverを起動。 $ script/generate scaffold memo title:string body:text $ rake db:migr
<data:blog.pageTitle/>
2010-01-24 CSSで要素を天地中央揃えにする 時刻: 23:16 | | ラベル: Webデザイン CSSのみで要素の天地中央揃えを実現できます。 HTML <div id="wrap"> <div id="elem1"> <p>要素１</p> <p>要素１</p> <p>要素１</p> <p>要素１</p> <p>要素１</p> </div> <div id="elem2"> <p>要素２</p> <p>要素２</p> </div> </div> CSS #wrap { border: solid 1px #333; width: 500px; } #wrap div{ display: table-cell; /display: inline; /zoom: 1; vertical-align: middle; text-align: center; width: 250px
Ring
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
Nagomi's memo - 表示比較 / ボックス内にimg要素を配置した時の余白
対処法へ 表示比較 ボックス内にimg要素を配置した時の余白 img要素をボックス内に配置した場合、画像下部の余白の有無に違いが生じます (margin,padding共に「0」が指定されていても)。 img要素以外でも同様の症状が生じる置換要素があります。 以下に比較のためのサンプルソースと、表示比較を記します。 親要素のタグとimg要素のタグの間に改行がない場合 サンプルソース <html> <head> <style type="text/css"> body{ margin:0; padding:0; background:url("./grid.gif") repeat; } p{ margin:0; padding:0; background-color:orange; } img{ margin:0; padding:0; } </style> </head> <body>
Simple scalable CSS based breadcrumbs | Veerle's blog
You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I
ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | 初代編集長ブログ―安田英久
また、ページの描画にかかる時間が3秒を超えると、40％の消費者がそれ以上待つのをあきらめてしまうとのこと（ただし、こちらも実際のデータでは、最も多かったのは「4秒超」の60%）。 では、ページの表示時間を特に気にするのはどんな層の人でしょうか。 調査によると、よくオンラインで購買活動を行う人ほど気にするようです。 そのネットショップへの愛着に影響する要素としてページの表示時間を挙げた人の割合は、オンラインで購買をする全体では52％ですが、年間1500ドル（約14万円）以上をオンラインで使う人では61%でした。つまり、よくネットで買い物をする人ほど、ページ表示の時間を気にするのですね。 次に、売上とページ表示速度の関係を。 ネットショップの表示が遅いからという理由で買うのをあきらめたことがある人は全体の1/3にも上りました。 ネットショップに対して不満を感じている人の23%は、不満の理由とし
ワイヤーフレームやサイトマップを無料で作成できるオンラインサービス・アプリケーション集
ウェブサイトのワイヤーフレームやモックアップ、サイトマップ、フローチャート、ダイアグラムなどを無料で作成できるオンラインサービス・アプリケーションを紹介します。
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
黄金比などを使用して、緻密で美しいグリッドを設計できるツール集 | コリス
黄金比や白銀比などを使用して、緻密で美しいグリッドを設計したり、設計したグリッドを表示・確認できるアプリケーション・オンラインサービスの紹介です。 アプリケーション関連
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
【レポート】ハイクオリティサイトのワイヤーフレーム分析 (2) ワイヤーフレーム分析 : みずほ証券 | クリエイティブ | マイコミジャーナル
みずほ証券 ・幅:約750ピクセル / 高さ:約1,050ピクセル ・XGA(1,024×768ピクセル)で約1.5スクロール (出典:みずほ証券) ワイヤーフレームの分析結果 SVGA(800×600ピクセル)でも横スクロールバーが出ない設計 すべてのコンテンツ幅を約750ピクセルで設計しているため、SVGA(800×600ピクセル)でも横スクロールバーが出ないのが特徴だ。SVGAを想定したワイヤーフレーム設計では、このようにコンテンツの最大幅を760ピクセル前後に抑えるのが一般的である。 高さも約1,050ピクセルと、非常にコンパクトにまとまっている。このサイトにとってトップページに必要なコンテンツが過不足なく収められている印象だ。また、情報ブロックそれぞれを適度な余白によって明確にわけているため、すっきりと見やすく、ユーザーが自分の目的とする情報を探し出しやすい設計の好例といえる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「iPhoneで動かす業務用Webアプリ開発入門」 - ＠IT
ikesai.com
フォームを簡単にデザインできるCSSフレームワーク「Formee」 | Web活メモ帳
