スマートフォン対応、気をつけたいトラブル8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。Read less
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
KICKS Web｜Webデザインに関するあれこれ
webcreatorbox.comさんの記事が盛り上がってるようですね。 こもりさんのところにお手本みたいなエントリーが公開されてるので私が書くことはもう何も無いのですが、このテーマはもう何年も考え続けているので、自分の頭をちょこっと整理するために書きます。 社員コーダ—時代の話 私は、ざっくりした言い方をすると「デザインの重要性はそこそこ」派です。 これはおそらく個人的な恨み（！）も関係していると思います。 というのも、私が制作会社でコーダ—として仕事をしていた頃って、今とくらべものにならないくらい「デザイナー＞コーダ—」の図式がハッキリしていたように思うのですね。 分かりやすい例をあげると、デザイナーはクライアントとの打ち合わせに同席するのに、コーダ—は連れていってもらえなかったんです。基本的にコーダ—は、社内で仕事が落ちてくるのを待つだけ。気づいたときにはかなり無理のあるデザイン
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
ソースコードで発見した奇妙なコメント集
2013年3月23日 ネタ コーダー・デベロッパー・プログラマーさん達はそのソースコードにわかりやすい説明書きを「コメント」として残し、後から他の人が修正・編集しやすいようにコードを書いていきます。Stackoverflowの中でなんだそりゃー！というコメントがまとめられていたのでいくつか翻訳してみます！「クライアントからのムチャぶり迷言集 」に続き久しぶりにネタ系記事です。楽しんでください！ ↑私が10年以上利用している会計ソフト！ プログラマーさん達の名誉のため、先に言っておきますが、全てのプログラマーがこういったコメントを残しているわけではありませんよ！「こんなの書く人いるんだー世の中いろんな人がいるもんだー」くらいに軽く読んでみてください！ 自信を失したプログラマー達 自虐コメント多数！ // ごめん。 /* お願い…動いてくれ… */ // このコードは最低だ。知ってるだろ？俺も
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 - Web:a piece of cake!;
新ブログに移転しました。 ↓ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 | Webooker お手数ですが、ブックマークの移動をお願いいたします。
コーダーが気にしちゃうことバトン - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 反応されたなら、書かざるをえまい！ それが責任と言うものだ（何 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っています
Takazudoさんの質問に忘年会代わり・バトンに回答する - Trans
ヨモツネットの小山田さんにならい、Takazudoさんからの質問に答えます。 先にエクスキューズ といっても、僕はNPO法人という「組織」に所属するとはいえ、「SOHO」のような個人でサイト制作を請け負っているようなものなので、皆さんと回答の毛色がちょっと異なるかもしれないことをご了承下さい。 あと、Takazudoさんがコーダーが気にしちゃうことバトンというエントリーで、 前回のエントリをバトンにしない？と言われたので とあり、その一人なのですが、まさか質問内容が変わるとは露とも思っておらず、忘年会のときの質問に答えてしまいました...orz重複している質問に関しては忘年会の時の回答にまとめています。また、忘年会の時の回答はこの記事の後半に掲載しています。 てか、バトンと言うからにはやはり誰か指名しないといけないのかな。あ、でも、まずは忘年会参加の人たちが書いてくれるのを待つ感じかなー。
HTMLコーディング専門会社のモデル
HTMLコーディング専門の会社さんってけっこう増えてきた気がする。 コーディングを専門に大量に行うことでノウハウを蓄積し、スピードアップを図ることが可能だろうし、1ページ当りの単価設定などの仕様化、規格化もしやすいので、Webソリューション系のビジネスにつきものの「企画」や「見積もり」「調整」といったところの負担はそんなにない商売かもしれない。 ただ、その分、品質レベルが著しく悪くなく、コミュニケーションが問題なければ、競争優位性をつくるのが難しい分野なので、価格競争に簡単に陥る可能性も高い。 そこが最大の問題だ。ある会社はチケット制などでの前金制にしたり、いろいろ工夫を凝らしたりもしてるが、そもそものサービスや成果物での差別化でなければ、いずれどこも真似をするだろう。 競争優位性を作りにくい領域でどうやって競争優位性をつくるか。その問題が1つ。 もう１つ、このビジネスは、熟練コーダーがす
コーダーが気にしちゃうことバトン | Takazudo Clipping*
前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン
Takazudo さんのメモ : マークアップしている人の気になること | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
(x)html css ガイドライン beta
バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.
(X)HTMLコーダーの仕事とは | Takazudo Clipping*
新人研修コーディングについての資料作らねばーーー… HTMLコーダーとは何をする人？ (X)HTML, CSS, Javascriptを中心とした、 Webサイトの表側の技術を担う人です。 サイト設計 → デザイン → コーディング → システム開発 具体的には… コードを書いて、ページを作っていったり…((X)HTML+CSS) 仕掛けをのっけて、分かりやすいインターフェイスを作ります。(Javascript) (X)HTMLって何？ (X)HTMLとは、ページの文書構造を表す言語です。 ページの内容を把握し、適切なマークアップ※を行います。 ※(X)HTMLタグを書いてページを作っていくこと CSSって何？ CSSとは、(X)HTMLのタグに、見栄えの要素を加える言語です。 具体的には、この要素の下に線を引く、後ろに画像を敷く、 文字サイズを指定する、右側に配置するなどとい
「フロントエンド・エンジニア」という呼び名のパワー - モジログ
私の仕事は、Zope/PloneをベースとしたカスタムCMS（その顧客専用のコンテンツ管理システム）を開発するというもので、これは「Web開発」とか「サーバサイド開発」とか呼ばれるカテゴリに入る。 これに対して、HTMLやCSS、JavaScriptなどクライアントサイドの開発・コーディングを担当する人を、最近のWeb業界では「フロントエンド・エンジニア」と呼ぶ場合があるようだ。これはなかなかいい呼び名だと思う。 一般的に「Webデザイナー」と呼ばれる人の仕事は、じつに幅広い。ビジュアル的に「デザイン」すること（どんなサイトにするかの「絵」を作ること）や、サイトの構造・ラベリング・ナビゲーションといった「情報アーキテクチャ」を決めること、そしてHTMLやCSS、JavaScriptといった技術によってそれらを実装することは、それぞれ異質な作業であり、別種のスキルが求められる。 最近はこうし
ウェブデザイナーのための16のFirefoxのアドオン | コリス
Mashableのエントリーから、ウェブ制作に役立つ、16のFirefoxのアドオンを紹介します。 Another 16 Firefox Add-ons For Web Designers Font Finder テキストに指定されているスタイルシートを表示します。 Link Evaluator ページのリンクをチェックします。 LiveHTTPHeaders ヘッダ情報を表示します。 OperaView Operaでのレンダリング確認用に。 Pagediff 別々の2ページの差分をチェックします。 Python Sidebar for Mozilla サイドバーにPythonのリファレンスを表示します。 RankQuest SEO関連の各種情報を表示するツールバー。 SEOforFriefox GoogleやYahoo!の検索結果ページに、SEO関連の情報を表示します。 SEOQuake
Clear Sky Source - Re:CSSによるデザインワークと相性のよいHTMLって？
コバの備忘録いつも良質なエントリーでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」。 若干前になりますが、そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリーがありました。 ここにたくさんのことが書かれておりますが、本日はさらに僕が実践していることを紹介したいと思います。 と言っても、まずは「CSSによるデザインワークと相性のよいHTMLって？」の内容の概略から。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように 特に説明するまでもなく、要素の役割に応じてID・クラスを適切に付けようねということですね。 同じようなものには同じクラスを割り振る 良く、「IDだけを振っておしまい」と言う状況がありますが、さらに同じような役割の要素にはクラスも設定しておきましょう、ということです。 tableのtrごとに「odd」「
なぜ美しいコードを書くのか - 304 Not Modified
なぜ美しいコードを書くのか。 それは、プログラムは人に読ませるものだからです。 この考えを、一度ギークな人々にぶつけてみたかったんですよね。 だいたい、プログラムはコンパイラ（またはインタプリタ）を通して実行するのですから、読ませるのは人じゃなくて機械なんですよ。だったら、コンパイラが理解できる正しい文法で書けば、人間様が理解しにくいようなコードでも良いじゃないかって思いますよね。 でも、私が仕事でプログラミングをしていくうちに一番強く思うようになったことはコレなんです。人の頭で理解できないようなプログラムが、コンピュータの上で正しく動くなんて思えません。人の頭で覚えきれないような長い関数は、分割すべきなんです。可読性の高さ（シンプルであること）こそコードの美しさであり、プログラム上での個性なんて一切捨てて、誰もが理解しやすいプログラムを書くよう常に意識しています。 最近ではペアプログラミ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
