人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。 「CSSプロパティの記述順序 - かたつむりくんのWWW」で紹介されていました分かりやすくキレイにまとまったサンプルです。Mozillaの順序をベースに、W3Cの仕様書(CSS2 Specification)と「Web標準の教科」の順番をミックスしたものらしいです。 CSSプロパティの記述の順番 1.表示や配置など「視覚整形モデル」に関するプロパティ display list-style** 1. list-style-type 2. list-style-image 3. list-style-position 4. marker-offset(CSS2.1勧告候補では削除) position** 1. top 2. right 3. bottom 4. left float clear z
先日、Stocker.jp / Space にて Adobe CC検証会 を開いたのですが、主に Illustrator CC と Dreamweaver CC の話をしました。 厳密には私が Photoshop CC の話もしたのですが、話した内容は以下の記事にまとめていますのでここでは省略します。 Adobe Photoshop CCファーストインプレッション | Stocker.jp / diary なお、Illustrator CC の新機能とバグについては、主に Illustrator Mania というサイトの管理人であり、Illustrator のお祭り dot-ai にも出演された鈴木さん( @suzukisan__ )にお話いただきました。 ※この記事で使用している画像サンプルは、鈴木さんが勉強会で使われていたものではなく、私が作成したものです。 Illustrator
こんにちは、ライターのナッツです。 突然ですが、Shareaholicのレポートによると、ソーシャルメディアからのトラフィックはPinterestがTwitterを抜いて2番目の参照元となっているようです。(1番多いのはFacebook) 参考:Shareaholicレポート https://blog.shareaholic.com/social-media-traffic-trends-10-2014/ この調査結果は、魅力的なビジュアルコンテンツはサイトへ多くのトラフィックをもたらしてくれる可能性を示しています。 しかし、私のようなノンデザイナーにとって「魅力的なビジュアルコンテンツ」をつくることはなかなかハードルが高いもの。そもそもPhotoshopとか持ってない!という方がほとんどではないでしょうか。 そこで今回は無料で使えるビジュアルコンテンツ作成ツールを紹介していきたいと思いま
今日はEmEditorでSassファイルの対応をしていく設定例を紹介していきます。デフォルトはどうだったっけ?ってという部分もあって、すでに設定している場合もありますが、そこはスルーしてもらえばと思います。 Sass用EmEditor設定ファイルのダウンロード 今日紹介する設定では、コードカラーリングとSass・CSS3用のキーワードファイルを配布しています。先にこちらをダウンロードしておくとスムーズに進められます。 Sass用EmEditoro設定ファイルのダウンロード 基本的な設定 [ツール]→[設定の選択]→[設定の定義]→[CSS]→[プロパティ]から設定を開きます。以降は設定するタブの表示順に設定例を書いていきます。 設定はこの画面からスタートします。 自動インデント 僕はCSSのセレクタを入力し、「{」の後にEnterキーを押して改行します。すると、デフォルトだと、カーソルがセ
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ! FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
指定した要素をまるごとスライドさせるjQueryベースのプラグインがとっても使いやすかったので記事にしてみます。 コンテンツをまるごとスライドさせるjQueryプラグイン「bxSlider」。 タイトル通りコンテンツや画像をまるごとスライドさせるプラグインです。jQueryで出来ていてIEにも対応!何より導入が簡単すぎます!そしてなんとレスポンシブWebデザインにも対応してるじゃありませんか! 僕が使った時はResponsiveなんて書いてなかったのに…。 でも時代のニーズに応えて改良をしてくれているところもかなり高評価ですね! ダウンロード まずは例のごとくプラグインをダウンロードします。 ダウンロードはこちらから 外部ファイルを読み込む jQueryはグーグルのサーバーから、jsとcssは適宜パスを変更してください! <!-- jQuery library (served fro
Movable Typeのブログ記事投稿と連携してTwitterにポストしてくれるPostTweet プラグインを紹介します。 このプラグインは前バージョン「PostToTwitterプラグイン」の後継で、OAuth認証に対応しています。 1.プラグインのダウンロード 「PostTweet プラグイン」のページより、最新バージョンの「zip形式」「tar.gz形式」のいずれかのリンクをクリックします。 2.プラグインのインストール ダウンロードしたアーカイブを展開し、中にあるplugins配下のPostTweetフォルダを丸ごとpluginsディレクトリにアップロードします。 アップロード後、システム管理画面の「ツール」→「プラグイン」で「PostTweet」が表示されればOKです。 3.プラグインの設定 「OAuthによる認証」をクリック。 ダイアログが開くので、「PIN番号を取得」をク
バンド活動をしている友人のWebサイトを作ってるんですが、こういうビジュアルメインのサイトで活躍するプラグインを紹介します。 なんとこのプラグインはスライドショーだってできちゃいます!! jQueryでできているのでカスタムも簡単ですしjQueryがわからなくても使えちゃうかもしれません!! ダウンロードはこちらから デモページはこちらから ほんとに使い方が簡単なので本家のサイトを見てみるだけで気軽に使えると思いますが、日本でも人気なプラグインのようでわかりやすくまとめてくださっている記事もあります。 ダウンロード 1.まずはこちらからbgStretcherの本体をダウンロードします。ダウンロードしたフォルダにはすでに動作に必要なjQueryも入っています。 外部ファイルを読み込む 2.<head>…</head>の中でjQueryとbgStretcherのプラグイン本体とbgStre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く