[B! css] [10ページ] adstyのブックマーク

レイアウト作りを簡単にしてくれるCSSグリッドシステム

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

adsty 2010/10/19

レイアウトを均等に分けて組んでいく考え方。

リンク

HTML5+CSS3 入門

Webを記述する言語の標準の現状昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか：ウェブの歴史 [Page 2] よ

adsty 2010/10/03

HTML5の構造化要素を試し、CSS3でレイアウトを行う。

html
css

リンク

デザイナは要注目！明日から語れるHTML5＆CSS3（1/4）- ＠IT

デザイナは要注目！明日から語れるHTML5＆CSS3‥一撃デザインの種明かし︵13︶︵1/4 ページ︶ ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。いま世界で一番熱い﹁HTML5﹂﹁CSS3﹂とは？最近、﹁HTML5﹂﹁CSS3﹂といった言葉をよく耳にしませんか？これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5

adsty 2010/09/28

HTML5やCSS3の対応事例等。

リンク

HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集

当サイトで紹介した数多くのチートシートの中から、今まさに役立つであろうチートシートを厳選して紹介します。 ※未紹介のものも含まれています。 HTMLのチートシート CSSのチートシート jQueryのチートシート WordPressのチートシート [ad#ad-2] HTMLのチートシート

adsty 2010/09/24

厳選モノだから使えること間違い無し。

html
css

リンク

ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】

検索キーワードを調べるツールまとめキーワードを調べる決定版﹁Google キーワードプランナー﹂ Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナーキーワードの組み合わせが分かる﹁ラッコキーワード﹂キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。ラッコキーワード検索順位を調べるツールまとめ業者も使う順位チェックツール﹁GRC﹂他のツールだと毎回キーワードを入力

adsty 2010/09/14

ホームページ制作者・Webデザイナー向けの便利サービスのまとめ。

リンク

永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC

マークアップエンジニア︵以下、ME︶のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。︵いつもありがとうございます！︶そんなワケで、本格的にHTMLコーディングはしないけど、ちょこっとしたページなら組みますっていうデザイナー向けの、﹁コレだけ読めばすぐできる﹂シリーズを始めました。第一回は﹁携帯コーディング﹂についてです。携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、最低限の内容であれば覚えることも少ないですし、一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！携帯コーディングの基本基礎の基礎文字コードはShift-JIS CSSはインラインで指定︵タグに直接style属性を追加する︶画像を含むページ容量100KB以内︵HTML自体の容量は9KB以内︶画像はgifか

adsty 2010/09/06

携帯サイト向けのコーディング方法のまとめ。

リンク

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

adsty 2010/07/15

機能には惹かれるけど「behaviorスクリプト」というのが引っ掛かる。

リンク

jsdo.it

Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovr ai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovr ai a

adsty 2010/06/19

ブラウザ上でJavaScript・HTML5・CSSを書き共有するサービス。

リンク

CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集

cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。 cssとHTMLタグのマークアップのみで実装出来るテクニック集です。クロスブラウザ対応のみをcss-playから探したので、ついでにご紹介します。jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。シンプルなドロップダウンメニューシンプルなドロップダウンメニューです。マルチレベルのメニューも可能。demo縦並びのフライアウトメニュー横に出るフライアウトタイプ。画像を使用しています。demoクロスブラウザ対応のグラデーション

adsty 2010/06/15

CSSとHTMLタグのマークアップのみで実装できるクロスブラウザ対応のテクニック集。

リンク

HTML+CSS templating

HTMLテンプレートを作るのは簡単？赤の他人が作ったHTMLテンプレートを簡単に編集できるか？新人に数千ページのサイトのコーディングを任せられるか？ HTML, CSS, JavaScriptを覚えればコーディングは楽勝？そこまで簡単じゃないかもしんないブラウザのバグ？まぁそれもあります Cascadingという仕組みは素敵ですがあっという間にコードが大変なことになります CSSには素敵なセレクタがたくさんありますが、残念ながらIE6を下限とする環境では使えないものばかり

adsty 2010/06/13

HTML+CSSテンプレートの作成についてスライド形式で解説。

リンク

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。見出し(Headline)のサンプル集色やボーダーサイズ等の装飾部分はお好みで編集してください。見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

adsty 2010/06/13

オーソドックスな見出し（hタグ）のデザインサンプル集。

リンク

もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

class名やid名って付ける時悩みませんか？今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。これで、チョットだけ作業効率アップ！？ 2010年6月10日追記‥ この記事自体、2007年1月15日に書かれてるんでかなり古いです。あくまでも参考程度に留めてもらうのが良いかと思います。今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

adsty 2010/06/10

よくあるclass名＆id名を列挙。

リンク

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

HTML5版の新規でサイトを作るのに使えそうな一式です。今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。︻HTML5︼新規でサイトを作るのに使えそうな一式。Ver 1をDL︵zip‥12kb︶ HTML5版のVer 1を見る社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。コーダー飲みとか、CSSNiteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・それはさておき、中身のご説明などを続きにて。中身のご説明zi

adsty 2010/06/09

HTML5版の一式をZIPファイルで配布。

リンク

より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

cssやプログラミングマークアップをより早く Web制作を少しでも効率化しようと思って︵今更︶いろいろ便利そうな情報を探しました。既に使っている情報の方が多かったのですが、折角調べたのでシェアしたいと思ってエントリーです。 Web制作を少しでも効率化しようと思って︵今更︶いろいろ便利そうな情報を探しました。既に使っている情報の方が多かったのですが、折角調べたのでシェアしたいと思ってエントリーです。コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding︵本家︶HTMLコーディングが3倍速くなる？﹁Zen-Coding﹂秀丸Zen- Codingマクロコーディングの効率化を図

adsty 2010/06/09

Web制作を効率化するための情報リンク集。

css
html

リンク

CSSセレクタの高速化の話し - Webtech Walker

続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった︵というか全然知らなくてちょっとびびった︶ので紹介します。セレクタは右から左に解釈されるこれは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。︵#fooをとるとより高速︶特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して

adsty 2010/05/18

「セレクタは右から左に解釈される」が意外だった。

リンク

http://www.designwalker.com/2010/05/css3.html

adsty 2010/05/18

Webデザインの可能性をさらに広げてくれるCSS3のチュートリアルいろいろ。

リンク

| test

mameshibankさん豆柴日和 amecustomさんアメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん脚本家によろしく。 nisishowさんリフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★cairさん広報＆IR担当のオフィシャルブログ shikamaさん千葉の東京寄りでホームページ制作＆企画・運用中！saijoさん経営に終わりはない nina-yuanbeauteさん芳村仁奈オフィシャルブログ﹁Nina's Diary﹂Powered by Ameba frontier-ceo-bossさんフロンティア社長オフィシャルブログ Powered by Ameba ohtias-ceoさんソーエネ×オーチアス社長 alfortさん念ずれば花ひらく﹁会社経営﹂

adsty 2010/04/28

リンク付き画像がロールオーバーで半透明になるCSS。

リンク

CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu

96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。そんなときにおすすめなのが、﹃30 Pure CSSAlternatives to Javascript﹄。CSSだけでJavaScriptのような動きを実装するサンプル集です。なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubblesCSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed

adsty 2010/04/28

JavaScriptオフでもCSSのみで面白い動きを実装できる。

リンク

[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。 Different Stylesheets for Differently Sized Browser Windows デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

adsty 2010/04/26

実装方法はCSSとJavaScriptの二通り。サイズによって適したレイアウトにすることもできる。

リンク

覚えて良かったCSSテクニック « zaru blog

ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス幅：190px マージン：15px liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

adsty 2010/04/23

覚えておいて損は無いCSSのテクニックを５つ紹介。

css

リンク

はてなブックマーク

タグ

関連タグで絞り込む (36)

cssに関するadstyのブックマーク (311)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス