タグ Pulp Note
人気順 5 users 50 users 100 users 500 users 1000 usersいざという時に使える13のHTML&CSS Tips集 | Pulp Note
いざという時のために覚えておくと便利なHTML&CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には... 続きを読む
【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印... 続きを読む
無料でアイコンやイラストを配布している8つのサイト | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
アイコンやイラストの素材はいくらあっても足りないもの。特にWebサイトで利用する場合、サイト全体で一貫したテイストで表現したいため、大手の素材サイトでは難しいこともしばしば。 そこで今回はサイト内で一貫したテイストであり、無料でアイコンやイラストを配布しているサイトを8つ紹介します。素材で困ったらまず... 続きを読む
現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一... 続きを読む
Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありました... 続きを読む
現場で使えるCSSデザイン Tips 9選。覚えておくと便利なTipsを集めてみた | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置を調整する見出しの改行位置を調整する見出し... 続きを読む
あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
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やアイデアを紹介
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く... 続きを読む
Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた | Pulp Note
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを15個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Ubersuggest SEO... 続きを読む
Webデザインの参考になるギャラリーサイト11選 | Pulp Note
フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊してデザインを見るようにしています。今回は、私がデザインを見たい時に頻繁に徘徊しているサイトを11個紹介します。クライアントとの打ち合わせ時も実際のサイトを見なが... 続きを読む
ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 ボタンのスタイル ボタンは11... 続きを読む
detailsを使ってHTMLとCSSのみでアコーディオンを実装する | Pulp Note
よくある質問でよく利用するアコーディオン機能をHTMLのみで実装する方法です。アニメーションはCSSで実装し、JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。 続きを読む