[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
個人的に使いそうなPHP、CSS、HTML等のフレームワーク17個 - かちびと.net
個人的なメモです。今まであまり使って いなかったので少し使っていこうと思い、 いくつか自分でも使えそうなフレーム ワークを探しました。表題の通り、PHP、 CSS、HTMLやJS等しか僕は能力が 無いのでこの辺のフレームワークの まとめになります。 使いやすそう、使いにくそうというのは個人差が出そうだなぁと触ってみて思ったのですが、それぞれ良し悪しな感じもしたのでとりあえず気になったものだけメモしておきます。おそらく有名所ばかりだと思いますが個人的なメモなのでご了承下さい。 順不同です。 Blueprint CSSのフレームワークです。シンプルな設計ながら素敵なレイアウトが組まれている印象でした。 Blueprint Sass まだ触っていませんが、好評っぽいのでメモ。Railsみたいですが、CSSジェネレータ的な使い方もあるとの事でかなり気になる存在。Compassというのを一緒に使うの
Sasha
Marsactu.fr vous l’a déjà raconté, les créatifs qui avaient travaillé pendant plusieurs semaines sur l’appel d’offre pour la création du logo et de l’identité v isuelle de Marseille 2013 avaient très, très mal pris son annulation. Lors d’un conseil d’administration, en Avril dernier, Bernard Latarget, le patron de 2013 avait purement et simplement déclaré l’appel d’offre « infructueux », sans aucu
Arctic Core - the open source AUTOSAR embedded platform
Quick Information. Admission Prices Trade Dealers: Free Adults: £1.50 Kids & OAPs: 75p Kids under 5: Free Opening & Contact Open every day except Christmas Day. 10am - 5pm Tel: 01524 844734 GB Antiques Centre - 100 individual antiques & collectables dealers – all indoors, all year round. GB Antiques Centre is now one the country’s biggest indoor antiques and furniture centres, attracting over 200,
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
ギズモードのデザイナーが語る！ エイプリルフールの裏側
先日のエイプリルフールは楽しみましたか？ 毎年ネット上でたくさんのサイトでがウソをついたり、悪ノリしたりするので、毎年楽しみにしてる方も多いのでないでしょうか。今年のギズモードはトップページが左右反転文字になって、読みにくい、やりすぎ！ と大好評（？）でした。 また各記事ページには、あのアザラシ君に常駐していただき、ビックリした、かわいい、こわいｗなどこちらも大盛況でした。 さて、そんなギズモードへの反応を楽しみながら見させてもらってたんですが、｢左右反転の仕組みどうなってるの？｣という声を多くいただいたので、今回ちょっとだけご紹介したいと思います。 実は、サイトのデザインを構成するCSSファイルの調整だけで左右反転が可能なんです。 内容は下記のとおり。 body{ -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform:
フリーのXHTML / CSSテンプレート10 | CREAMU
91831729/ iStockphoto/ Thinkstock サイトをさっと作りたい。 そんなときにおすすめなのが、『Top 10 Html/CSS Web Templates Of March 2010 For Free Download』。フリーのXHTML / CSSテンプレート集です。 いい感じのものが揃っています。 Photographer Enterprise Solutions Corporate 使いやすいものが揃っていると思うので、ぜひ見てみてください。 Top 10 Html/CSS Web Templates Of March 2010 For Free Download また遅れてしもうたすんまへんm(_ _)m今日は天気よくて気持ちいいですね〜。 いろいろ詰まっているので進めます。
css3のtransformの実装サンプル - かちびと.net
今更ですけど、css3のサンプル をメモ代わりに記事にしておき ます。使わないと思っていました が、仕事以外で使うのでコピペ 用にメモ。 実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます デフォルト デフォルトの状態 これが基準です skew / 要素を曲げる skewX(*deg) -moz-transform: skewX(30deg); -webkit-transform: skewX(30deg);
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
クオリティーの高いフリーのXHTML/CSSテンプレート30 – creamu
サイトをさっと作りたい。 そんなときにおすすめなのが、『30 Latest High-Quality Free (X)HTML/CSS Templates Must See Now』。クオリティーの高いフリーのXHTML/CSSテンプレート集です。 いい感じのものが揃っています。 Urban Gear スライドショーのある、ECサイトのデザイン Ornare サムネイル付きのスライドショーのある、すっきりとしたサイトデザイン My Porfolio ポートフォリオに使えるデザインテンプレート Megan シンプルなタイポグラフィーデザイン Cantya ビジュアルにイラストをうまく使った、見やすいレイアウト PSDファイルが含まれているものもあるので、ぜひ見てみてください。 30 Latest High-Quality Free (X)HTML/CSS Templates Must See
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation
Warning: This isn't going to work in any currently available version of Internet Explorer* or many older browsers. The two clocks below are just HTML. There are no Adobe Flash files or my beloved <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform proper
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
日記 | ヨモツネット
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 混在でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クロスブラウザ対応・グリッドレイアウトのCSSフレームワーク・FEM - かちびと.net
HTML+CSS templating
floatした画像の横のテキストの回り込みをクリアするCSS – creamu
CSS3 ドラえもん
IDEA * IDEA
css-lecture.com