CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは,「Webページをコーディングして作る人」全般に当てはまる。 レベルは,0から4までの5段階。 (0) 非エンジニア (1) 初学者(入門書を学習してゆく段階) (2) ノーマル(基礎的な知識があり,ある程度の画面を作れるようになった段階) (3) 中級者(Webアプリの開発プロジェクトで1人月としてカウントできる水準) (4) 上級者(メインPG/デザイナとして,Web UIの主担当を任せられる水準) Webアプリのプロジェクト開始時に作業振り分けをするにあたって,新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお,システム開発上のスキルをチェックする事が主眼なので,アーティスト(
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。1つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridless [ad#ad-2] Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考:Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応(IE6/7も含む) CSS Resetには、Normalize CSSを使用。 参考:ブラウザのスタイルをリセットするスタイルシート -Normalize CSS 黄金比をベースにしたサイズと縦のリズムを使ったタイポグラフィ。 印刷時のスタイルをプリント時に最適化。 キャッシュの最適化。 HTML5+CSS3の採用。 安全なCSS Hack。 参考:IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中! ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ!すべてはプロモーションとコンテンツ次第なんだぜ!」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト! なぜWebデザインは重要なのか? 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか? ユ
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー&カルーセルプラグイン、チャート&グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね! New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS(Cascading Style Sheets、スタイルシート)ですね!今では CSS3 が話題を集めていて、CS
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど>< さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます! 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン(人件費) ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい! なんでどんどん情報をシェアしたいですね! もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
フォントのサイズの単位に何を使ってますか? px? em? それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く