iOS Safariでinput要素にbackgroundがうまく反映されない （2013.03.23追記） - emuramemo
スマートフォン用にコーディングするの楽しいですよね。 CSS3がキモです。 iPhoneのSafariでちまちま見ながらコーディングしてるとあることに気が付きました。 backgroundで指定した色がなんか薄い？ 原因はあらかた想像はつきますが、ボタンにうっすらグラデーションがかかってるのにお気づきでしょう。 safariデフォルト設定のCSS3のグラデーションがムダに効いてしまっているようです。 グラデーションはbackgroundのgradientで指定できます。 さっそくgradientを指定してやるとこの通り↓ デフォルトのグラデーションが上書きされてCSSで指定したものにしっかり変わりました。 上下に指定したpaddingも反映されてなかったようですね。縦にすこし長くなりました。safariのバグでしょうか？ CSS3のグラデーションは記述がとてつもなく長いのでwebサービスの
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
スマートフォン・HTML5｜「コーディング」と「文字校正・校閲」がまとめて発注可能なサービス「ウェブコーディング.jp」
スマートフォン対応コーディング 急速に需要の高まるiPhoneをはじめとする「スマートフォン」や「タブレット端末」向けのコーディングにも対応しております。 シームレスにエンドユーザーに正しく情報を届けるためには、最適なコーディング技術が必要となります。 スマートフォンならではの最適なサイト設計・デザインもお気軽にご相談ください。 スマートフォン対応についてのお問い合わせ▶ HTML5への対応 今話題のHTML5とはいったい何でしょうか。大きく分けると2つあります。 検索エンジンの機能が高度化し、特にGoogleが提唱する地球規模の情報アーカイブ化という方向性を実現するには、それぞれのウェブサイトが標準化されてデータベースのレコードとして機能している必要があります。 SEO（検索エンジン最適化）の現場では、サイト構造を標準化することによって検索結果の表示順位が高くなることが常識となっています
HTML5学習(3)スマートフォン向けコーディングの基本まとめ - 青春B■雑記blog‐青酸カリ カラメルシロップ味‐
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら 現状、HTML5でのコーディングはPC向けよりもスマートフォン向けが主なのではないかと思います。 対応していないブラウザのことまで考えないといけないPCに比べて、スマートフォンはHTML5に対応した新しいブラウザが搭載されているからです。 ということで今回は、スマートフォン向けのコーディングについて概要だけではありますがまとめます。外部へのリンクばかりですが。 今回と次回の2回に渡ってスマートフォン向けコーディングの話を書いて以降、videoやaudioといったHTML5の注目新要素を学習していく予定です。 PC/スマートフォンサイトの切り替え モバイル：iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波｜gihyo.jp … 技術評論社で、スタイルシートを
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
私がweb制作でよく使うサイト47+α 作業ごとリスト
web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
Zen-Coding v0.6 new feature, Recorded on 2/19/10 cipher on USTREAM. Lifecasting
Not rated yet. You must be logged in to rate this video.
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。 使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。 古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。 エディタのサポートは、3つの分類に分かれます。 公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
HTML+CSSコーディングが10倍速くなるZen Coding
はじめに「Zen Coding」といっても、聞いたことがない方も多いかもしれません。 Zen Codingは、HTML/CSSコーディング支援ツールで、DreamweaverなどのWebオーサリング環境や、Windows/MacOS/Unixのテキストエディタ用のマクロ／プラグインとして配布されています。 欧米圏では、実に2年以上前から話題を呼んでいました。筆者自身もブームに乗って導入し、今ではHTML/CSSのコーディング作業はすべてこれを使って行っています。 日本ではあまり知られていませんでしたが、2010年はじめから、ネット上では知る人ぞ知る存在として、隠れたブームとなっています。筆者のひとり、こもりのブログのZen Codingについての記事は多くの方に読まれ、USTREAMで行ったライブコーディングも大好評でした。たくさんのWeb制作者の「こんな便利なものがあったなんて！」という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイトコーディングで ul li を table 風に | まとめーたー
07design.net
スマホページコーディングのまとめ -設定編- | 株式会社アジケ
谷 拓樹氏
リストの最初と最後のborderを表示させないテクニック｜クロノドライブ
http://kudox.jp/html-css/font-size-css
