三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す | Recruit Tech Blog
こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹介します。また、各人で解釈が分かれがちなFLOCSSのレイヤ分けの一例と、FLOCSS導入後のCSSの開発体制についても併せてご紹介します。 FLOCSSとは？ CSSを書く際のファイル構成や命名規則などを取り決めたルールの1つです。CSSの命名規則というとBEM、OOCSS ( Object Oriented CSS )、といったものが有名なところして挙げられますが、FLOCSSはこれらの良いところを組み合わせたものとなります。Foundation Layout Objectと役割ごとにレイヤ（層）が分かれているのが特徴です。これにより、CSSコードの再利用・拡張がしやす
Using CSS Transforms in the Real World — SitePoint
In this article, we’ll learn how CSS transforms can be used in the real world to solve various tasks and achieve interesting results. Specifically, you’ll learn how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations. Transformations of HTML elements became a CSS3 standard in 2012 and were available in some browsers before then. Transforma
商用可能な無料フォント限定！2018年上半期公開のフリーフォント厳選80個まとめ
あっという間に一年の半分が過ぎ、暑い夏の季節になりました。今回は、2018年上半期にリリースされた、商用利用でも使える完全無料のフリーフォントをまとめてご紹介します。 美しい日本語フリーフォントにはじまり、異なるウェイトが揃い、どんな案件にも活用できる万能フォントや利用機会の多い筆記体、高級感のあるセリフ書体、手書きのブラシフォント、2018年要注目のレトロフォントやSVGフォントなどが勢揃い。どれも無料ダウンロードでき、商用プロジェクトにもバッチリ利用できるので、この機会にぜひどうぞ。 テーマ、目的別に探す！合計2000個のフリーフォント素材まとめ完全版 商用可で完全無料！2017年公開のフリーフォント素材129個総まとめ 商用可能な無料フォント限定！2018年上半期公開のフリーフォント厳選まとめ コーポレート明朝 企業ロゴやサービスロゴ風の文字をフォント化した「コーポレート・ロゴ」を、
コーディング速度を上げる！Webサービス・ジェネレーターなどの便利ツール7 - Design Color
1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！ 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、
日本語のフリーフォントをまとめて試せるサイト「 #ためしがき 」をなんで作ったのかと技術的な話 - フロントエンドの地獄
みなさんためしがき試してくれました!? ホント！？ありがとうございます！！！ tameshigaki.jp ためしがきって？ 知らない人もいると思いますので、簡単に説明しますね。 ためしがき - 日本語のフリーフォントを検索できるサイト こちらからサイトにアクセスして、お好きな文字・文章を入力していただくと、 こんな感じで、色んなフォントでの見た目をまとめて確認することが出来るサイトなのです。 サイトで使っているフォントは商用利用可能なフリーフォントとなっており、フォントをタップすると表示される画面から、配布先のサイトに遷移することが出来ます。 また、フォントをシェアするボタンを押してから、Twitterやfacebookでシェアすると みんなオラに力を〜！ 日本語のフリーフォントを好きな言葉・文章で試せるサイト | ためしがき https://t.co/ECvYEaVQQ9 #ためしがき
[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ
フォームをスタイルするのが苦手、という人は少なくないと思います。 中でも、button要素はお問い合わせのようなフォームに限らず、さまざまなページに使用される使用頻度が高い要素です。 button要素はfont-sizeを適用するだけで見た目が大きく変わり、「border: 0;」を適用するとブラウザごとに異なる見た目になります。 そんなbutton要素のデフォルトのスタイルを美しくするために、button要素のスタイルの仕組みを紹介します。
![[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b3e71fb3eb3cf86833906de9afc4e34c028aa15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018051604.png)
Adobe XDなしにはもう生きられない！これからのWebデザイナーのワークフローが変わるかも!? | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
Rを Webアプリ上で動かす Shinyでダッシュボードをつくる - Qiita
Rを Webアプリ上で動かす Shiny でダッシュボードをつくった。 ShinyのReferenceとExampleみれば、いろいろなパーツが関数で用意されているので、それらをベースにしてWebアプリは記述量すくなく作成できる。 # app.R library(shiny) ui <- fluidPage( titlePanel("Example"), # inputId = "foo" とかを入力値として # plotOutput(outputId = "bar") にサーバの結果を表示 ) server <- function(input, output) { # uiに返す # output$bar <- renderPlot({ # input$fooをつかって処理 # }) } shinyApp(ui = ui, server = server) app.Rにまとめて書く書き方
デザイナー要注目！すごいフリーフォント57個まとめ 2018年4月度
毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2018年4月度のフリーフォントまとめです。 どんなデザイン案件にも対応できる万能フォントから、話題となっている筆記体とセリフやサンセリフをセットにした「フォント・デュオ」、未来的なSFデザイン、アンティークな風合いのビンテージフォントなど幅広いセレクションが揃います。商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 デザイナーが持っていたい、すごいフリーフォント素材63個まとめ デザイナーが持っていたい、すごいフリーフォントまとめ Rowdy パワフルさと洗練されたスタイルッシュな雰囲気を持ち合わせた太字サンセリフ書体で、太さの異なる３ウェイトが用意されています。 ※ 個人、商用利用可能 Apex 3種類のウェイトが用意され
Goby: Rubyライクな言語（2）Goby言語の全貌を一発で理解できる解説スライドを公開しました！｜TechRacho by BPS株式会社
2018.04.14 Goby: Rubyライクな言語（2）Goby言語の全貌を一発で理解できる解説スライドを公開しました！ こんにちは、hachi8833です。 前回のGoby: Rubyライクな言語（1）Gobyを動かしてみるから時間が空いてしまいました。久方ぶりのGoby記事です。 リポジトリ: goby-lang/goby 公式サイト: https://goby-lang.org/ スライド「Goby ← Golang + Ruby」 「Gobyとは何ぞや」をまとめたスライドを趣味で作りました（47ページ）。 実はこのスライド、明日開催のGo Conference 2018 Springに応募したものの選に漏れた後にそのまま作り始めたのですが、やっているうちにだんだんムキになってきてついつい手を入れまくってしまいました。 Gobyコントリビュータにも評判がよく、BPS社内勉強会でも
派遣の求人情報・仕事を探すならリクナビ派遣－人材派遣の仕事情報サイト
ご利用にあたってのお願い 当サイトでは個人情報保護と利便性の観点からCookieを使用しています。 このページが表示される場合は、Cookieを使用できるようにブラウザの設定を変更していただく必要があります。 なお、Cookieは個人情報収集等の目的では使用しておりません。 リクナビ派遣は、派遣会社と人材派遣のお仕事情報を掲載するリクルートの派遣サイトです 派遣のお仕事情報は、毎日三回更新。人材派遣会社から寄せられる派遣の求人情報を掲載しています。派遣社員を希望する方は、勤務地や駅・沿線、職種、時給に加え、紹介予定派遣や第二新卒歓迎など、希望の条件で派遣のお仕事情報を探すことができます。また、派遣に関するQ&Aや人材派遣に関する各種ランキングなど、既に派遣社員として働く方だけでなく、派遣社員として初めて働く方向けの情報も掲載しています。 リクナビ派遣のトップページへ >>
iPad Proが変えるクリエイティブ - 無料アプリに舌を巻く
アドビシステムズの「Photoshop」(フォトショップ)といえば、プロのクリエイターも愛用する画像編集ソフトとして有名です。Photoshopをはじめとする「Illustrator」や「Lightroom」などの同社製パソコン用ソフトは、かつて1本数万～十数万円で販売されており、高嶺の花の存在として知られていました。 そのような「高性能だけど価格も高い」ソフトで知られるアドビシステムズですが、iPad/iPhone用のクリエイティブ系アプリは意外にも大半が無料で提供されているのです。iPad Proの内蔵カメラやApple Pencilを活用してさまざまなコンテンツ制作が効率的にできるなど、「これ、本当に無料でいいの?」と思わせるほどの機能や使い勝手に驚かされます。「アドビ、変わったな…!」と感じさせるアプリのどこがすごいのか、改めてチェックしていきましょう。 アドビシステムズは、クリエ
CSS Basics: Fallback Font Stacks for More Robust Web Typography | CSS-Tricks
CSS Basics: Fallback Font Stacks for More Robust Web Typography In CSS, you might see a ruleset like this: html { font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that
10 Super-Useful Bootstrap 4 Code Snippets
If you’ve done any frontend development then you’ve heard of Bootstrap. It is by far the most significant framework for web developers with the most features out there. The newer Bootstrap 4 is super easy to use and it even works with many free templates you can find online. But the team has made quite a few changes to BS 4 and there’s a lot of new goodies. These snippets are some of the coolest e
タイポグラフィでCSSを書きやすくする - Qiita
前置き タイポグラフィの意味であったり、その大まかな概要は省きます（見出しを大きくするなど、あたりまえかつデザインに関することが多いため）。 本記事では、CSSを書くときに余白や文字サイズをどの様に決定したらいいのかを経験則やタイポグラフィについて自分が調べた内容から、備忘録レベルでまとめていきます。 目的 普段CSSを書くときにwidthはコンポーネントの個数からパーセントを導き出すのですが、他のプロパティの値は特にルールを決めていませんでした。 それによりコードは汚く、レイアウトもばらつきがありました。 ですので今回はタイポグラフィという理論？を参考にし、CSSのルールを決めることでコードを綺麗にし、レイアウトに規則性を持たせようと思います。 比率 タイポグラフィでは値の決定に比率を用いて、その比率の乗数を変えて値を決定していました。 そうすることでコードやレイアウトに規則性が生まれ綺
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール![[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/debac5ced80c80ee248dfc210d9fa594af0e6ca3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080310.png)
Landing The Concept: Movie High-Concept Theory And UX Design — Smashing Magazine