前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ!!ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態(ステート) 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース:要素そのもののデフォルトスタイル レイアウト:ページをエリアごとに分割 モジュール:再利用可能なパーツ 状態(ステート):レイアウトやモジュールの特定の状態を示す テーマ:サイトのルック&フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS(日
手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT どうもこんばんは。今回のtipsは【手持ちのフォントをWEBフォント用に一括変換してくれるサービス @FONT-FACE GENERATOR】です。正直最近利用しているサービスの中では、ずば抜けて便利なツールのひとつです。PC内の.ttfフォントを.svg、.eot、.woffに変換しさらにフォント指定する為のCSSや表示確認用HTMLも用意してくれます。 @FONT-FACE GENERATOR .ttfから.svg、.eot、.woffへ変換 細かい設定をする場合は【EXPERT】を選択し、フォントをアップロード【Add Fonts】してください。ただご利用の際には、フォント自体のライセンスにはご注意ください。基本的にはすご
Get Started with the Google Fonts API Stay organized with collections Save and categorize content based on your preferences. This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy
こんな風に、LINEを開くたびにキャラクターやイラストの世界観が広がります。 スタンプを作ったことがあるクリエイターは、スタンプのキャラクターを活かした、スタンプ連動型の着せかえも面白いでしょうし、スタンプ作りの経験が無い方でも、セリフを考えなくてもいいので、作りやすそうです。 学校の部活や会社のメンバーで、共通の「着せかえ」を作って、団結力を高める……なんて使い方もアリかもしれませんね。 「クリエイターズ着せかえ」の特徴(1) 個人・企業を問わず、LINEアカウントを持つユーザーが「着せかえ」を制作し*1、LINEの審査を経た後に、「LINE」アプリ内の着せかえショップや「LINE STORE」を通じて、世界中のユーザーに、自作の「着せかえ」を販売できるサービスです。
BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる:BEMツールに触れてみる(1)ブロックライブラリを使ってみる:BEMツールに触れてみる(2)ブロックを作ってみる:BEMツールに触れてみる(3)ということで、今回はBEMで命名する時に役立ちそうな単語を書き出して見ようと思います。 役立ちそうな単語一覧あくまで名付けるときの参考になったらいいな、程度で書いてます。 ※…..で頭合わせしてるのはinuit.cssがやってたからっていうそれだけ。 色々組み合わせて使いそうなものhero とかお洒落っぽいので使う。大きさ順序は hero > main > sub くらいのイメージ。 hero....
イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。 このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。 以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また
display:table-cell;は特性を理解してから使おう カンタンに横並びや縦横中央揃えができるという理由から「使わな損やで?」みたいに取り上げられがちなdisplay:table-cell;ですが、それ以上に仕様と特性をちゃんと理解していないと、結構危険なCSSプロパティです。 初心者なら「floatって挙動がよくわからないし、clearfixもどう使ったら良いのかわからん。」と理由で、上級者なら「IE8以上から上下中央揃えを実現できるなんて最高だぜヒャッホゥ!」といった理由から選択しがちですが、使う場合は以下の様なデメリットがあることを必ず踏まえておいてください。 レスポンシブレイアウトでの自由さがない コーディングの際にPCで5列、スマホで1列になるグリットレイアウトのデザインがあったとします。 そしてHTMLはなるべく分かりやすく、メンテナンスも簡単に済むように以下の形式で
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ(最下部に吸い付くフッタ) この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき3つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
チームのコミュニケーションについて~強いチームを作るには(後編)。Developers Summit 2016 業務で行われるソフトウェア開発プロジェクトのほとんどすべては、何らかのチームによって行われています。そしてそのプロジェクトが成功するか失敗するかを左右する大きな要因が、技術力よりも人間系にあることはよく指摘されることです。 では、その人間系に注目して強いチームを作るにはどうすればよいのか、そのヒントを多数紹介したセッション「強いチームのつくり方」が、2月19日に行われたイベントDeveloper Summit 2016(通称デブサミ)で行われました。この記事では、そのセッションの内容を前編、中編、後編の3本の記事で紹介します。 いまお読みの記事は後編です。 メンバーの採用 メンバーを採用するときには、一緒に働くことになる人が採用の判断をするほうがいいです。ただ、本質的にはたった数
リーダーシップと権限委譲の仕方~強いチームのつくり方(中編)。Developers Summit 2016 業務で行われるソフトウェア開発プロジェクトのほとんどすべては、何らかのチームによって行われています。そしてそのプロジェクトが成功するか失敗するかを左右する大きな要因が、技術力よりも人間系にあることはよく指摘されることです。 では、その人間系に注目して強いチームを作るにはどうすればよいのか、そのヒントを多数紹介したセッション「強いチームのつくり方」が、2月19日に行われたイベントDeveloper Summit 2016(通称デブサミ)で行われました。この記事では、そのセッションの内容を前編、中編、後編の3本の記事で紹介します。 いまお読みの記事は中編です。 まずは「ゴール」、最終的に何を実現するかをみんなで合意しようと。 次は「目標」ですね。短期的にはどこに到達したいか。それから「価
強いチームを作るには時間がかかる~強いチームのつくり方(前編)。Developers Summit 2016 業務で行われるソフトウェア開発プロジェクトのほとんどすべては、何らかのチームによって行われています。そしてそのプロジェクトが成功するか失敗するかを左右する大きな要因が、技術力よりも人間系にあることはよく指摘されることです。 では、その人間系に注目して強いチームを作るにはどうすればよいのか、そのヒントを多数紹介したセッション「強いチームのつくり方」が、2月19日に行われたイベントDeveloper Summit 2016(通称デブサミ)で行われました。この記事では、そのセッションの内容を前編、中編、後編の3本の記事で紹介します。 いまお読みの記事は前編です。 プロジェクトの多くは技術ではなく人間系で失敗している 吉羽 龍太郎氏(Ryuzee.com)。 吉羽と申します。いままで野村総
ポール・グレアムはスタートアップの攻略に最も長けた人物であるが、同時に自身のエッセイを綴ることに多くの精力を注ぎたいと公言している。いわばブロガーだ。 彼は昔ながらのデザインの「Paul Graham.com」に、今でも月に数回の頻度でエッセイをポストしており、そのエッセイがポストされるたびに多くの人の反響を呼ぶ。 業界外の人には彼のことを著名なVCではなくすげー良い文章を書くブロガーとして認識している人も多いらしい。内容はプログラミングから経営、女性へのモテ方まで多岐にわたり、僕もRSSリーダーに入れてチェックしてる。 彼のエッセイをまとめた「ハッカーと画家」という本もある。これは「創造」を体系化した文章になっており、これは読むたびに、 プログラマー、クリエイターになりたいという願望 何かを始めたいという挑戦心 が強くくすぐられる。僕のような非クリエイター/マネジメントの人間こそ読むべき
Typicons are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app. Typicons are free-to-use vector icons embedded in a webfont for use in your user interfaces, whether it be on the web or in a native application. The set of icons are available on Github, with everything included from the source files in SVG format to the minifed CSS. Yo
Description & details All 160 simple line icons are now embedded in a webfont for more convenient use on the web or in a native application. Big thanks to Jamal Jama for creating this awesome webfont. If you enjoy this freebie, be sure to check Simple Line Icons Pro including 1660 pixel perfect icons available in various sizes and file formats. Format: TTF, EOT, WOFF SVG Source Files Size: 230 Kb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く