トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
CSSの基本: CSSを記述するルールで、重要な構文と重要ではない構文
CSSを使用する際には、他の言語と同様に、構文を正しく理解しておく必要があります。CSSの構文は難しいものではありませんが、見落とされがちな小さいポイントがいくつかあります。その中でも特に、一部の文字とその配置は非常に重要で、CSSが正常に動作するために必要です。 CSSを記述するルールで、特に重要な構文、場合によっては重要な構文、重要ではない構文を紹介します。 CSS Basics: The Syntax That Matters & The Syntax That Doesn't 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 用語の解説 【重要】CSSの記述ルール: ブレース 【時には重要】CSSの記述ルール: スペース 【最も重要】CSSの記述ルール: セミコロン 【重要】CSSの記述ルール: タイプミスの文字 【重要で
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
CSSの20のコツを大紹介！Webサイトデザインの効率を大きく高める裏技の数々
フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。 LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解決できる個人のフレームワークを構築するのに役立ちます。 1. CSSリセットを使用する 「normalize.css」が長年そうであったように、CSSはライブラリーをリセットし、ブラウザを通してより長い一貫性を確実にするためにあなたのサイトのスタイルにクリーンな状態を提供しました。プロジェクトの大部分はこれらのライブラリーが含むルールの全てを実際に必要とするわけでなく、ブラウザのデフォルト・ボックス
レスポンシブWebデザインのための２つのCSSテンプレート
最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。 スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。 もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。 とにかく耳にする機会は多いし、できたほうがいいという気はするんだけど、なかなか手をつけられない。 難しそうというイメージがかなりあるんですね。 ただ、実はレスポンシブ対応とはいってもCSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。 つまり、CSSが普通に書けるようになってしまえばレスポンシブだろうとあまり関係ないわけです。 簡単にメディアク
[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間
CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです。 Margin or padding? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スペースの使い分け CSSを使用して例を実装 セレクタの解説 全称セレクタの活用 マージンとパディングの使い分け スペースの使い分け カード型のUIコンポーネントを用意しました。 カード型のUIコンポーネント この例では、2種類の異なるスペースが存
![[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間](https://cdn-ak-scissors.b.st-hatena.com/image/square/e64c6fb610e050bdc9e6aad63654b01a3879a7b6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030610.png)
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
使いづらいフォームを劇的に改善！セレクトボックス系jQueryプラグイン13選
見栄え良く、使いやすいフォーム作りに役立つ、便利なセレクトボックス系jQueryプラグインのまとめ。現在のメンテナンス状態まで徹底調査しました。 誰もがselect要素がデフォルトのスタイルで良いと思っているわけではありません。スタイルの見え方をコントロールしたい（複数のブラウザーやデバイスで一貫性を保ちたい）と考えたり、はじめからサポートされていない追加機能が欲しいと考える人もいるかもしれません。 幸い、簡単にそうしたことができるすばらしいjQueryのプラグインはたくさんあります。 次のプロジェクトに組み込める、すばらしいプラグインを厳選して紹介します。オプション、メソッド、イベントなどにより自由自在に設定を変えられるプラグインもあれば、スタイリング変更や、使いやすさに配慮し単にselect要素を置き換えるものもあります。 Chosen Chosenは拡張性のあるプラグインで、sele
[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック
アイコンとテキストを横並びにする配置は、Webページでよく使用されます。ナビゲーションやリスト、リンク、ヘッダやフッタのリンクなど、さまざまなコンテンツで見かけますね。 アイコンとテキストを横並びに美しく揃えるスタイルシートのテクニック、調整用のスタイルシートを紹介します。 Tips for Aligning Icons to Text 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Step 1: アイコンのフォーマットを決める Step 2: 同じようなサイズのアイコンを使う Step 3: アイコンのサイズにフォントのサイズを合わせる Step 4: 位置の調整はCSSを使う Step 5: 適用するアイコンのためにclass名を使う Step 1: アイコンのフォーマットを決める アイコン画像には、さまざまなフォーマットがあります。 SVG
![[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/85b705179f3e6912f9af9967e46192ec99603556/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070609.png)
デザインに迷ったらこれ！デザイナー向けの便利なWebサイト・サービス10選
配色、フォント、レイアウト、アニメーションなど、デザイナーが考えなければはいけないことは膨大です。急がなきゃいけないのになかなか作業が進まない…と苦戦することもあるのではないでしょうか。 そこで今回は、デザインをより効率的に、ハイクオリティにしてくれるWebサイトやサービスをご紹介します。 Coolors Coolorsは、バランスの良い配色パターンをランダムに表示してくれるWebサービスです。スペースキーを押すと、センスのある配色パターンを次々と生成してくれます。 気に入った色は固定することができ、さらにそれに合った色を探してくれるのでとても便利です。また、気になった色にカーソルを合わせれば、HSB、CMYK、RGB、PMSの値やコピックの色番号を知ることもできます。 COLOR SAFE
ブクマしといたら役に立つ！WEBデザイナー向け小技チュートリアルサイト＆便利ツール10 - カメレオンデイズ
2015 - 12 - 03 ブクマしといたら役に立つ！WEBデザイナー向け小技チュートリアルサイト＆便利ツール10 デザイン Twitter Facebook Hatena Pocket コーディングは覚えたけれど、 隙あらば少しでも楽をしようと毎日必死なdoubleMです。 今回は、コーディング関連で楽をしたい時に眺めるチートサイトをご紹介します。 1. 解説付き！超オシャレなボタン＋ロールオーバーエフェクトの作り方 2. スタイリッシュなタイトル（heading）のデザインcss 3. CSSだけで作れる吹き出しの作り方 4. cssアニメーションをまとめてくださっている Animate.css 5. 世界のブランドカラーが一覧できるBrandColors 6. 世界最少のhtml5ドキュメント 7. HEX to RGB Converter 8. 画像の色を抽出してRGB値を教
「Webデザインが苦手」を克服するための構成学。 - Qiita
前置き 私はデザインが苦手。UIもCSSも、かっこよくならない。でも、かっこいいデザインがしたい、という思いはある。 そういう悩みを私も抱えていて、この本を読んで少し楽になれたので、紹介することにします。 デザイン的学問のススメ。 教科書：美の構成学 構成学は、芸術をはじめとする「美しさ」がなぜそう見えるのか、その美しさを構成する要素がなんなのかを学術的に分析、研究するための学問です。 本文より引用 構成学を一言でいえば、造形に共通する形態、色彩、材料に関するそれぞれの特性を明らかにするとともに、造形との関わりを掘り下げる研究領域である。 「なぜ美しいのかわかる」 というのが大きなポイントです。 これがわかれば、「○○だから美しいんだ！」 と胸をはって言えるから。 （少なくとも、論理的に説明する理由をつけられる、という点で自信になる） この本から、Webデザインに適用できる（と思われる）考
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごめんなさいね。 - Lopan.jp
http://www.north-geek.com/entry/frontend-blog
高品質でしかも無料！すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ
