いざという時に使える13のHTML&CSS Tips集 | Pulp Note

2022/05/09 423 users

いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には... 続きを読む

【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/07/08 18 users hover時 Tips CSS 矢印 現場

Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印... 続きを読む

無料でアイコンやイラストを配布している8つのサイト | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/07/05 13 users テイスト Tips 大手 アイコン 素材

アイコンやイラストの素材はいくらあっても足りないもの。特にWebサイトで利用する場合、サイト全体で一貫したテイストで表現したいため、大手の素材サイトでは難しいこともしばしば。 そこで今回はサイト内で一貫したテイストであり、無料でアイコンやイラストを配布しているサイトを8つ紹介します。素材で困ったらまず... 続きを読む

現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/24 12 users Tips レイアウト Flexbox 現場 webデザイン

現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一... 続きを読む

Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/17 228 users 依存性 初見 Tips 12個 これら

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありました... 続きを読む

現場で使えるCSSデザイン Tips 9選。覚えておくと便利なTipsを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/08 13 users CSS Tips 改行位置 現場 webデザイン

これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置を調整する見出しの改行位置を調整する見出し... 続きを読む

あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/01 309 users Tips transform 現場 Web制作 webデザイン

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 CSS 3D Transform Examples CSS 3D Transfor... 続きを読む

IE終了後に即戦力なHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/05/20 13 users Tips デスクトップアプリケーション 現場 コード 歓喜

マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く... 続きを読む

Web制作の現場で使えるWebサービス15選！無料で使えるサービスを集めてみた | Pulp Note

2021/05/13 425 users CSSコーディング ワンクリック ドラッグ＆ドロップ ツール

CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを15個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Ubersuggest SEO... 続きを読む

Webデザインの参考になるギャラリーサイト11選 | Pulp Note

2021/04/19 385 users webデザイン 参考

フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊してデザインを見るようにしています。今回は、私がデザインを見たい時に頻繁に徘徊しているサイトを１１個紹介します。クライアントとの打ち合わせ時も実際のサイトを見なが... 続きを読む

CSSのみで実装するシンプルな見出し21パターン | Pulp Note

2021/04/09 8 users 見出し CSS テイスト 蛍光ペン 汎用性

CSSだけで実装できるシンプルな見出しを21パターンご紹介します。汎用性が高くテイストに縛られずに使用できるデザインなのでストックしておくと便利に使えると思います。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出し21パターン 蛍光ペンのような線をひいた見出し 続きを読む

ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note

2021/04/01 12 users before CSS After 疑似要素 テキストリンク

CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 ボタンのスタイル ボタンは11... 続きを読む

detailsを使ってHTMLとCSSのみでアコーディオンを実装する | Pulp Note

2021/03/29 10 users Polyfill details アコーディオン CSS 質問

よくある質問でよく利用するアコーディオン機能をHTMLのみで実装する方法です。アニメーションはCSSで実装し、JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。 続きを読む