サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
衆院選
pulpxstyle.com
2ヶ月前にMacbook Proを購入した際、以前の設定移行ではなく、一から設定し直しました。そのおかげでストレージの無駄がなくなり、スッキリとした状態でPCワークできています。 今回Chrome拡張機能も見直しをおこない、2ヶ月が経過しました。現在利用しているChrome拡張機能について紹介します。 1Password – パスワード保管庫 パスワード管理ができる1Password。Chromeのパスワードマネージャーもいいのですが、ここ2ヶ月ほど便利に使えているのでこちらをメインに。 Touch IDで解除できるのはとてもラク。レビューは酷いですが、私は満足しています。 1Password – パスワード保管庫 Save image as Type WebP画像をJPG、PNG形式でダウンロードできるChrome拡張機能 Save image as Type。 右クリックからサクッとダ
Chrome拡張機能には便利なものが多く、特にWeb制作時には積極的に利用しています。昨年も紹介しているのですが、2022年に入ってChrome拡張機能の見直しをして現在よく利用しているものだけで再構成してみたところ、無駄が減り使いやすくなりました。2022年版のおすすめChrome拡張機能を14個紹介します。 Toby for Chrome Chromeを利用しているとかならず出てくるタブ開きすぎ問題。パソコンが重くなる原因の一つで、タブは開きすぎない方が良いです。その問題を解消するのがChrome拡張機能 Toby for Chrome。ついつい増えがちなタブを一括で管理することができます。 私は、案件ごとにSPACESを用意し、関連ページや参考ページをタブで開いてまとめてブクマしています。ドラッグ&ドロップで並べかえができたり、SPACES内に複数のフォルダを用意できるので、タブ管理
2021年3月11日からスタートしたPulp Noteは47記事を更新し、Googleで上位をキープできていることもあるからか、多くの方に読んでいただけるブログとなりました。一年を振り返るという意味で記事の年間ランキングを公開したいと思います。読み逃している記事がありましたら、年末年始の間でぜひお楽しみください! 1位 CSSのみで実装するボタンデザイン30選 Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 81,877pv CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選 2位 CSS見出しデザイン21選 CSSのみで実
マーケター視点、不動産業界に特化している、ツールを使用して作成された、スマートフォンのみ、など目的ごとにWebデザインを閲覧することができるギャラリーサイトを7サイト紹介します。 Choicely マーケター視点で選ばれたwebデザインを集められているギャラリーサイト。 コミュニケーション設計に優れたWebサイトをまとめているとの事で、たしかに使いやすさを感じるサイトが多く紹介されています。他にもマーケティング企業やマーケティングツール、メディアサイト、Webサービス、と用途によって分けてまとめられているのもおもしろい。マーケターがチェックしたいギャラリーサイトです。 Webデザインギャラリー | Choicely REAL ESTATE DESIGN GALLERY. 国内の不動産業界のWebデザインを紹介しているギャラリーサイト。 他のギャラリーサイトでも不動産カテゴリーでまとめられて
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ&ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊して見るようにしています。今回は、私が参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。 URAGAWA 担当した制作会社を掲載しているギャラリーサイト。制作会社ごとに見て回れるのはおもしろい。カテゴリ分けも『業界』『タイプ』『特徴』『カラー』『特集』『アワード受賞』『ランキング』と他にはない分類ですが意外と使いやすいです。制作の裏側記事もあってWebデザインの参考だけではなく読み物としても楽しめます。 URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集 紹介文 URAGAWAは、クリエイティブカンパニーの情報を蓄積していくこと
私のTwitterアカウント(@pulpxstyle )では、サイト制作の現場で使えるTipsやアイデアを発信しています。2021年3月の間で人気があったツイートをまとめてみました。ブクマに埋もれてしまって探すのが大変という方はこちらからチェックしてみてください。 私が資料を作成する際に鉄板にしているフォント私が資料を作成する際に鉄板にしているフォント pic.twitter.com/6U1TQX8ojM — 小林 I Web Designer (@pulpxstyle) March 11, 2021 私が資料を作成する際に使う”明朝体”や”セリフ”フォント私が資料を作成する際に使う "明朝体" や "セリフ" フォント pic.twitter.com/56N4AuYWzi — 小林 I Web Designer (@pulpxstyle) March 17, 2021 背景に使える”やわ
CSSのみで写真に装飾を施す方法を紹介します。過度な装飾は避けたいのでできるかぎりシンプルなものを用意しました。デザインに合うものがありましたらご利用ください。 共通のHTMLHTMLは共通して以下のものを使用します。 .image { position: relative; } .image::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); height: calc(100% - 20px); border-image-source: repeating-linear-gradient(45deg, #fff, #fff 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 /
テキストを強調させる方法として太文字や下線text-decoration: underlineはよく使われますが、実は他にも強調させるコードがたくさんあります。今回は11パターン紹介しますのでデザインに合わせてご利用ください。 テキストを強調させるCSSコード
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 .pie { position: relative; margin-right: auto; margin-left: auto; width: 300px; height: 300px; background-image: conic-gradient(#d5525f 0% 60%, #d9d9d9 60% 100%); border-radius: 50%; } .pie span { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); color: #fff; font-size: 26px; font-weigh
いざという時に必要な写真やイラスト、アイコン素材。汎用性が高く使いやすい無料の素材配布サイトを集めてみました。ブログなど個人運用のサイトは無料のもので済ませておきたいもの。ぜひ一通り確認してみてください。 写真
文章はwrapの中におさめつつ、写真だけ画面横サイズいっぱいに広げたい時のCSSテクニックを紹介します。テキスト用のwrapと写真用のwrapの2つを用意しなくても、同じ親要素内にまとめても写真だけサイズを変更できるので便利。写真を印象的に表現したいページに使えます。 まずはデモを用意したのでご覧ください。文章はPC画面で600px、スマホ画面で80%内におさまっていて、写真だけ横幅いっぱいに広がっています。 See the Pen Calc Margin by Kobayashi (@Pulp_Kobayashi) on CodePen. 写真も本来はPC画面で600px、スマホ画面で80%表示されるはずなのですが、写真にだけcalc()で指定することで全画面表示にすることができます。 これはテキスト部分の外側にある余白の値を計算して、写真をその分左右に広げることにより親要素の横幅を無視
よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
現場でよく使われているWebデザインをCSSのみで実装する方法を解説した著書「現場で使えるWebデザインアイデアレシピ」を執筆しました。本書は、私がTwitterで発信してきたWeb制作Tipsをまとめて、具体的に解説した一冊です。「デザインを見ただけで必要なHTMLタグとCSSコードをイメージし実装できるようになる」をテーマに、Twitterでは紹介しきれなかったデザインアイデアを画像とともに詳しく解説しています。
このページを最初にブックマークしてみませんか?
『Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く