2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
【RGBカラー】 メーカー別・蛍光ペン カラー表
初級ブログカスタマイズなどweb系知識メモ、Illustratorで作った無料素材を公開
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
新しいスマホ時代のナビゲーション！ | ホームページ制作のLiruuDesign(リールーデザイン)！
モバイルファーストを考える上で、どんな見せ方にしようかと悩むことありますよね！ マテリアルデザインに沿ってもいいんですが、 果たしてコンテンツに合うかどうか、 目標のユーザビリティが達成できるかどうか、 いろいろと悩みどころ！ 一番はナビゲーション！ サイドからぴょこんと出てくるのがいいのか、 モーダルウィンドウのほうがいいのか、 コンテンツやサイトイメージによっても変わってきます。 マテリアルデザインのことも考慮したとして、 サイドからピョコンパターンを多く見かけるようになりましたが、 どーせならユーザーに他サイトと違う体験をしてもらうのも手！ なので今回はサイドからピョコンパターンなんだけど、 ちょっとしたエフェクトで、ユーザーの邪魔にならずに、 目新しさををプラスできるプラグインを紹介！ デモサイトも作ったので、併せてご覧ください。 ページサムネイル化パターン パターン01として、ペ
30 Examples of Material Design Palette Color Usage
Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
無料ダウンロード＆商用利用もOKなクラシカルな装飾を集めた「Handbook of Ornament」作品集
古典の装飾モチーフを集めた「Handbook of Ornament」という本は、装飾の研究者であり詩人・画家でもあったFranz Sales Meyer氏が1896年に出版し、多くの産業デザイン・建築デザインの理論＆実践において使用されてきました。この本が著作権切れとなり、中に掲載されているイラストが、誰でも自由に使える状態でインターネット公開されています。本やフリーペーパーなどの素材としても使えそうな装飾の数々が、パブリックドメインなので無料でダウンロード可能、商用・非商用を問わず使用できるようになっています。 Category:Handbook of Ornament (1900) illustrations - Wikimedia Commons https://commons.m.wikimedia.org/wiki/Category:Handbook_of_Ornament_(
CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA
マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
ホームページ配色ツール Ver3 | フォルトゥナ
1色を選ぶだけでそこそこの配色をしてくれるツールです。高機能ではありませんが、おかしな配色になりにくいように色を自動調整します。ウェブ配色ツールが新しくなりました 1色を作れば自動的に配色を作るツールです。難しいツールではないので、多分使えばわかると思います。この写真も変えることができます。
はてなブログ非公式テーマ『百科事典的な何か』を公開しました（Githubに） - NO TITLE
2016 - 11 - 11 はてなブログ非公式テーマ『百科事典的な何か』を公開しました（Githubに） ブログ運営 ブログ運営-カスタマイズ コピペで簡単！はてなブログのシェアボタンをカスタマイズ コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった はてなブログの超便利なデザインテーマ「Brooklyn」を作りました ダウンロードしておきたい最新おすすめ洋楽【2016年版】 オススメの人気洋楽記事一覧 【洋楽】UKロック入門！おすすめバンド20選 人気洋楽のYouTube再生回数ランキングTOP30 90年代洋楽HIPHOPの名曲をあげていく 人気の洋楽を紹介します - 女性アーティスト編 - 90年代洋楽お
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ
リンクを目立たせよう クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。 できる限りコードはシンプルに、コピペだけでできるようにしました。 枠がない場合はこんな感じですね。 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG これを枠で囲って強調するようにカスタマイズします。 CSS まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。 スマホで使う場合は、<style> ～ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。 シンプルなタイプ 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG .entry-content .emphasize-link { position:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
Oops... sorry. This site is optimized to Safari | NIPPON COLORS - 日本の伝統色
色彩センスのいらない配色講座