はてなブックマーク

2022.09.14 2024.07.15 Webデザイン 【最新版】パララックス効果は「simpleParallax」で決まり！使い方をわかりやすく解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 そんな方におすすめなのがJavaScriptライブラリの「simpleParallax」です。 JavaScriptを使いますが、仕組みが理解できればカンタンにカスタマイズできるため、Webサイト制作で重宝すると思います。 CSSで実装するよりもsimpleParallaxを使うほうが実はカンタンだったり… その理由は当記

2024.01.06 2024.07.15 Webデザイン 【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

2022.08.31 2024.07.15 Webデザイン 【超最新版】Micromodal.jsの使い方やモーダルUIの実装方法を徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 アクセシビリティのことも考えると、作成が難しいUIがモーダルです。Twitterなどでは「無理に自作せずライブラリに頼ったほうがいい」という声を見かけることが多くなりました。 そこで今回はかんたんにアクセシビリティ対応のモーダルウインドウが実装できる、jQuery非依存の超軽量ライブラリ「Micromodal.js」について詳しく解説し

いつもclassの名前をどうするかで悩むどこにどんなclassを付けたか忘れてしまい、コーディングに時間がかかるclassの命名に必要な英語がパッと浮かばない class命名規則のポイント主なポイントclass名を見たらどこの何かがわかるまずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。 特にコーディングを学び始めて間もない方はナンバリングをするだけだったり、何の脈絡もない名前を付けてしまったりして、修正が必要になったときに見返すと「何が何だかわからない状態」になってしまう人もいたりします。 そんな悲劇はもうたくさんです。class名を見れば「だいたいこの辺かな？」とアタリが付けられるようにしましょう。その術を以降で伝えていきます。 ある程度の規則性があるコードの品質が高いレベルで必要な場合は「厳格な

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） そんな時1箇所ずつ書き換えていませんか？？コーダーだったらメンテナンス性の高いCSSを書きたいところ。 とはいえ、コードが長くなるほど入力間違いは増えやすくなり、修整も大変になります。 そんな時に使える機能が「CSS変数（カスタムプロパティ）」です。 SassなどのCSSプリプロセッサを使わず、CSSの一括管理ができる便利な機能。 当記事ではCSS変数の基礎から使い方まで解説するので、一歩進んだコーディング知識を身につけたい方はチェック

2024.01.05 2024.08.04 Webデザイン 【VSCode×GitHub】使い方から連携手順まで完全解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Gitを学ぶには時間と労力がかかりますし、最適な連携方法（できれば簡単なやり方）を模索して当記事に辿り着いた方もいるかもしれません。 普段使ってるコードエディタ・VSCodeで簡単にGitHubが使えたら便利だと思いませんか？？ そんな方に向けて、この記事ではVSCodeからGitHubに連携する手順についてまとめてみました！ 初期設定から具体的な連携操作

話題のプロジェクト管理ツール”Notion”。 はじめこそクリエイティブな仕事をしている方達の利用が目立っていましたが、最近は業種や職種関係なく利用者が増えており、個人だけでなく企業の業務管理ツールとして採用されるケースも徐々に目立ってきています。 その一方で、 といった悩みや疑問が多いのも事実。 この記事では、興味はあるけど使い方がイマイチわからない方に向けて、Notionの基本的な使い方を徹底的にまとめています。 読み終える頃には、仕事もプライベートもWEB上（Notion上）で一元管理ができる「自分流ノート」が作れるようになります！ ぜひ、最後まで読んでみてください！ NotionとはNotion（ノーション）とは、メモの作成、タスク管理、データ管理・共有など、さまざまな情報を一元管理できるツールで、CMS（コンテンツ管理システム）と呼ばれるものの中の1つです。 2018年にリリース

2023.12.29 2024.07.15 Webデザイン 【最新版】GitHub Desktopとは？インストールから具体的な使い方までわかりやすく徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Git初心者の方は特に、コマンド操作に抵抗を感じている方も多く、なかなか一歩が踏み出せないんじゃないでしょうか？ そんな方には視覚的に操作できるGUIツールがおすすめです！ いくつかあるGUIツールの中でも、今回はGitHub公式のGitHub Desktopについてご紹介します。 インストール方法から使用方法までキャ

VSCodeプラグイン【DartJS Sass Compiler and Sass Watcher】でSassを使ってみよう！ この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）

スマホにおける:hoverは、タップした要素に装飾があたった後、別の要素に「タップされた」と判定されるまで装飾が残ります。 :hoverで指定したものは、タップして指を離した後も設定した装飾が残り続けることになるのでデザイン的・ユーザビリティ的にもあまりよくありません。 これでいくと、タッチ端末でタップする瞬間の装飾をしたいなら、:hoverではなく:activeの方が近いということになります。 では、PCではhover、スマホ・タブレットではactiveと切り分けて、同じスタイルをそれぞれ指定すればいい、という考えもできますがなかなかスッキリしませんよね。 そもそもタッチ端末ではユーザーの動作に反応する装飾は行わない、というのも選択肢としてはありだと思いますが、今回はそこも含めてどう制御するかという観点でまとめていきます。 端末・ブラウザによる挙動の違い ios特有のものなのか、特にsa

