この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ
転職・フリーとして活躍したいWebデザイナーの方は、ポートフォリオ作りに勤しんでるのではないでしょうか。 ポートフォリオは実績・実力がわかりやすい必須ツールです。 こんにちは、Webデザイナーの平尾誠です。 駆け出しのwebデザイナーが現役の先輩メンターを見つけるCODEMENTORを共同運営しています。 かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。 検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。 そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。 参考にして面接官の脳みそをぶっ飛ばしましょう。 これが就職活動中の悩める子羊たちの一助になればと思います。 SHOGO TABUCHI http://www.s5-style.com/ まずは私が最も尊敬するデザイナ
2022年、注目しておきたいCSSの新機能のまとめ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど
CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装 終わりに はじめに clip-pathプ
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
CSS Flexboxでどのように配置されるかをまとめたチートシート
Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
PHPユーザエージェント判別・判定
Updated 2015.12.07 / Published 2015.04.04 Firefox OSやWindows Phoneの登場でユーザエージェント情報に依存して処理を行っている部分が相次いで見直しを迫られることになりますので、2015年版JavaScriptユーザエージェント判別・判定と同趣旨でPHPにてスマートフォン・タブレットまわりのユーザエージェントを判別・判定して分岐処理を行う手順をご紹介します。 <?php class UserAgent{ private $ua; private $device; public function set(){ $this->ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']); if(strpos($this->ua,'iphone') !== false){ $this->device =
ソニー損保のWebマスターが部内で作った“行動指針「わかりやすさのその先へ」十か条”がスゴイ！ | 稲富滋のWebマスター探訪記
いくらWebサイトの良しあしを外部からほめられたとしても、お客様にとってわかりにくければ何の意味もない。 文章がいくら正しく書かれていても、お客様に伝わらなければ意味がない。 そう話すのは、ソニーが15年前に損害保険業界に参入し設立した「ソニー損保」のコンテンツ企画部長の片岡 伸浩氏。ダイレクト販売を旗印に保険業界に参入する企業として「企業のためでなく、お客様のための保険会社」だというメッセージを伝える必要がありました。そこで、今回はそのメッセージを伝えるために、ウェブを通じてどのような取り組みを行っているか片岡さんに伺いました。 コンテンツ企画部で作った行動指針「わかりやすさのその先へ」保険という商品はもともと複雑な商品で、お客様がすべてを理解したうえで契約しようとすると、かなり広範囲な知識が必要となります。お客様にとっては、「難しい」と思われてしまう商品かもしれません。言い方を変えれば
色彩理論の基礎に学ぶ、相性抜群な「色の組み合わせ」 | ライフハッカー・ジャパン
身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は
フリーランスも知っておかないといけないデザイン料金の相場まとめ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Photoshopでほそ〜い髪の毛を1分で綺麗に切り抜く方法｜フォトショップの参考書 [sitebook]![Photoshopでほそ〜い髪の毛を1分で綺麗に切り抜く方法｜フォトショップの参考書 [sitebook]](https://cdn-ak-scissors.b.st-hatena.com/image/square/98da957ee01fe3c133f94a65080ddc6ea5785bd7/height=288;version=1;width=512/https%3A%2F%2Fsitebk.com%2Fwp-content%2Fuploads%2FeyeCT.png)
『デザイン関連のおすすめブログ記事16選』
今年気になったハイクオリティなデザインUIキット − 2014 - NxWorld
3media.biz
