Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
当ブログではCSSの新機能をたくさん紹介してきましたが、今回紹介するのはこれまでのCSSの実装方法が大きく変わるものです。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化（階層化）できます。CSSのオーバーライド、リセットやサードパーティの外部CSSファイルの扱いが、今までよりはるかに楽になります。 できたてほやほやの新機能ですが、主要ブラウザがエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）になった現在、いつの間にかすべてのブラウザにサポートされているかもしれません。 Cascade Layers? by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【訳者注】最後の一文まで、必ず目を通してください。 【更新】2022/6:
カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーターを紹介します。 Glass Morphism Generator Glass Morphism Generator -GitHub このエフェクトは去年の暮れくらいから、Glassmorphismと呼ばれはじめたエフェクトで、古くはiOS7やWindows Vistaでも使用されています。最近では、macOS Big Surでも見かけますね。 参考: Glassmorphism in user interfaces Glass Morphism Generatorでは、磨りガラスの透明度やぼかし具合を確認しながら、コードを生成できます。
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
この記事はAndroidAdvent Calendarのエントリーです。 はじめにAndroidが国内に出回って5年が経ちました。 当初の標準アイコンのままアプリがAndroid Marketに公開されるような状態は落ち着き、時代とともにデザインも洗練され一定の秩序が見られるようになってきました。 しかし、未だにデザイン面を考察した形跡が見えないアプリも少なくありません。 スマートフォンは多数のアプリを使うため、ルールに基づいたプラットフォームで一貫性のあるデザインを土台にするのが操作性の良さにつながります。 独自性を出すためや新たな操作性を開拓するためにあえてルールを守らないと言う事もありますが、まずはデザインルールを知りその上で設計することが大原則になります。 ランチャーアイコンアプリデザインについて語る上でランチャーアイコンから入らない訳には行きません。 ランチャーアイコンはアプリの
のカテゴリーでは、 木の年輪や木目のテクスチャ、 杉板や合板の木目背景、 老松木の木目画像など、 高画質＆高解像度のテクスチャ素材を無料でダウンロードできます。全ての写真や画像が商用利用可能な背景フリー素材として自由にご利用いただけます。
初カキコ…ども… 俺みたいに何でもかんでもプラグインで解決しようって腐れ野郎、他に、いますかっていねーか、はは 。 と有名なコピペをあれしつつ、今回はWordPressの便利すぎて後ろめたい気持ちにすらなりそうなプラグインBEST5をご紹介します。 第1位 Favicon Rotator ファビコンって作るの何気にめんどくさくないですか？フォトショを拡張してないとicoファイル作れないし。JPGやPNGデータをファビコン形式に変換してくれるサイトを使ってicoファイルを作り、WordPressのメディアにアップロードし、ヘッダに組み込む。あぁ、めんどくさい！ ところがこのFavicon Rotatorってプラグインを使うと、JPGやPNGの画像をアップロードするだけであっというまに出来上がるんです！ﾏｼﾞﾊﾟﾈｴ プラグインをインストールすると、外観の中にFaviconというメニューが現れ
身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
友人であるフリーエンジニアの原さんが、ある日クラウドソーシングのランサーズでこんな依頼を出していました。 Web制作個人事業主のWebサイトロゴの依頼/外注/仕事 | クラウドソーシング「ランサーズ」 ランサーズでロゴを募集してみたの雑記- I.I.S ブログ 原さんには日頃いろいろ仕事を振ってもらったり一緒に野球を見に行ったりと、公私ともに大変お世話になっております。 コンペ形式というのもあり、賑やかしの足しにでもなればと自分もひとつデザイン案を作ってみることにしました。 せっかくですので、これをネタに自分なりのロゴデザインの手順、ポイントをまとめてみます。 1: クライアントの希望を確認 クライアントがロゴにどういうイメージを持たせたいのかを念入りにヒアリングします（当たり前ですけど）。 ロゴは、その会社・サービスの指針を表すものであると同時に、それが使われる全ての媒体（ウェブサイト、
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
どうも、平成の☆ やな☆ぎさわです。 デザインや資料作成などで素敵なアイコンをサクッと配置したり、ワンポイントで使いたい時ってありますよね。 そんなとき、自分で作ると時間がかかるし、そもそも作れないよぉなんて悩んでる方は多いのではないでしょうか。というわけで、王道中の王道ですが、今回は素敵なアイコンサイトのご紹介と行きたいと思います。 もはや何番煎じだかわからないからこそ、全力で厳選しました。ぜひ。 ありとあらゆるアイコンが無料＆超激安で手に入る金字塔的サイト「ICONFINDER」 ICONFINDER >>サイトはコチラ 僕は、資料を作る際に必ずと言っていいほどこのサイトに依存してます。 検索は英語限定ですが、JPG、PNG形式はもちろん、ベクターデータや3D系まで異常なほど豊富なアイコン収録数が魅力。 本職のデザイナーさんでここを知らないって人はもはやいないと思いますが、非デザイナー
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
最初から入っている標準フォントだけでは、ブログの画像にキャプションを入れたいとき、WEBサイトのメリハリを付けたいとき、ロゴを作りたいときなど、かっこがつかない！そんなふうに思うことありますよね。 しかしフリーフォントって、あまりに種類がたくさんありすぎて、どれを使っていいのやら困ってしまいがち。欧文フォントは種類も豊富だけれど、日本語対応(漢字も対応)フォントを探し出すのはひと苦労。 そこで！今回は使うだけでサイトや印刷物がかっこよく仕上がる、そんな日本語フリーフォントをご紹介いたします。 誰でも自由に無料ダウンロード！商用利用も可日本語対応上記を満たすフォントの中でも、特にクオリティが高く、様々なシーンで使用できそうなフォントを中心に集めました。（参考：サイト改善 10のポイント） 誰でも上手いキャッチコピーが作れる！ノウハウ記事17選とテクニック集 1. スタイリッシュにまとめたい
こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