2024.01.06 2024.07.16 Webデザイン 【最新版】XDおすすめプラグイン22選！【これだけ入れておけばOKです】 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 そんなお悩みをお持ちのデザイン初学者さん必見です。 迷ってしまう気持ちはよくわかりますが、実は最低限入れておくべきプラグインは限られています。 この記事では厳選した22個のプラグインを使い方とともにご紹介！ デザインだけでなくコーディングに役に立つプラグインもあるので、コーダーを目指す方にもぜひ読んでいただきたいです。 すべてを入れる必要はないで

この記事を書いた人 よっしー大阪出身、関東在住の26歳。宇宙とアニメが好き。未経験からWebデザイナーになりました。現在はフリーランスとして活動中。 今話題のタスク管理ツール、Notion。 興味はあるし使ってみたいけど、「使いこなせるかわからない…」と不安を感じていませんか？ Notionは多機能すぎて慣れるまでに時間がかかりますが、他のタスク管理ツールには戻れなくらい快適なタスク管理を行うことができるんです！ 私自身、タスク管理をNotionに切り替えてから、Webデザイナーとしての仕事を効率よくこなせるようになりました。 今回の記事では、実際に私がWebデザイナーとしてどのようにNotionを使用しているか、実際の活用方法を交えながらNotionのタスク管理術をご紹介します。 基本的なタスク管理方法をお伝えするので、ぜひご自身のNotionも一緒に操作しながら、記事を読んでみてくださ

@importとは@importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。 @importの廃止予定時期便利な@importですが、公式で廃止予定であることが明言されています。 （日本語訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。 この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数のサ

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！

粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 今回はカード型（タイル型）レイアウトの作り方についてまとめました。 汎用的なWebデザインの一つですが、メディアクエリでカラム（縦方向の表示数）を変える時や、WordPresの記事一覧のようにカードの表示枚数が変動するサイトの場合を考慮したら意外と難しいデザインだったりします。 いくつか実装方法はありますが、この記事で紹介するのはnth系の擬似クラスやcss gridプロパティを使わない、初学者の方でも簡単に取り入れられる方法となっています。

粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 Webサイトを作成するうえで「アコーディオンメニュー」という汎用的なUIパーツがありますが、jQueryを活用して実装するケースが多いです。 基礎的なメソッドを知っておけば簡単に作ることができるので、この記事ではアコーディオンメニューの簡単な実装方法をコード付きで解説します。 記事を読み終えると、アコーディオンメニューの実装方法が一通り理解でき、使い回しできるコードを知ることができますよ！ jQueryでアコーディオンメニューを作ろう アコーディオンメニューとは アコーディオン

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。 開発環境がしやくなる拡張機能がたくさんあるChromeですが、たくさんあってどれを選べばいいか分からないと悩んでる方もいるかと思います。 今回紹介するものは僕が実際に使用しているものの中から、自分的に便利だと感じたポイントを絞ってお伝えしているので参考になるのでは無いかと思います！ 新しい情報が入り次第どんどん更新していってますので、定期的にチェッ

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コンテンツが横方向に自動で流れ続けるスライドショー、と言われてイメージ湧きますでしょうか？ コンベアスライドショーともいいますが、今回はそちらをCSSのみで実装する方法をまとめました。 ECサイトなどで見かけることもありますし、iPhoneの方はApp Storeの中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。

2024.01.05 2024.08.04 Webデザイン 【2024年版】レスポンシブデザインのブレイクポイントまとめ！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 今回はレスポンシブデザインのブレイクポイントについてまとめました。 ポイントを決める際の考え方も含めて、順を追って解説していきます。 また、単位の使い分けについてはこちらの記事でまとめていますので、よかったらご覧ください。

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）

この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。

この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 コーディング学習を始めたての時に、覚えることが多すぎてどうしたら良いかわからなくなってしまった経験ありませんか？ 頑張ってメモ取りながら学習をして行くけどなかなか進まず、どんどんモチベーションが下がってしまうという現象はコーディングを学習している人のほとんどが経験することです。 そのため今回は、実際のコーディングでよく使用するHTMLタグだけを集めてそれぞれの活用例をまとめました。 この記事を読むことで頻出のHTMLタグを抑えることができ、爆速でコーデ

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はモーダルウィンドウをプラグイン無しで作成する方法をまとめます！ モーダルウィンドウはWebサイトによく使われるUIですが、意外に実装が難しいんですよね。 同ページ内に複数モーダルを設置する方法まで、基礎的な内容は解説していますので、不安な方は是非参考にしていただけると嬉しいです！ モーダルウィンドウ とはモーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。 モーダルウィ

この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 最近話題のFigmaのプラグイン「HTML To Figma」の使用方法をまとめました！！ 「HTML To Figma」とは、URLを入れるだけで勝手にトレースをしてくれる最強のプラグインです。 僕自身このプラグインを活用してデザインの制作時間が大幅に削減されました！ それでは早速解説していきます♪ HTML To FigmaとはHTML To Figmaとは、Figmaで使用できるプラグインです。 このプラグインは、ウェブサイトのURLを貼り付ける