ここでは、Win,Macともに最近ユーザーが激増している「Sublime Text」でSassを快適に使えるようにするための、設定例を紹介します。 この設定は、著者の森田がSassのコーディングをする時に使っている設定（2013年8月現在）になりますので、あくまでも一つの参考として読んで頂き、使いづらいと感じる部分は、自分なりにカスタマイズしてより使いやすいエディタにしましょう。 キャプチャーはMacで撮っておりますが、Windowsも同じやり方で設定できます。 Sass用の設定を追加 まずは、SublimeTextを起動します。 SublimeTextを起動した状態 まず、機能を拡張するためにパッケージコントロールをインストールします。「Sublime Package Control」のサイトへアクセスしましょう。Installationページに記載されているソースをコピーします。 バー
（そのままではないか） たとえば以下のような HTML があるとして、 <div class="entries"> <article>foo</article> <article>bar</article> <article>baz</article> <article>qux</article> <ul> <li><a href="#">next</a></li> </ul> </div> article 要素の最後の子要素に枠線を入れたいとして、下記のように CSS を入れるとする。でもこれだとうまくいかない。どこにも border はつかないことになる。 article:last-child { border: 1px solid #ddd; } 仕様を参照すると、下記のように書かれている（:last-child は:nth-last-child(1)と同義なので、そちらの仕様）。
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
先月リニューアルしたこのブログのテーマを含め、3ヶ月で3つのWordPressテーマを作りました。空いている時間を利用しながらの制作だったので3ヶ月もかかってしまいましたが、Web制作に関してほぼ素人だった自分がオリジナルテーマを作れるようになれるまでの流れを書いてみようと思います。 WordPressのオリジナルテーマに挑戦してみたいと思っている方の参考になれば嬉しいです。 はじめに まず僕がWordPressのオリジナルテーマを作る前の実力は既存のWordPressのテーマをちょっとカスタマイズできるくらい。HTML/CSSの知識は中途半端でほとんどありませんでした。ただ、WordPressを利用したブログ歴は結構長かったのでWordPressに関しての最低限の知識はありました。 目次 1. HTML/CSSの基礎を学ぶ 2. チュートリアルを見ながらWebサイトを作ってみる 3. 自
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
d="M21.99 12.055C21.99 6.49775 17.5122 2 11.995 2C6.47776 2 2 6.49775 2 12.055C2 17.0725 5.65817 21.2304 10.4358 21.99V14.9635H7.89705V12.055H10.4358V9.83608C10.4358 7.31734 11.925 5.92804 14.2139 5.92804C15.3033 5.92804 16.4528 6.12794 16.4528 6.12794V8.6067H15.1934C13.954 8.6067 13.5642 9.38631 13.5642 10.1759V12.065H16.3328L15.8931 14.9735H13.5642V22C18.3418 21.2504 22 17.0825 22 12.065L21.99 1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
