DHTML - 最低限文化的なCSSアナログ時計 : 404 Blog Not Found
2011年10月09日14:15 カテゴリLightweight Languages DHTML - 最低限文化的なCSSアナログ時計 これ見たら一つ作り置きしたくなってきたので。 Demo 右の通り。 一応 WebKit (Safari & Chrome on Mac/PC/iOS/Android)、Firefox、Operaで動くのを確認。Operaで動く分、AppleのiPod Nanoのページよりも互換性は少し上です。 なぜかIEで動かない。参考にした Fun with CSS Transforms in Firefox and Webkit - zachstronaut ではIEでもぐるぐる回転しているのですが。 何をやっているかは、ソースを見ればおわかり頂けるかと。 それよか、ちょっと驚いたのが、これ。 WebKitのWeb InspectorってリアルタイムでDOMの変化追え
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
こんなに高品質なのに無料で利用できるCSSベースのテンプレートのまとめ
企業用サイト用をはじめ、コマース用、ポートフォリオ用、ブログ用などの高品質ながら無料で利用できるCSSベースのテンプレートを紹介します。 テンプレートは1ページだけのものから、配下ページなど複数のページが揃っているものもあります。 ※テンプレートは全て無料で利用が可能ですが、ライセンスを必ず確認してください。
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
IEでもCSS3を使うためのツールやリソース集:phpspot開発日誌
CSS3 Compatibility Tools, Resources and References for Internet Explorer :Speckyboy Design Magazine IEでもCSS3を使うためのツールやリソース集がまとまっているエントリのご紹介。 CSS3使いたいけどIEがネックという場合に使えるライブラリやリソースです。 「これ、CSS3でやったら数行なんだけど」という便利なCSS3なわけですが、各種ライブラリを導入することでIEでも使えます。 2010年9月時点でも色々な便利なものが出回っているようで覚えておいて損はなさそうです 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」
22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」:phpspot開発日誌
PrimaryCSS 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」。 単体のCSSで予め用意されている22のレイアウトを簡単に実装できるものです。 レイアウトの種類は沢山あります。幅は固定されているので好みに応じて一括置換すればよいでしょう。 サイト上でHTMLコードの発行もできるので、サクッと複雑な段組レイアウトを作成したいような場合に便利そうです。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 使えるCSSレイアウトテンプレート集「mycelly.com」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」:phpspot開発日誌
HTML5 video player in CSS with Silverlight and Flash : MediaElement.js CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 HTML5非対応ブラウザ向けに、Flashはもちろん、こちらのライブラリではSilverlightもサポートしています。 こうしたライブラリも多数出揃ってきていますが、どれがよく使われるようになるんでしょうね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 MooTools用のHTML5動画プレイヤー「Moovie」
罫線を重視したCSSフレームワーク·Atatonic MOONGIFT
AtatonicはCSS製のオープンソース・ソフトウェア。HTMLのデザインにおける柔軟性は非常に高い。だが柔軟性はあっても見やすいデザインにできるかどうかと言うと話は別だ。読みやすさで言えばむしろ画一的なデザインの方が良かったりする。 罫線に沿った綺麗なデザイン 整ったデザインを各種ブラウザに合わせて作り込むというのは非常に手間のかかる作業だ。そのような時に使えるのがCSSフレームワークになる。読みやすさを重視したサイト構成を考えるならAtatonicを使ってみると良さそうだ。 Atatonicは2カラムで読みやすさを重視している。背景に罫線の入った画像を利用しており、行毎にきちんと文字が並んでいるのが分かるはずだ。英文らしく、最初の文字が大きくなる効果もある。カラムの中でさらに2カラムに分けたり、引用表示にも綺麗に対応している。 フォームにも対応 文字サイズが若干小さいように見えるが、
軽量なCSSフレームワーク·Invisible MOONGIFT
InvisibleはCSS製のオープンソース・ソフトウェア。CSSはブラウザによって解釈が異なる部分があり、そのために一つのブラウザで整っても、別なブラウザでは崩れてしまうということがよくある。そうした誤差を吸収する意味でもCSSフレームワークを利用するメリットは大きい。 グリッドデザインが容易に CSSフレームワークとして様々な機能を提供するものもあるが、逆に束縛が大きくなってしまったり決められたルールを覚える必要があったりと面倒になってしまうことも多かった。もっとシンプルなものが良いという人に向いているのがInvisibleだ。 InvisibleはHTMLタグ全般について設定をリセットすることから開始する。その後で幅を割合で設定するクラスや左右配置を定義するクラスを追加する。これを使うことで三段や四段のカラムを使ったWebサイトデザインが容易になるという仕組みだ。 レイアウト例 フレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
so-network.biz
IDEA * IDEA
指定した画像をCSSにしてくれるジェネレータ・・・『Img to CSS』 | 100SHIKI
CSSをすっきりきれいに整形してくれる『ProCSSor』 | 100SHIKI
ウェブプロジェクトに必要なファイル群を一括生成！『Instant CSS Code』 | 100SHIKI
無料でつかえるCSS/（X）HTMLのテンプレート38個
IDEA * IDEA
IDEA * IDEA
