以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

Welcome to the 36DaysOfType community! Your 36% discount is now ready to use 😉 The easiest way to make your own fonts Fontself Maker is an extension for Illustrator and Photoshop CC to quickly turn any lettering into OpenType fonts.

SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。 日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。 CSSだけでなく、あらゆる要素には軽量化が求められます。 ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。 最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。 効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。 今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。 シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。 具体

コーディングを一部でも仕事に取り入れているひとであれば経験があるかもしれませんが、主要ブラウザではどんどん新しいCSSプロパティが標準化されていくので、気づかないうちに次々と「新種」が増えてキャッチアップできなくなってしまうことがあります。 もちろん、こうしたプロパティはあらゆる職種のWebデベロッパーの方にとってはよいことです。 便利なプロパティが増えれば、今までJavaScriptなどで実装していたこともCSSで短く記述できるようになり、手間も省け、生産性が向上するからです。 今回は、比較的最近登場したCSSプロパティの中でも、あまり知られていないけれど便利なCSSプロパティをご紹介します。 知らないCSSプロパティを学んでいくのに、ブラウザサポートを心配されている方もいるかもしれません。 その場合は、ぜひCan I use?などのプロパティサポート一覧を一緒にご覧ください。 あまり知

CSSは現代のWebページ制作になくてはならないものです。 Web制作に関わる人であれば、誰でもそのスキルを磨いていきたいと思っているのではないでしょうか。 ただ、、JavaScriptなどのフレームワークに関しての情報はエンジニアの交流会などで頻繁にシェアされるものの、CSSについては新しい技術が出てこない限りやりとりされることは少ないのが現状です。 CSSは、主にWebの見た目に関わる技術なので、レベルを上げることはWebデザインの表現力にそのまま直結します。 今回は、CSSの技をもう1レベル上げるための7つのポイントをご紹介します。 １：一番シンプルなCSSリセット marginやpaddingなど、ブラウザ間の表示誤差を修正する方法の一つに、CSSリセットと呼ばれる設定を行う方法があります。 通常、CSSリセットはnormalize.cssなど用意されているリセットライブラリを外部

HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた

先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。 昨日のAdobe Creative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。 Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。

スマホアプリの背景やデザイン素材として利用できる、Instagramのログインで使用されているようなアニメーションで色相を変化させる美しいグラデーションを紹介します。 今年になり、グラデーションの使い方はより洗練されてきたように感じます。 Pastel -GitHub 静止状態でも美しいグラデーションですが、アニメーションするとさらにその魅力がアップします。 グラデーションのアニメーション Swift 3で記述されており、さまざまなiOSアプリで利用できます。 実際はアニメーションしているのですが、静止画で。

WordFes Nagoya 2017で発表したスライドです。

こんにちは。DeNAデザイン戦略部 デザイナーの宮本です。 今回はサービスデザインをする上で考慮しておくべきUXについて考えたいと思います。 「既存サービスのリプレイス」「新規サービスの立ち上げ」どちらにせよプロジェクト初期段階で考慮する点が重なっていることが多いのですが、毎回白紙の状態から進めてしまうと必ず考慮漏れが起きることから、これを予防するために実際の現場でのノウハウ（失敗）を元に問いかけ形式のチェックシートを作ったので公開したいと思います。 なお、今回のチェックシートはモバイル向けアプリの改修・立ち上げ時を想定した初・中級者向けで、あくまで個人的観点から重要だと思うところを中心に列挙しておりますので、参考程度に捉えていただけると幸いです🙇 戦略・施策設計においてはターゲットユーザーの鮮明化と、本当にそのサービスが使ってもらえるのか？を重点的に言語化できるようにしています。 また

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に最近のトレンドを意識したWebサイトを作成できる無料のWebサービスを厳選してみました！ 短時間で美しいサイトが作れるので、プロトタイピングにも最適です。 各サービスの特徴や使い方などを簡単にまとめているので、これからWebサイトを作ろうと考えている人はぜひ参考にしてみてください！ ■「Bootstrap 4」ベースのWebサイトを作れるサービス！ 【 Pingendo 】 マウスでポチポチクリックしていくだけで、いつの間にか「Bootstrap 4」ベースのWebサイトが作れてしまうのが「Pingendo」の面白いところ。 当初はシンプルなWebエディタとしてリリースされていましたが、活発にバージョンアップを繰り返して多機能なサービスに変化しています。 豊富なテンプレートやコンポーネントが搭載されており、ファイルの書き出し