サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
unformedbuilding.com
WebStormとPhpStormというIDEがあるのですが、この IDEはSassをサポートしていて、ハイライトなんかもしてくれます。 ただSCSSファイルをコンパイルするのにコマンドプロンプト立ち上げるのめんどくさいなーと思ってなんとかできないか調べてみました。 参考にしたのはこの記事です。 Easy SASS compilation in WebStorm / PhpStorm | Richard Tuin’s mindspins ただ、これの通りにやっても上手くいかなくて、前回は諦めましたが、今回は上手くいったのでやり方をメモしておきます。 まずはRubyとSassをインストールして、Sassが使える状態にします。インストール方法なんかは検索すればいっぱいでてきます。 準備ができたらWebStorm(PhpStorm)の設定をします。 SettingsからExternal Tool
11月11日から11月18日までのまとめです。 スライド「CSS Power Tools」はお勧めです。Moment.js、jQuery Lifestream、Windows Phone 版 IE9 とデスクトップ向けの IE9 の違い、など。 HTML & CSS CSS Power Tools CSS 関連のツールを紹介しているスライド。 CSS box-shadow Can Slow Down Scrolling – Airbnb Engineering box-shadow のブラーの指定が大きくなるに伴ってスクロールが遅くなるとのこと。 CSS3 animated dropdown menu – RedTeamDesign CSS ドロップダウンメニュー。IE6 には jQuery で対応。 CSS3 Hover Effects | Blog of Alessio Atzeni
10月28日から11月4日までのまとめです。 time 要素がなくなったことに関する話題が多いです。復活するかも、という話もありますが……。 他には jQuery 1.7 リリース、CSS transition のテクニック、SVG を始めてみよう的な記事など。 HTML & CSS CSS3 in practice, maddesigns (Sven Wolfermann) #css3 CSS3 でできることのスライド。メジャーどころのプロパティの解説です。 The WHATWG Blog — WHATWG Weekly: Now it’s <time> for <data> time 要素がなくなるそうです。替わりに使えるのは data 要素。 Bruce Lawson’s personal site : Goodbye HTML5 <time>, hello <data>! time
「SVGにチャレンジ! 第1回」です。第2回があるかは分かりません。 インラインSVGを使って『アンリミテッド:サガ』というゲームのスキルパネル風のメニューを作ります。 実物は「アンリミテッドサガ スキルパネル」とかで画像検索してみてください。 このスクエアさんの『アンリミテッド:サガ』というゲームがすごく好きでですね……以前からこれをウェブページとして作ってみたいと思っていたんですよ。 クリッカブルマップとかも考えましたが、あれあまり好きじゃない。 というわけでSVGでやることにしました。拡大しても綺麗ですしね! Unlimited Saga Style Panel Menu with SVG & CSS デモファイルをダウンロード 表示確認で一番期待通りに表示できたのは、Firefox 7とChrome 16 devです。 IE 9とSafari 5.1は、transitionしません
『Wixel』を見ていて、ナビゲーションの見せ方が面白いなーと思ったので、CSS Transitionsを使ってギャラリーに応用してみました。 まあ練習にはなったかなと思いますw ギャラリー "旧古河庭園にて" デモファイルをダウンロード どうでもいいですが写真は自分で撮ったものです。 もっと見たい方は「34 Photos @ 旧古河庭園 :: mlog」をどうぞ。 まずはHTMLから。 aの中にdivが入ってます。これが気持ち悪い場合には違う方法も取れますが、それについては後で書きます。 <ul class="gallery"> <li> <a href="#"> <img src="images/01.jpg" width="200" height="200" alt="" /> <div class="caption"><span>洋館</span></div> </a> </li>
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
テキストをCSS用にエスケープするツールを作ったので、一応紹介しておきます。 CSSのcontentプロパティなどでテキストを書くときなど、そのまま書いてもいいのですが、日本語などの場合は文字コードが面倒くさいのでエスケープした文字列を入れておくと便利だと思っています。 font-familyの指定とかに使うこともあるかもしれません。 この辺の話はWebTecNoteさんの「[css] contentプロパティで挿入できるコンテンツ」という記事が分かりやすいです。 で、上記リンク先にも今回作ったものと似たような変換機があって、以前はよく使わせてもらっていたのですが、何と言うか、練習も兼ねて自分で作ってみたいと思ったわけです。 まあ自分なりに使いやすいものができたかと思います。 Text Escaping for CSS 使い方は上のテキストエリアに好きな文字列を入れるだけです。 あ、改行も
9月22日から9月29日までのまとめです。 CSS コードをテストしてシェアできる labcss、CSS でデザインしたボタンの共有サービス CSS Button、Sass や CoffeeScript も使えるコード共有サービス Tinkerbin、Metro UI 風デザインのサイトなど。 HTML & CSS labcss – create & experiment CSS のコードをテストしたり、シェアしたりできるサービス。下のプレビューから要素をクリックするとサイドバーから簡単にスタイルをいじれます。 CSS3 Image Styles 画像に様々なスタイルを適用するチュートリアル。 Metro style appのために拡張されているCSS(フォーム編) – ういはるかぜの化学 – subtech タイトル通り。スクロール編はこちら。 Scalable and Modular
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー
SVGのフィルタについては以前も少し書きましたが、今回はfeGaussianBlur要素を使って、ガラスのようなエフェクトを付けてみたいと思います。 デモページは以下ですが、たぶんFirefoxでしかちゃんと見れないと思います。 Glass effect with CSS & SVG filter デモファイルをダウンロード 背景にはrachel a. k.さんの「52. she’s gone where the goblins go」を使用しています。 この画像はCC BY-NC-SA 2.0でライセンスされています。 今回作ったSVGファイルにはこんな感じのが書かれています。 <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000
9月2日から9月7日までのまとめです。 レスポンシブな CSS フレームワーク3種、CSS でデザインするボタン、jQuery のプラグインパターン、第一回 全国統一 HTML5実力テスト、など。 HTML & CSS Mike Taylor and stuff. 🍔 HTML5 のフォーム周りなどの確認ができます。 CSS3 vs Photoshop: Transforms | Webdesigntuts+ CSS と Photoshop での transform のやり方。 Nettuts+ Quiz #5: CSS Specificity and Cascading | Nettuts+ クイズ。サンプルの HTML に クイズ問題の CSS を指定したらテキストはどの色になるか、というもの。80% でした……。 LESS Elements: a collection of use
なんとなく思いついたので、CSSでローディングアニメーションを作ってみました。 画像とかcanvas使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。 今回は『jsdo.it』で作ったので、それを置いておきます。 Firefox 5以上、またはWebkit系のブラウザで動きます。 2020年1月8日 追記: 『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。 CSS Loading Animation 簡単にですが解説してみたいと思います。 まずHTMLから。 <div class="loading style-1">Now Loading...</div>使うのはdiv1個です。 class名が2つ付いてるのは、最初いくつか作ろうと思ってたからです。 (結局思いつかなかったので諦めましたが……) では次にCSS
CSSを拡張して記述できるものと言えば、SassとLESSが有名ですね。 これらはHTML/CSSフレームワークなどでも使われていたり、日本語での解説も多くあります。 ですが、今回はそのどちらでもない、PHPベースのプリプロセッサである「PCSS」と「CSS Crush」の簡単な説明をしてみたいと思います。 誤解のないように言っておきますが、これは「Rubyとか入れなくてもいいしこっち使おうぜ」という内容の記事ではありません。 こういうものもある、という程度に見ておくといいかもしれません。 また、この記事内の解説は公式ドキュメントを簡単にまとめたものです。 詳しく見たい方は公式サイトをご覧ください。 PCSS – CSS Server-side Preprocessor 「ショートカット志向サーバーサイドCSS3プリプロセッサ」とタイトルに書かれています。 PCSSではどんなことができるの
IEで変な現象が起きてしまったのでメモ。 Internet Explorer 7以下で背景画像が表示されなくなるといったもの。 その原因となった部分と対処法。 背景が表示されなくなったページこういうページを作ってました。 背景画像が表示されなかったページ このページの「タイトル」と書かれている部分ですね。 (実際に作ったページとは画像を変更しています) この部分のHTMLとCSSは以下。 <div id="main"> <div class="article"> <div class="head"> <h2>タイトル</h2> </div> <div class="body"> <p>テキスト。テキスト。テキス...</p> </div> </div> </div>/* ここが表示されない */ #main .article .head { background: url(img/main
フォントサイズを指定するときの単位について、ちょっとだけ。 『Webデザインレシピ』さんの以下の記事で、フォントサイズを指定するときの単位について触れられていました。 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め とても分かりやすい説明でいい記事だと思うのですが、1箇所だけ気になったので勝手に補足してみようかと思います。 でもIE7以降、最近のブラウザでは拡大表示がフォントだけ大きくするんじゃなくて、ページそのものをズームしてくれます。ですからIE6をターゲットにしないなら、px で指定しても別に問題ないんじゃないかなとも思ったりします。 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多めご存知の通り、Internet Explorerはpx指定されたフォントを拡大できません。 ただし、IE 7以降にはページの拡大縮小があるので、もうpx指定でもい
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
切り替えボタンを押すとリストの並び順を逆にするだけのスクリプトを書いてみました。 分かりやすくするためにリストを使っていますが、他の要素でも問題ないと思います。 ブログのコメント欄を作っているときにコメントの並び順を新着順にしてくれと言われて作ったんですが、ブログのコメントって普通は投稿順(古い順ね)に並んでいるから違和感があったんですね。 それで「どうせなら閲覧者が切り替えできるようにすればいいんじゃね?」って考えて、これを作ることにしました。 まず、一番最初に作ったもの。 これは『jsdo.it』で書きました。 クリックでリストの並び順を逆に - jsdo.it - share JavaScript, HTML5 and CSS HTMLは普通のリストですね。 jQuery部分ですが、ol#reversibleの子要素をtoArray()で配列にし、reverse()で逆順に。 そして
jQuery.simpleLoopSlider.js Default autoslide:false controller:false, pagination:false, interval:1500
この記事は『Stack Overflow』に投稿された、user553944による質問「Would you recommend starting from HTML5 & CSS3 for beginners?」と、Boldewynによる最も評価されていた回答を翻訳したものです。 翻訳は完全ではありませんし、だいぶ意訳している部分がありますので、ぜひ原文もご参照ください。 また『Stack Overflow』の質問・投稿はCreative Commons Attribution-ShareAlike 3.0 Unportedですので、この記事も同様のライセンスで公開しています。 user553944による質問私はウェブデザイン・開発の世界に入りたいと考えているミドルスクールの学生です。 私は小さいころからウェブ(を使うこと)に興味を持っていましたが、今は“作る”側になりたいと思っています。
Googleの+1ボタンが検索結果に反映されるようになりましたね。 あのボタン、検索結果アイテムにマウスホバーでキラッとするんですが、それを見ていて以前『jsdo.it』で作ったのを思い出したので、forkされたものも含めてまとめてみようかと思います。 作ろうと思ったきっかけは『AddyOsmani.com』の下記のエントリーでした。 ShineTime — A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects ギャラリー自体もすごいんですが、このエフェクトがかっこよかったので、とりあえず作ってみようと思ってやってみました。 キラッとするエフェクト デモ コードが色々とアレな感じですが、動きだけは実現できました。 その後、@GeckoTangさんがforkしてくれました。 こっちのほうが分かりやすいです。 fork
6月27日から6月28日までのまとめです。 PCSS、OOCSS、Wptuts+ オープン、あなたのサイトデザインがダメな20の理由、など。 HTML & CSS PCSS – CSS Server-side Preprocessor SCSS や LESS みたいなもの。PHP 5 で動作する。Unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. An Introduction to Object Oriented CSS オブジェクト指向 CSS の手引き。 Techniques for Context Specific Images | CSS-Tricks Contex
最初なので、ここ数日ではなく最近1ヶ月ほどで印象に残ったものを紹介しようと思います。 HTML & CSS Namespacing fragment identifiers ― CSS Wizardry HTML の id 属性に .(ドット) と :(コロン) が使えることについての問題点と、CSS ではどうすればいいかという記事。 Normalize.css: Make browsers render all elements more consistently. 説明文を簡単に訳すると "Normalize.css は、全ての要素をより一貫して、よりモダンスタンダードに沿ってブラウザにレンダリングしてもらうための、カスタマイズしやすい CSS ファイルです" となります。また、CSS 内のコメントには、なぜこの指定をしているのか書かれています。 A Whole Bunch of Am
「CSS Conditional Rules Module Level 3」にあるFeature queriesとDocument queriesの簡単な説明と覚え書きです。 Media-specific style sheets(@media)は色んなところで解説されてるのでここではやりません。 この記事を書いている時点で、「CSS Conditional Rules Module Level 3」はEditor’s Draft 7 June 2011が最新版ですので、それに従って説明したいと思います。 内容は今後アップデートされるでしょうし、これはあくまでも簡単な覚え書きですので、ぜひ原文もご参照ください。 CSS Conditional Rules Module Level 3 Feature queries: the ‘@supports’ rule@supportsルールは、ユー
TopsyのSocial Modulesに何か他の使い道はないものかと思ってやってみました。 Social Modulesのカスタマイズに関しては、以前書いた「Topsyウィジェットの設定について」をご確認ください。 このウィジェットではTopsyの検索コマンドがそのまま使えるので、それを利用してニュース配信みたいなことができるんじゃないかなーと思いました。 気になる記事を見かけたらTwitterにポストして、それを拾ったTopsyからリンクを引っ張ってくるという感じです。 サンプル (この段落に実際に動作するウィジェットがありましたが、Topsyは2015年12月16日にサービスを終了したため、ウィジェットを削除しました) これのコードは以下のようになっています。 <div id="topsy_search_widget"> <script type="text/javascript">
2020年1月7日 追記: picplzは2012年7月3日に閉鎖されましたので、この記事のデモはもはや動きません。 写真にフィルタをかけてアップロードできる写真SNSのpicplzですが、2月にAPIが公開されていましたので、それを使ってギャラリーを作ってみました。 picplz API 今回はpicplzのinterestingにある画像を一覧表示します。 いやまあ直接見に行けばいいってのは分かってますけどねw デモとダウンロードは以下からどうぞ。 IE 8以降なら普通に見れると思います。 Interesting Photo Gallery w/ picplz API デモファイルをダウンロード まずはHTMLから。 必要な要素をそのまま記述しておきます。 <div id="gallery"> <!-- ここにサムネイルのギャラリーが入る ul > li > a > img --> <
Google Chromeでtext-shadowしたフォントの表示がおかしくなることがあったのでちょっと調べてみました。 Arialやメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。 環境はWindows Vista/7でのGoogle Chrome 13.0.772.0 dev-mです。 CSS text-shadow on Google Chrome Test 上段がConsolas指定、下段がMS Gothic指定です。 スクリーンショットは以下の通り。 Google Chromeは一部のtext-shadowにブラウザ独自のアンチエイリアスを使用するらしく、それによって起こる現象と思われます。 また、上のテストを見る限りでは 「最初のシャドウ指定にブラーが設定されており、アルファ値が0以外のカラーを
よくブログのサイドバーやフッターなんかで見かける月間アーカイブメニューですが、ちょっとスペース取りすぎだと思っています。 そんなアーカイブメニューですが、素敵なデザインを見かけましたので、そのデザインを参考にして自分なりにコンパクトなアーカイブメニューを作ってみました。 参考にしたのは以下のサイトです。 Devin’s Heaven どんなコードかまでは確認していませんが、こういう方法があったか、と思いました。 自分で作ってみたものは以下です。 Compact Archive w/ jQuery デモファイルをダウンロード HTML部分は次の通り。 ちょっとマークアップがアレな感じでごめんなさい。 <div class="archives"> <div class="year-select"> <ol> <li><a href="#year2011">2011</a></li> .....
次のページ
このページを最初にブックマークしてみませんか?
『Unformed Building』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く