inFablicパスワードを忘れた方はパスワードの再設定を行ってください。 初めての方ははてなID登録 (無料) してください。 うまくログインできない方はお問い合わせをご覧いただき、Cookieの設定をご確認ください。
簡単なのにすごい！普通の写真をインスタ映えする写真にできるスタイルシート -Instagram.css | コリス
写真画像にインスタ映えするフィルタを適用するスタイルシートを紹介します。 使い方は簡単で、外部スタイルシートと画像にclassを加えるだけでOKです。 42種類のフィルタが用意されており、どのフィルタでも簡単に利用できます。
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
スクリーンキャストで学べるCSS Gridの入門コースがわかりやすくておすすめ
CSS Gridってなんかとっつきにくくないですか？ 一通り学んで理解すると「あ、なるほど。これは超便利！」ってなるんですけど、今までのCSSとは違った考え方というか書き方だからですかね？ でも、そんなとっつきにくさを解消してくれるのがビデオ とかスクリーンキャストです。ブログ記事 とか書籍 でも素晴らしいリソース がたくさんあるんですけど、文章だけで学ぶ よりもビデオ やスクリーンキャストの方が「はじめの一歩」としてはわかりやすいですね。 英語ですけど「これはわかりやすい！」というのに出会ったのでご紹介します。スクリーンキャストなので英語が苦手でも大丈夫だと思います。英語の勉強もかねてぜひ！ Learn CSS Grid for free Scrimba というインタラクティブなスクリーンキャストのプラットフォーム上で作られた無料のCSS Grid入門講座 です。登録は必要ですけど、無料
CSS Gridでレイアウトやフレームワークの考え方・作り方が変わる
最近、ようやくCSS Gridを学びはじめてるんですけど、学ぶ課程で「CSS Gridが”普及”するとBootstrap や Foundtion のようなフレームワークの作り方も変わるんだろうなぁ」と考えています。 どう変わるのかというと、まずは： 基本的にレイアウトはCSS Grid（必要に応じてflexbox）でやるようになる コンポーネントはいままでのフレームワークと基本的には同じだけど、CSS Gridに入れ込みやすい設計に変わる もう少し詳しく書くと： Bootstrapなどで採用されているグリッド・システムが必要なくなる 少なくともrowとcol-4、col-md-6のような書き方はなくなる 独自のグリッド・システムで作っていたレイアウトはCSS Gridでやるようになる つまり、HTMLにクラスを記述してHTMLでレイアウトを組むのではなくCSSでレイアウトするようになる（あ
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
2018年に待ち受ける５つのUIトレンド
Emilyはイングランド出身で、大学でフランス語とドイツ語を学んだあとベルリンに移住しました。CareerFoundryで執筆していないときは、旅行やフラフープ、読書を楽しんでいます。 2018年のUIデザインの世界には何が待ち受けているのでしょうか？ 冒険好きなデザイナーの皆さんには、朗報です。2018年は反乱の年になるでしょう。UIの限界を超え、既存のルールを破り、リスクをとるべきときなのです。 ここでもっとも重要なテーマは、「Big and bold」です。これは、フルスクリーン表示、大胆さ、全体の没入感に関係しています。 しかし、上位５つのトレンドを紹介する前に、2018年、そしてその先のUIを形作るものは何か見てみましょう。 仮想現実（VR）と拡張現実（AR）は、これからのUIにおいて大きな役割を果たすでしょう。INADEV CorporationのVikrant Binjraj
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
プロのデザイナーによるクリエイティブな思考の磨き方 -おとなのための創造力開発ドリル