ALL | NavnavCodePen Home Skeleton loading using only a few lines of CSS by Håvard Brynjulfsen
cssnextを使って最新のcss syntaxで開発するのが良さそう
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
cssnextでみる次世代CSSとPostCSS | Yucchiy's Note
cssnext 今日ではSassやStylusなどaltCSSを用いたウェブデザインは主流になりつつあるが, 一方で, 次世代CSSではaltCSSで実装されているような様々な機能追加が検討されている. そこで次世代CSSを先取りするcssnextと次世代CSSで足りない機能をPostCSSのプラグインを用いて補う方法について紹介する. これらのツールを用いると, CSSの枠組みの中で閉じた開発が行えて良いのではないかと思う. 最近のウェブデザイン事情と次世代CSS 最近のウェブデザインでは, SassやStylusなどのaltCSSと呼ばれるメタ言語を用いてスタイルを記述し, それぞれのプリプロセッサを用いてCSSを生成するような開発スタイルが多くなってきた. Twitter BootstrapやFoundationなど, 主要なCSSフレームワークはSassを用いて開発が行われており,
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
ProCSSor - Advanced CSS Prettifier
On Separate Lines if > 1 (Default): Does not put the (opening and closing) braces on newline, if a rule contains only a single declaration, regardless of the Brace Style selected. On Separate Lines: Formats all rules, including rules with only a single declaration, according to the selected Brace Style. Same Line: Popularly known as Single-Line Formatting. It puts selector(s) of a rule, brackets,
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
書く描く鹿々
ひとつのulリストで2段組 ulリストの中で、ある程度の数から2段目に流し込む形を作るCSS。 コンテンツが文章で、文章量に応じたいならhightを使うのが良い気がするけど、「リストの数」で2段目に移行したいのなら、下記CSSが有効。 ul{ width: 500px; overflow: hidden; /* 段区切りのlineは背景画像で */ background: url(../img/ftr_bgDotline.gif) 251px 0 repeat-y; } ul li{ float: left; clear: left; width: 251px; /* 半分より1px多いのが要 */ margin-bottom: 10px; } ul li:nth-child(10){ margin-bottom: 0; /* 1段め最後のliはmargin-bottomを削除 */ }
レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
『スマホでティッカーを実装してみよう』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、アメーバ事業本部コミュニティ部門の加藤（@ktknest）です。 フロントエンドディベロッパーとして、GIRL'S TALKの開発・運用を担当しています。 GIRL'S TALKは女性だけの完全匿名掲示板サービスで、テキストを主とした構成になっています。それ故、グラフィカルな要素が少ないこともあり、運営側からのお知らせの表示に賑やかしの効果も持たせて、電光掲示板風のティッカーを採用しています。 そこで今回は、陰ながら活躍してくれている、このティッカーを表現するにあたっての、注意点や実装方法をご紹介したいと思います。 実装方法の検討まず、幾
CSS3を出力するPhotoshopプラグイン「CSS3Ps」 * R4 * Webサービスレビューサイト
Photoshopで作成したオブジェクトをCSS3で出力してくれるプラグイン「CSS3Ps」のご紹介です。 PhotoshopのバージョンはCS3～CS6まで対応しています。 このレビューではCS6を使用しています。 サイトにアクセスし、右上のボタンからCSS3Psをダウンロードします。 ファイルを開くと、Adobe Extension Managerが起動し、インストールが完了となります。 次にPhotoshopを起動し、メニューバーの「ウィンドウ」>「エクステンション」>「CSS3Ps」を選択すると、パネルが表示されます。 オブジェクトを作成して、CSS3を出力したいレイヤーを選択状態にします。 その状態でCSS3Psのパネルをクリックします。 （複数のレイヤーを選択すれば、それぞれのオブジェクトのCSS3が吐き出されます。） すると、ブラウザが立ち上がり、自動的に割り当てられたURL
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
CSSやSVGで実装するローディングアニメーション - NxWorld
feb19
