Vue Fes Japan 2019 公式サイトから学ぶ CSS コーディングの知見 - Qiita
この記事は CSS Advent Calendar 2019 の 20日目の記事です。 Vue Fes Japan 2019 が開催中止になってしまい、大変残念だったのですが... （私は Vue.js 日本ユーザーグループのコアスタッフで、今回は Web サイト制作班として少しコミットしていたのでした） 先日公式サイトのソースコードが無事公開されました そこで、Web サイト制作で得た CSS の知見がとてもためになったので、いくつかご紹介していきたいと思います。 公式サイト： https://vuefes.jp/2019/ GitHub： https://github.com/vuejs-jp/vuefes-2019 2019 の公式サイトも、2018 の公式サイトと同様に、Nuxt.js の静的ファイルの生成機能を使って作成しています。 CSS の構成について normalize.c
WebサービスにおけるCSS再設計で考えたこと
なぜこの記事を書こうと思ったか 配属されてからは、業務でCSSを書くといったら、Bootstrapのclass名を付与したり、機能追加の際にちょっと書くといったことだったのですが、大幅にサービス全体のCSSを見直さなきゃいけない機会があったので、どんなことを考えたのか書いておきます。 CSSのリファクタリングや再設計は工数がかかる上に、そこまで対価がない結構辛いことだと思います。また運用していて数年が経てば大体の場合がCSS設計は崩壊していきます...。 特に途中で気づいた、最初に決めておけばよかったということも多々あったので参考になればと思います。 前提条件 下記のような時に、この記事は役に立つのではと思って書いてます。 すでにあるWebサービスの大幅なデザイン改修がある 新しくCSSを書かなきゃいけないページが5ページ以上ある 既存のCSS設計を見なさなきゃいけない（CSSファイルが6
【企業サイト構築用】Webページコーディングガイドライン
以前、社内共有と知見をメモするためにWordPressの設計ガイドラインを書きましたが、Webサイト（ページ）のコーディングガイドが必要となってきたので、改めてまとめてみました。 多くのWebサイトを構築した経験値に基づき、特に企業向けのWebページコーディングを、一から行う前提で記述しています。 はじめに 技術やブラウザサポートの進展にあわせて、よりモダンなフレームワークや開発環境が次々と発表されていますが、普通のWebサイト、特に企業向けのサイトに於いては、新しく革新的な技術や設計よりも、以下の方針が往々にしてマッチします。 担当者が変わっても編集・変更し易い技術選定 拡張・運用していく過程で破綻しない設計 本ガイドは、上記の方針を踏まえたコーディングガイドラインとなります。 本ガイドの最大テーマは、納品物（Webサイトデータ）に一定の品質を担保することです。よって、制作前の決め事・チ
とある求人サイトをデザインリニューアルした話｜Yoko Nishida
副業で「コデアル」という求人サイトのデザインリニューアルをしました。このリニューアルでは、何をやったのかを振り返ってみようと思います。 1. プロジェクト概要コデアルはリモートワークで副業をしたい方向けの求人サービスです。主にエンジニアやデザイナーに手伝って欲しいIT系スタートアップの求人案件を紹介しています。 ※リニューアル前のデザイン ミッション このプロジェクトで自分自身に課していたミッションは3つ。 1. 情報設計の見直し ユーザーが求人を探しやすい＆応募しやすいように情報整理する。 2. 汎用性のあるUIを提案 エンジニア特化ではなく、デザイナーやディレクターにも使いやすいUIに改修する。 3. デザインシステムの構築 ブランド / カラー刷新に伴うスタイル変更、一貫性のあるUI設計ができるようデザインガイドラインを作成する。 主な担当範囲 情報設計、UIデザイン、デザインガイド
あなたの知らない CSS ベストプラクティス - Frasco
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
