みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク(以後JSフレームワーク)を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。
みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク(以後JSフレームワーク)を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。
[ + expand ]美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
Webサイトが起点? 利用者のニーズを考えて web サイトを設計し、ゴールまで導く。 Web サイトに限らずアプリケーションにも言える基本的な考え方です。昔から言われている当たり前の事ではあるものの、「Web サイトへ訪れる」という利用者の行動を大前提にしていることに疑問を感じています。 ブランド名など、何かキーワードが思い付けば検索をするでしょう。人によっては、ふと思い出して訪問することもあるかもしれません。しかし、そういったタイミングが 1 日でどれくらいあるでしょうか。Web サイトへわざわざ訪れるのが面倒と感じることもあるくらいです。 ターゲットにしている市場によっては検索が強かったり、わざわざブックマークしてサイトを訪れる人が多いかもしれません。しかし、そうした能動的な行動ではなく、ニュースフィードで偶然見かけた情報をキッカケに行動する人は少なくありません。ジャストシステムによ
[レベル: 初〜中級] 導入時期が依然として不透明なモバイル ファースト インデックスですが、導入に備えて確実に必要になる対処がいくつかあります。 そのうちの1つが alt 属性です。 モバイル向けページで alt 属性 をもし省略しているなら、今すぐにでも設定する必要があります。 ひとたびモバイル ファースト インデックスへの切り替えが実行されれば、検索結果、特に画像検索結果に悪い影響が出るかもしれません。 alt 属性を設定していなモバイルサイトが多い モバイルサイトでの alt 属性の状況について、Google の John Mueller(ジョン・ミューラー)氏は英語版のオフィスアワーで 次のように注意を促しました。 alt 属性に関してモバイルファーストインデックス チームから特によく聞くのは、alt 属性を画像に設定していないサイトがたくさんあるということだ。 alt 属性がな
Christineは、appendToのフロントエンドの開発者およびライターです。appendToではチームのためのJavaScriptトレーニングを提供しています。 「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう1つ「シンプル」という言葉を加えなくてはなりません。 シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの1つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。 シンプルナビゲーションには以下の2つの特徴があります。 Webサイトのメインナビゲーションには、3~7つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。 デフォ
デザイナーとして数年間のキャリアを積み上げた方なら、ある程度の実力を身に付けてきたと感じる反面、自分の成長が「停滞している」と感じることはないでしょうか。幾つもの仕事を経験し、デザインの表現や作業スピードには自信が付いた、これまでの経験に沿って仕事をこなすことで大きな失敗にはならないけれど、でもどこか大きく進歩もしない、そんな状況です。 私も20代後半、特にその悩みを感じることがありました。正直なところ、そうした自分の停滞を感じつつも、見て見ぬふりをしているような心境もありました。そこには、会社に所属していてある程度の実力があれば、目の前の仕事は経験則からそこそこの力でこなすことができるし、急に進退を迫られるような切迫した状況には陥らないことなどが影響していたと言えます。停滞に対して「そこまで急いで対処する必要はない」「いつかは変わる」と自分の今の環境を肯定していたのです。 しかしこうした
ブラウザ毎に設定されているデフォルトスタイルの差異をなくし、サイト制作のスタイル設定を効率的に行うことができるリセットCSSやノーマライズCSSを紹介します。 すべてを完全にリセットしてしまうものもあれば、リセットは一部にして有用なスタイルは保持するものもあったりと様々なタイプがあるので、自分の癖やプロジェクトガイドラインに合わせて選ぶこともできると思います。 普段からweb制作に携わっているならご存知の方も多いように、webサイトを閲覧する際に使用されるブラウザは様々な種類がありますが、各種HTML要素にはブラウザによってそれぞれ異なるスタイルがデフォルトとして定義されています。 そういったブラウザ毎のスタイルの差異をなくしてサイト制作時のスタイル設定を効率的に行うのに便利なのがリセットCSSとノーマライズCSSで、個人的に以前(といってももう割と前ですが)はとにかく様々な要素のスタイル
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
結論はないですが最後にいちコーダーとしての個人的なわがままがあります。 事の発端 この発言。TLで「モバイルファーストでCSS書く」みたいな話を見かけて、そういえばないなあっていう思いから漏れ出たツイーツでした。 レスポンシブでモバイルのデザインがこない現場にいたからモバイルファーストでコーディングしたことない— なゆぴ (@nayucolony) 2017年6月16日 注意事項 まず、ツイッターで意見を募る系の世論調査、業界全体でみると「意識高い人(NOTただ意識高い系の人)」が意見をくださる場合が多いです。 なので、わりと「アンテナはってる」層の意見が多いパターンが多く、一般世論とは乖離している可能性が高いことをご留意ください。 また、「モバイル/SP」のような表現をしますが「小さい画面」という意味で言っており、特定のデバイスをさしているわけではないのでご了承ください。 あと、私は元デ
micro-knowledge.md 細かすぎて伝わりづらい、Webデザインの質を上げるためのささやかな工夫 デザインレビューとは、減点方式である。レビュアーがクライアントであれディレクターであれ代理店であれ、往々にして良いところよりも悪いところが目につき、一度ついたマイナス査定を覆すのはプラス査定をとるよりも難しかったりする。(デザインそのものの完成度とは別に) ちょっとした手抜きやミスでつまらない指摘を受けないように、自戒を込めて。 未完成のカンプを見せない デザインカンプは原則として全て完成した状態で見せる。ワイヤーフレームがなかったり指示が不明瞭なセクションでも、「多分こんな感じだろう」でいいのでとりあえずきちんと作る。例えそれで正解でなくても、それを元に修正の指示をもらえるので効率がいい。何より、一度不完全なものを見せてしまうと、第一印象の悪さが後々まで尾をひいてしまいやすい。
CSSが進歩に従って機能を活用するためのライブラリやツールが次々登場しています。こうしたものを利用することで、普段の作業時間を短縮できたり、まだ知らない機能について知ることができます。 今回は今年リリースされたばかりの、最新CSSライブラリ、フレームワーク、ツールを紹介します。 CSS Flexboxツール&ライブラリ 1.Waffle Grid Flexboxのグリッドシステムを簡単に利用できます。 2.RAGrid クラスの代わりに認識しやすい属性を使ったFlexboxグリッドです。 3.Griddd 非常にシンプルながらカスタマイズ性が高いグリッドです。 4.Flexboxチートシート CSS Flexboxのプロパティを具体的な例とともに紹介しています。 CSS Gridツール&ライブラリ 1.Griddy CSS Gridをオンラインで学べるツールです。 2.Graaf デザイナ
第3引数に指定できる「image_meta」については、いろいろ試しましたがあんまりよくわかっていません。nullを指定しても欲しいデータは取得できるので、わかり次第追記します。 こうやって使っています取得できる値のサンプルは以下です。 https://local.wptest.com/wp/wp-content/uploads/2017/04/image-720x300.png 720w, https://local.wptest.com/wp/wp-content/uploads/2017/04/image-360x150.png 360w画像の遅延ロードをレスポンシブイメージに実装する時に使っています。 どう実装するかというと、例えばですが「image_send_to_editor」のフックを使って、メディアアップロード時のHTMLをカスタマイズします。data-srcset属性に今
Adobe/Macromedia Fireworks がCS6で新規開発が停止になったのは丁度2013年の今日5/7。Fireworksユーザに衝撃とやっぱり感が襲った日でした。記念日でもあるので今回はデザインツールGravit Desinger v3を紹介したいと思います。 2017/05/07現在バージョンはv3.0.5。私が試したのはWindows版で他のプラットフォームで試したわけではないことに注意してください。 2017/05/09追記:日本語の表示は、日本語フォントをimportした上テキストのSpace(Char)を20前後にすると一応できます。しかし、直接のタイプはできません。 限りなく全てに近いクロスプラットフォーム対応!Gravit Desiner v3は、MacOS版、Windows10版(Store版とインストール不要なバージョンがある)、さらに、Linux版、Ch
この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター(*)、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例
ソースコードのバージョン管理にGitを使うのはもはや当たり前・・・というのは言い過ぎではないはず。プログラマーやコーダーだけでなく、デザイナーやプランナーにもGitに興味を思っている方が増えているのではないでしょうか。 SourceTreeソースツリーはGitの操作ができる無料のデスクトップアプリケーションです。WindowsとmacOSのどちらでも使用でき日本語に対応しています。本記事ではSourceTreeでGitHubにファイルをアップロードするまでの流れを紹介します。 ※ 本記事はSourceTree 3を対象に解説しています GitとGitHub、SourceTreeとは? 「Git」は複数人でプログラムのソースコードなどの変更履歴を記録・追跡するためのバージョン管理システムです。バージョン管理を行うとファイルを簡単に昔の状態に戻すことができるため、どのタイミングでバグが発生した
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
WordBench 長野 vol.7 にて「WordPress プラグインとの付き合い方」という話をしてきました。#wbnagano Photo by Takashi Q. Hanamura ブログを書くまでが勉強会というわけで。 3月11日に開催されたWordBench 長野 vol.7にて、「WordPress プラグインとの付き合い方」というセッションをさせて頂きました。 とろさんの魂の叫び #wbnagano — *yuko (@ateitexe) March 11, 2017 どっかで聞いたような… しゃべったこと。 �プラグインに限らず WordPress 本体もそうですが、どんなソフトウェアでもリスクはついて回るものなんですよね。 リスクがあるから使うなって話では無いですね。自分で全部作ることだってリスクが低いかというとそんなことは無いですし、そこはやっぱり、WordPres
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く