矢印・特殊文字・記号一覧｜コピペ・標準フォントで使用可能 | 初代編集長ブログ―安田英久
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
HTML5になると結局何が変わるの？
約10年ぶりにバージョンが上がるHTML5。 最近HTML5を取り上げた記事も多いですが 結局何が変わるのかよく分からない方もいるかと思います。 そこで、今回はホームページ作成の初心者の方のために HTML5の変更点をなるべくシンプルにまとめてみました！ まず、HTML5では「不要なタグ」が廃止され、 SEO的に重要な「新しいタグ」が増えます。 廃止されるタグには通常CSSで指定しておくべき center、font、uなどが完全に廃止されることになります。 以前から言われてきた 「見た目に関するものはCSSでやりましょう」ということですね。 （当方もまだfontタグなどを使っていますが；） そして新しいタグとして<header>や<footer>など 検索エンジンに対して構造を分かりやすくするタグが増えます。 フッターの部分を表す<footer>や 文章などのコンテンツを入れる<secti
2010年、押さえておきたいウェブデザインのトレンド
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
趣味のWebデザイン
趣味のWebデザイン Lecture Advice Note Info 小説 記事検索： ゲームマーケット2019秋に出展します（2019-06-30） 8年ぶりのスタイルシート更新（2019-06-25） 『シン・ゴジラ』の中の私（2016-08-05） 採用活動で「応募者の名前をネット検索」は禁ずべき（2016-07-10） オフィスチェアの座面カバーを探す（2016-05-12） 近況（2016-05-11） 性同一性障害の新入社員（2014-04-28） 『銀河パトロール ジャコ』と私とKindle（2014-03-30） 小保方疑惑と卒研の思い出（2014-03-13） 次第に通話が減っていく（2014-02-26） 私が愛用している目覚まし時計 SEIKO SQ691K（2014-02-25） 「観光地で英語が通じない」問題（2014-02-17） 私は紐靴を買わない（2014
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
“Misunderstanding Markup” 日本語訳
このコミックは、“Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip”にあるコミックを、著作者の許可を得て日本語に訳したものです。 元になった記事の翻訳も行っています。“Misunderstanding markup”をご覧ください。 先週、W3CはXHTML 2 Working Groupが年内でその活動を終了すると発表したんだ。単刀直入で、歓迎されるべきことだったんだけど、「XHTMLが終わってしまう」と多くの人を混乱させてしまった。Zeldmanのblogポストに寄せられたコメントを読むと、それが分かると思う。 仕方のない部分もある。異なる技術に、同じような名前がついていたことが原因なんだから。しかも、これは今に始まったことじゃあない。 たとえば、JavaScript。Javaになにか関係しそうだけど、そうじゃないよね。書き方がすこ
Webシステム開発者に送る便利なテンプレート·Web App Theme MOONGIFT
正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル:phpspot開発日誌
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
IDEA * IDEA
IDEA * IDEA
http://www.designwalker.com/2009/01/table.html