jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.13? Compatibility with recent jQuery versions (up to 3.6): Usage of deprecated jQuery API
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む プレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけているポイントを紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！ま
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
カルチャーの違いを考慮したデザインのポイント
様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。ご存知の通り、花粉症の時期
CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 - スタイルシートTipsふぁくとりー
《2016年3月7日 11:02 公開/更新》 CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 [CSS3,ボックス] CSSのresizeプロパティを使えば、閲覧者がマウスなどを使って任意のボックスの描画面積を自由に増減させられるようになります。複数行のテキスト入力欄のサイズが可変になっていれば、たくさん入力したい場合などに便利かも知れません。 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる ボックスのサイズをユーザが変更できるようにするresizeプロパティ 複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例 CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキス
本当は教えたくない！ド素人でも3ステップでオシャレなアイキャッチが作れる「Canva」 | 日常の最中に、
―驚くほどシンプルなグラフィックデザインソフトウェア― と自ら名乗ってますが、 本当に驚くほどシンプルで使いやすいんです。 Canvaのスゴイ所無料ハイ、神。 アイキャッチがオシャレなブログって巧みな編集スキルを持った方がillustratorやPhotoshopを使ってるじゃないですか。 Canvaなら一部有料の操作はありますが、無料でも問題なくオシャレな画像を作成出来ます。神です。 WEB上で使えるハイ、神。 使い始める際に面倒なダウンロードもインストールも必要ありません。 今少しでも興味があるならまず上のリンクからさくっと登録して使ってみるのが一番です！この後を読む必要もなくなります。 しかもネット環境さえあれば、作成途中であってもデータはWEB上に保管されるのでPCを変えようがすぐにさっきまでの状態から再開して作業を行うことが出来ます。神です。 直観的に操作出来るハイ、k(略 こう
✨安い！！お得！！激安CSS！！✨ - Qiita
<span class='price'> <span class='price1'>19</span><span class='price2'>,800</span> <span class='yen'>円</span> </span> @import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
【図解で分かる】色彩センスのいらない配色入門 - Brian'z Imagination
2016 - 04 - 29 【図解で分かる】色彩センスのいらない配色入門 Webデザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。 背景色や文字色をいじるのだけれど、 どうもパッとしない 。 これだ！と思う色を選択して使っているはずなのに、 なかなか思ったようなイメージにならない 。 そもそも センスがない 。 本題に入る前に、最初にひとつ、 伝えておきたいこと がある。「自分にはセンスがないからブログのデザインを考えるなんておこがましい」なんて思っているひとには、特に聞いてほしい。 実はここだけの話だが、Web制作で飯を食っているぼくでさえ、ほんの少し前まではデザインのキホンの「キ」さえ知らなかった。おかげさま
ulやolはmarginとpaddingをセットで
FirefoxとInternetExprolerの初期値の違い ulやolのmarginを設定するときにはmarginと共にpaddingも設定します。インターネットエクスプローラとその他のブラウザの初期設定が異なるからです。 Firefoxは右側のmarginとpaddingの初期値がそれぞれ0と40pxになっています。次のようにして調べることができます。 インターネットエクスプローラの場合はmarginとpaddingの初期値が逆になっていて、それぞれ40pxと0になっています。次のようにして調べます。 灰色の点線がボーダーの位置です。Firefoxが・を含むのに対して、IEは含まないという違いもありますが、paddingを一致させると同じになります。背景色をつけるときには注意する必要があります。 この初期値はFirefox2.0とインターネットエクスプローラ6.0のものです。バージョ
WEBセーフカラー216色－WEBカラーリファレンス
●WEBセーフカラー216色 8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 ユーザーの閲覧環境によっては、制作者の指定した色が変換されて表示されてしまう可能性がありますが、 WEBセーフカラーを使用することでそのリスクを低くすることができます。 安心して使用できる“セーフ”なカラーというわけです。 WEBセーフカラーは、RGBの各色をそれぞれ6段階に分けて、それらの組み合わせでできる色です。 16進表記の場合は00、33、66、99、CC、FFの6段階、 0～255の10進表記の場合は0、51、102、153、204、255の6段階、 パーセンテージ指定の場合は0％、20％、40％、60％、80％、100％の6段階の組み合わせでできる色は、全てWEBセーフカラーとなります。 6×6×6=216色です。 カラー
ウェブカラー - Wikipedia
このウェブカラー（英: Web colors）の記事では、ウェブ等における色の扱い等について解説する。 指定法[編集] この節は検証可能な参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。（このテンプレートの使い方） 出典検索?: "ウェブカラー" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL（2020年5月） ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（CSS）や、Scalable Vector Graphics（SVG）において、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組（16進トリプレット）を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。 歴史[編集] 最初期のMosaicや、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
移動しました - SmartHR Tech Blog
名古屋市立猪子石小学校
Design and Marketing News - Designerly
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
色彩センスのいらない配色講座
HisasAnn.com is for sale | HugeDomains
