スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
テキスト周りで使えるCSSの小技いろいろモバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 テキスト周りで使える CSS の小技 目次テキストを選択する時の色を変更蛍光ペンで線を引いたような効果長いテキストを「…」で省略する番号リストの表現を変更リンクの種類でアイコン変える言語によってスタイルを変更テキストリンクのエフェクトプリント時は URL を表示長い URL を途中で折返す途中で折り返さず、次の行に先頭の文字を大きく先頭を一文字分あけるグラデーションテキストブラウザーは特記していなければ Chrome、Safari、Firefox、
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
LINE株式会社（本社：東京都渋谷区、代表取締役：森川亮）は、同社が運営する無料通話・無料メールスマートフォンアプリ「LINE（ライン）」http://line.me において、世界最大の通信会社の一つである「Telefónica (テレフォニカ)」とパートナーシップを締結し、スペイン、ベネズエラ、ペルー、コロンビア、ウルグアイ、ブラジル、メキシコにおいてテレフォニカのFirefox OSにLINEを独占的に提供することを発表いたします。 今回の提携は、テレフォニカのヨーロッパおよび中南米地域の顧客基盤の拡大と、同地域におけるLINEの急成長をさらに加速させることを目指しています。現在LINEは3億3000万人ユーザーを保有し、LINE事業単独で、2013年の第三四半期の売上は前四半期から58％以上*の成長率を遂げています。
高橋: こんにちは、高橋です。今日は徳丸さんをお招きして、JALの不正ログイン事件についてお話を伺います。徳丸さん、よろしくお願いします。 徳丸: 徳丸です。よろしくお願いします。 高橋: まず、事件の概要を説明します。日本航空のホームページに不正アクセスがあり、JALマイレージバンク（JMB）のマイルが、Amazonのギフト券に勝手に交換される被害がありました。日本航空の発表では、1月31日から2月2日にかけて、身に覚えがないマイル交換がされているという問い合わせが複数ありました。調査の結果、40人の利用者のマイルがアマゾンのギフト券、数百万円相当と交換されていたというものです。 徳丸: ここで問題となるのは、パスワードは数字6桁ということなんですよね。 高橋: やはりそこですか。パスワードが数字6桁だとどのような攻撃ができるのでしょうか? ブルートフォース攻撃 徳丸: まず、ブルートフ
あると便利なんだけどなーとボヤいていたら同僚エンジニアが５秒で作ってくれた。 このエントリを編集する javascript:with(ld_blog_vars){location.href='http://'+provider_name+'.blogcms.jp/blog/'+name+'/article/edit?id='+articles[0].id} 使い方はこう。Chromeね。 どこでもいいからページを開いた状態でURLの横にある☆マークをクリック ツールバーから「ブックマーク」→「ブックマークに追加」でもいい。 上に書いてあるものにする。URLのところにjavascript:ふんふんてのを入れる。 で、自分のブログのエントリを見ている時に先ほどのブックマークを押すとそのエントリの編集画面に行けるというかんじ。便利。 独自ドメインで使ってる自分のブログで行けたけどエントリのURL
ユーザーのアプリ継続利用率(リテンション)は、アプリを初めて使った時の経験(アクティベーション)に大きく左右されます。 初回体験で期待を裏切らない、そして期待を超える満足感を与えることはもちろんですが、初回体験の満足度最大化の前提にあるのは「アプリの使い方に対するユーザーの理解」。そしてこの理解に欠かせないのが、「ウォークスルー」や「ツアー」とも呼ばれる、アプリ初回体験時につきもののアプリ内の利用ガイドです。 本日は、最適な利用ガイドが持ち合わせる特徴4選と、アプリをダウンロードせずとも利用ガイドを擬似体験できるとっておきのウェブページをご紹介致します！ 最適なアプリ利用ガイドが持ち合わせる特徴4選 ①コア機能だけ紹介 実際にアプリを使う前にダラダラと各機能を説明していては、ユーザーが利用ガイドを飛ばしてアプリを使い始めてしまいます。そしてもちろん正しい使い方も、機能の魅力も伝わらないまま
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
Trioplanの素晴らしい描写力に出会ったのはドイツ人が開設しているこちらのWEBサイトである。初めて訪れた時の衝撃を今でもよく覚えている。このレンズを用いれば、ごくありふれた風景が今まで見たことも無いようなファンタスティックな光景に置き換わってしまうのだ。幻覚にも似た素晴らしい写真効果が得られるのである。 Meyerの望遠系レンズには端正な写りが評判のTelefogar（テレフォガー）90mm F3.5やボケ・モンスターの異名を持つOrestor（オレストール） 135mm F2.8など注目度の高いレンズが揃っている。中でも最近、圧倒的な人気を誇るのがTrioplan(トリオプラン)100mm F2.8である。設計構成は廉価品扱いの絶えないトリプレットで、焦点距離は100mmとやや不人気のカテゴリーにある。レアな製品と言えるほど流通量が少ないわけでもない。何がそんなに人気なのかというと
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
じつはもうスマートフォンの方がアクセス多いナウってかんじですが、PC版のリニューアルをしてみました。（41%がPC、57%がスマートフォン） こんなかんじに 元々のデザインはディレクターブログで使っていたやつで、結構要望が多いようなので一般公開したものをベースにしている。その時の話はこちら。→「いいかんじにしといて」を形にした、NHN Japanディレクターブログリニューアルへの道 これ実は左の部分が DIRECTOR という文字になってたんだけど、一般公開にあたってモザイクにしてもらった。なのでデザインの名称が「モザイクブロック」なんですな。TOPページはランダムで色々出たり、ちょこちょこギミックがあるので見てみてください。 THANKS 元々のデザインしてくれたチャーリー ディレクションしてくれた村上くん リニューアルのあれこれのmineoさん 色々してくれたhamashun 裏のボス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く