コーディングなんかこわくない！ アレルギー克服講座HTMLやCSSなどのコードにアレルギーのあるデザイナー向けに「ひとまずわかった気になって苦手意識を克服する」ための講座を開きました。 -- コーディング苦手意識調査してみた（結果発表） http://www.hanarenoheya.com/note/enquete/
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
レスポンシブWebデザインで使えそうな2つのテーブル実装例
以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも！」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは？と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース（GPL License）で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています
Responsive Data Table Roundup | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There has been a bunch of takes on responsive data tables since I first published about it. View Demo The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiri
Web 専用コードエディタ Adobe Brackets の発表 - akihiro kamijo
以前の記事でお伝えした、Web コーディングに特化したコードエディタ Brackets の Sprint 10 が公開されました。それにあわせて、アドビからのアナウンスもようやく行われました。 Brackets は無償のオープンソースプロジェクトです。コードは githab に公開されています。 （brackets@githab） Brackets を他のエディタと比べた時の大きな特徴は以下の 3 点です。 インライン編集機能 HTML 要素に関連する CSS 属性をエディタ内でインライン編集 ブラウザとの同期 ブラウザ内のコンテンツをそのままライブコーディング、ブラウザとエディタ間の行き来が発生しない HTML/CSS/JavaScript のオープンソースプロジェクト Web 制作スキルで、誰でも Brackets の開発に貢献ができる （実際、Brackets チームは Bracke
IE 6, IE 7, IE 8 が退場した未来 - latest log
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
iPhoneアプリケーション開発ガイド
TOPICS Programming , Mobile , HTML/CSS , JavaScript 発行年月日 2010年08月 PRINT LENGTH 208 ISBN 978-4-87311-461-3 原書 Building iPhone Apps with HTML, CSS, and JavaScript FORMAT Objective-Cを使わなくてもWebアプリケーション開発の標準技術でiPhoneアプリケーションを開発できます。本書ではパソコン向けWebアプリケーションをスタート地点に、CSSのカスタマイズ、jQueryの利用、jQTouchを利用した高度なアニメーション、PhoneGapを使ってネイティブアプリケーション化することでiPhone固有の機能を使う方法、そしてApp Storeへの登録に至るまで、HTML＋CSS＋JavaScriptによるiPhone
日記 | ヨモツネット
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 混在でき
『続・ハイパフォーマンスWebサイト』イベントに参加しました
こんにちは。Yahoo!検索の高林です。先日、書籍『続・ハイパフォーマンスWebサイト』（オライリー刊）に寄稿させていただいた関係でトークイベントに参加してきました。 お忙しいところ、たくさんの方々に出席していただき、ありがとうございます。 今回のイベントでは、「Yahoo!検索のパフォーマンス向上策全て見せます！」というテーマでYahoo!検索で実際に行っているTipsの紹介と現在、Yahoo!検索で検討しているシステム構成などを発表しました。 そのときの発表内容は、以下のリンクから確認できますのでご興味のある方はご覧ください。 『続・ハイパフォーマンスWebサイト』出版記念トークイベントのビデオを公開 (O'Reilly Japan) トークセッションでは来場者の方々にたくさんの質問をいただきました。今回はそのなかからいくつかピックアップしてご紹介したいと思います。 ――Q: Yaho
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
Gmail for Mobile HTML5 Series: CSS Transforms and Floaty Bars
Gmail for Mobile HTML5 Series: CSS Transforms and Floaty Bars On April 7th, Google launched a new version of Gmail for mobile for iPhone and Android-powered devices. We shared the behind-the-scenes story through this blog and decided to share more of what we've learned in a brief series of follow-up blog posts. This week, I'll talk about different ways to animate the floaty bar. Even from the earl
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
「Discover Shiretoko」で使われているWEBデザインの美麗テクニック – ウェビンブログ
おしらせ： サイトの改装を予定してます。 時間がかかりそうなので、このブログも一時的に見栄えが悪くなるかもしれません。そうなったらすみません。 Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語 美しい。 流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。 しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。 北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。 このサイトではWEBデザインの美しいテクニックがあちこちに使われています。 全ては紹介できませんが、取り急ぎ目立つものだけ。 WEBデザインの可能性を広げる、透過PNG このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカル
metaphase coder team labs - 半角英数字を改行する
2009年5月22日 16:02 URLやメールアドレスなどの半角英数字を羅列した際に、それを包括する要素を突き抜けてレイアウト崩れが発生することがあります。 これは、スペース等の区切りが登場するまで一つの単語として認識され、通常では改行されません。 これをJSで解決されてたブログを見つけたのでご紹介します。 CSSにて[word-break:break-all;]と指定すれば、半角英数字の文字列の途中であっても領域に合わせて改行することが可能です。 しかし、これはIEでしか対応しておらず、そのほかのブラウザでは対応していません。 「to-R」というブログで「wordBreak.js」というものが公開されており、IE以外のブラウザでも[word-break:break-all;]と同様の効果が得られるようです。 FirefoxとOperaでword-break:break-allを実現する
CSSを無効化するブックマークレット・改 - LogJET
CSSを無効化するブックマークレット・改 CSSを無効化するブックマークレットを更に改造してみました。 CSS無効化・改 (クリックするとこのページのスタイルが無効になります) 右クリックからお気に入りに登録してください。 今回のブックマークレットはCSSの無効、有効を切り替えることができます。 このブックマークレットについて 先日、うちのアクセスログ見てたら2ちゃんねるSafariスレからアクセスがあったので、何だろ？と思って見てみたら、CSSを無効にするブックマークレットでアクセスがありました。 その時、同時に紹介されていたリンク先のPimp My Safariというサイトで、CSSのオン、オフを切り替えるブックマークレット「Toggle linked CSS」が公開されていたのですが、どうもFirefoxやIEでうまく動かない。trueというページが返ってきてしまう。 ブックマークレ
Web Directions East 2008 カンファレンスレポート（前編） | クリエイティブ・タブロイド withD（ウィズ・ディー）
11月7日（金）〜9日（日） に開催され、豪華なゲストが注目されたWeb Directions East 2008。レポート前編では、カンファレアンス前半の模様をお届け。世界中から、ウェブの最前線で活躍する一線級の人たちが東京に集る、注目のイベントとなった「Web Directions East 2008」。初日のカンファレンスデイとなった11月7日、会場のベルサール西新宿には多くの来場者が集る盛況ぶりでした。オープニングでは、WWWの生みの親であるTim Berners-Leeもビデオレターで登場するなど、これまでの日本のセミナーやイベントでは類を見ない、豪華な顔ぶれによる贅沢なイベントとなりました。 withDもメディア協賛としてサポートした本イベントのカンファレンスデイを前後編の2回にわたってレポートしますが、前編は連載「一歩先のWeb標準」を担当しております、ゆうがお送りいたします
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
【2024年12月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年12月26日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accelerating Your Growth from R&D to ROI
