IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
Screenfly
In an effort to improve our product and grow, Screenfly was recently acquired by BlueTree.ai. For the past three years Screenfly has helped web developers and readers around the world test their screens. As of 2020, Quirk Tools is under new management and will be redesigning and rebranding. Stay tuned for more information. 🤓
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
プログラマーがかっこいいWEBサイトを作る5つのコツ - おかねがない(ﾟ∀ﾟ)ｯ!!
「かっこいいサイト作るぞ！」 と意気込んでみたももの、いざ作ってみると 「あれ･･･なんかダサい･･･」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか？ WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが･･･ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト
素人っぽさを感じるWEBサイト5つの特徴 - おかねがない(ﾟ∀ﾟ)ｯ!!
インターネットをしていると、いろんなWEBサイトに出会います。 気になるアーティストのサイトだったり、趣味に関連したサイトだったり･･･ そんな中で 「なんかこのサイト素人っぽい」 って、感じたことありませんか？ でも、「素人っぽい」と感じはしたものの、そのサイトのどこに素人っぽさを 感じたのか、じっくり考えてみることってあまりないのではないでしょうか。 そこで今回は、WEBサイトのどういう点に素人っぽさを感じるのか、 「脱素人っぽいサイト」を目指す私が感じた、「素人っぽいサイト」の特徴を、 まとめてみたいと思います。 （8/19追記） 以下の内容はあくまで素人muggles0812が感じた、個人的な意見であり、該当する項目が あったからといって、必ずしも他の皆さんが「素人っぽい」と感じるとは限りません。 画像処理が甘い せっかく時間をかけて作ったサイトでも、使われている画像の処理が甘いと
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
北米WEB屋なら誰でも知ってるんじゃないかって思うサイトをまとめてみた - バンクーバーのWEB屋
他人のブックマークって気になりませんか？特に同じ業界の人のブックマークってすごく気になりますよね。 興味本位でWEB屋友人のブックマークしてるサイトを教えてもらうことも多いですが、なんだか狙いすましたように、いろんな人が同じようなサイトをブックマークしていることに気がついて、「あぁー、このサイトはみんな良く見てるのかも」って思ったサイトがいくつかあったんですね。 そこで、WEB屋のブックマークをまとめて、北米WEB屋ならこれはたぶん皆みてるんだろうなってサイトをまとめてみましたので（独断と偏見で）ご紹介。 海外でWEB屋をやる方、いち早く海外のWEBデザイン情報をゲットしたい方、知っていて損はないと思います。 Smashing Magazine まずは王道？Smashing Magazine。このサイトは日本でも有名かなと思います。よくWEBまとめ記事とかで取り上げられてますよね。WEBの
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
わずか10分でスマートフォン用サイトが無料で作成できるウェブサービス「smart4me」を使ってみた
リリースされたばかりですが、スマートフォン用のサイトを手軽に作れると言う事で早速試してみました。 普通のウェブサイトなら話題のabout.meであなたのプロフィールページを1分で作ってみようを参考にしてみるといいかもしれないです。 smart4meってどんなサービス？ 以下引用を参考に。 smart4me（スマート フォーミー)とは？iPhoneやAndroidなどスマートフォン向けサイトが無料で、簡単に公開できる、世界初のWebサービス！ ブログ感覚で、ユーザー自身のスマホサイト（スマートフォン向けサイト）を簡単に公開が可能。 TwitterやBlogなどのソーシャルメディアとも連携可能なので、あなたの最新情報をすべて集約できるなど、使い方はあなたのアイディア次第です! 早速ユーザー登録してみよう smart4me ユーザー登録はちゃちゃっと終わります。 登録したメールアドレス宛にメール
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
＜チェック表＞WEBサービスを立ち上げるまでにやらなければならないこと - プログラマー幸福論
WEBサービスを立ち上げるまでに、やらなければならないことを自分用にまとめてみました。少人数でやっていると、いろいろやらなければならないことが多くてつい忘れてしまいがちですよね。 1) サービス名決定 サービス名とキャチフレーズだけは、最初に決定しておいた方がいいです。思いつかない場合は、TOPページのワイヤフレームを書きながら考えたりします。また、サイト名を Google などで検索してみて、ユニークな名前であるかを調べておかないと後で後悔したりします。 2) ドメイン取得／DNS反映 サービス名が決定したら、ドメインが利用可能か調べます。 最近では、.in や .me などを使った面白いドメイン名もありますよね。なるべく短く、覚えやすいドメイン名にします。 3) サーバー サービスを配置する、クラウドやレンタルサーバーなどからサーバーを選びます。 特殊なモジュールのインストールなどが必
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
サイトのデザインは54%が「好みで決定」、27%が最後に上司にひっくり返され、90%は消費者の意見を参考にせず／デザイン決定プロセス調査 | Web担当者必見！ リサーチ データ&市場調査レポート
参考意見としてターゲット消費者の意見を取り入れているのは10%に過ぎず、90%が消費者の意見を聞かずにデザインを決定している。 デザイン決定のポイントは、「発注側の経営者・上司・担当者の好み」が54%。「サイト制作のゴールを達成できそうだから」（20.7%）の倍以上の割合で「好み」を優先。 27.3%が「発注側の経営者や上司の独断的な意向で最終決定の直前にデザインがひっくり返った」ことで困った経験がある。 これは、デザイン決定のプロセスをビジネス目的に対して最適化するための消費者評価（アンケート）ソリューション「CREATIVE SURVEY」を提供する株式会社フォーデジットとWeb担当者Forumは、共同で行った、「Webサイトのデザイン決定プロセスに関する調査」の結果のハイライトだ。 この調査は、企業サイトの制作において、デザイン決定がどのように行われているのかを調べることで、ビジネス
スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ！」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
sp-web.jp