「Tailwind CSS実践入門」出版記念イベントの基調講演で使用したスライドです。 イベント詳細 → https://pixiv.connpass.com/event/310073/ 書籍 → https://gihyo.jp/book/2024/978-4-297-13943-8
【重要!】WordPress 4.7.1に深刻な脆弱性 コンテンツが改ざんされるとこうなる 2017.02.07
Twitterなどで、よく「UIコンポーネントにマージンをつけるな」という言及をよく目にします。 以下の記事など、とても分かりやすく参考になるかと思います。 しかし、私はそれらの言及・記事などを見た上で(おそらく)UIコンポーネントにマージンを持たせる実装を行なってしまっていました。 熟練者から見ると、「UIコンポーネントにマージンをつけるな」というのは、これらの記事を見ていない(つまり知識としてない)ということが原因として起きると思われているのではないでしょうか? そのようなケースも多々あると思いますが、今回は知識として持っているにも関わらず「UIコンポーネントにマージンをつけてしまっていた(現在進行形かもしれない)」私の話をしようかと思います。 なお、この記事を書くにあたって「Every Layout」という書籍から着想を得ました。 気になる方はチェックしてみてください。 なぜコンポー
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。 ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。 こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。 色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。 またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。 アニGIFについてはぜひこちらの記事も参照してみてください↓ 簡単!なめらかなアニメGIFの作り方 PNG(.png) 読み方:ピング 約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。
A clean and modern one page website template built with Bootstrap. The responsive HTML template has a gym related theme but can be easily fitted to any kind of content. Today we are very happy to share a clean and versatile one page website template with you. Cardio is a clean and modern looking, responsive one page website template built with Bootstrap. It has a gym related theme but it can be ea
Webサイトをどんなデザインにするかということは、Webデザイナーにとって最も頭を悩ませる問題ではないでしょうか。特に駆け出しのデザイナーや、デザイナーではないけどサイトデザインをする必要に迫られている人にとってはなおさらです。 そんなときはHTML5とCSS3がセットになった、既製のテンプレートを使ってみるのがおすすめです。これを使うだけでWebサイトを、最新のトレンドを押さえた美しいUIにすることができますよ。もちろんカスタマイズして使うもよしです。それでは、今すぐ使えるHTML&CSSのテンプレート20セットをご紹介します。 今すぐ最新トレンドのデザインが使える、HTML&CSSテンプレート20選1:CardioCardio 1カラムでシングルページ完結型、さらにパララックスと呼ばれるスクロールと連動して展開されるアニメーション効果が魅力的。2015年のUIトレンド「Big UI(大
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
こんにちは! 野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです! そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか? 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用
とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる(余計な画像は読み込まない) 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ
こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 (さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。) ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo|memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
1.うずらフォント(手書きフォント系) ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね! このフォントの使いみち ダウンロードはこちらから 2.Noto Sans Japanese /a 源ノ角ゴシック(ゴシック太さ多数) GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません? winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ! ぼくも、そう思います! あーでも、しかし1つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利! OSに最初に入ってるフォントは、太さの種類が2、3種類だと思います。 ボールドボタンで太く
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く