サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ChatGPT
pengi-n.co.jp
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ！ また、jQueryでコードを書いてスライダーを実装する方法は以下の記事で紹介しています。これからjQueryを勉強する方は参考にしてみてください！ 【プラグインなし】カルーセルスライダーの作り方を解説（jQuery） 【jQuery】クロスフェー
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 当記事ではjQueryでは無く、素のJavaScriptのDOM操作について解説しています。 DOMの概念も解説しているので、ただコードをコピペするのではなく、「DOM操作とは何か」を理解出来るようになりますよ。 DOMとは？ DOMとは「Document Object Model」の略で、ブラウザーがHTMLを解析する際に生成するデータ構造のことです。各要素は階層構造（ツリー構造）で表現されます。 JavaScriptでHTMLを操作したいとき、ソースとなるHTMLそのものを操作するわけでなく、DOMにアクセスして操作します。 コーディング時に意識すること
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 そんな方におすすめなのがJavaScriptライブラリの「simpleParallax」です。 JavaScriptを使いますが、仕組みが理解できればカンタンにカスタマイズできるため、Webサイト制作で重宝すると思います。 CSSで実装するよりもsimpleParallaxを使うほうが実はカンタンだったり… その理由は当記事でフロントエンドエンジニアでもある筆者が、実際のコードとともに解説していきます。 ぜひ最後までお付き合いください！ パララックスとは？ パララックスとは「視差効果」という意味で、奥行き感の演出を意味します。 Web制作におけるパララックス
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 アクセシビリティのことも考えると、作成が難しいUIがモーダルです。Twitterなどでは「無理に自作せずライブラリに頼ったほうがいい」という声を見かけることが多くなりました。 そこで今回はかんたんにアクセシビリティ対応のモーダルウインドウが実装できる、jQuery非依存の超軽量ライブラリ「Micromodal.js」について詳しく解説します！ 特徴やできること、動く仕組みや各オプション、動かない場合のトラブルシューティングなどを網羅的に紹介します。 Micromodal.jsを使ってみようかな…と考えていた方は必見！ぜひ最後までご覧くださいね。
2024.01.16 2024.06.19 Webデザイン 【初学者必見】HTMLにつけるclass名(クラス名)の命名規則の考え方を徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 class命名規則のポイント 主なポイント class名を見たらどこの何かがわかる まずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。 特にコーディングを学び始めて間もない方はナンバリングをするだけだったり、何の脈絡もない名前を付けてしまったりし
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 そんな時1箇所ずつ書き換えていませんか？？コーダーだったらメンテナンス性の高いCSSを書きたいところ。 とはいえ、コードが長くなるほど入力間違いは増えやすくなり、修整も大変になります。 そんな時に使える機能が「CSS変数（カスタムプロパティ）」です。 SassなどのCSSプリプロセッサを使わず、CSSの一括管理ができる便利な機能。 当記事ではCSS変数の基礎から使い方まで解説するので、一歩進んだコーディング知識を身につけたい方はチェックしてみてください！ CSS変数（カスタムプロパティ）とは CSS変数（カスタムプロパティ）とは、CSSのプロパティ値を代入し
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 Gitを学ぶには時間と労力がかかりますし、最適な連携方法（できれば簡単なやり方）を模索して当記事に辿り着いた方もいるかもしれません。 普段使ってるコードエディタ・VSCodeで簡単にGitHubが使えたら便利だと思いませんか？？ そんな方に向けて、この記事ではVSCodeからGitHubに連携する手順についてまとめてみました！ 初期設定から具体的な連携操作方法まで解説します！
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 話題のプロジェクト管理ツール”Notion”。 はじめこそクリエイティブな仕事をしている方達の利用が目立っていましたが、最近は業種や職種関係なく利用者が増えており、個人だけでなく企業の業務管理ツールとして採用されるケースも徐々に目立ってきています。 その一方で、 といった悩みや疑問が多いのも事実。 この記事では、興味はあるけど使い方がイマイチわからない方に向けて、Notionの基本的な使い方を徹底的にまとめています。 読み終える頃には、仕事もプライベートもWEB上（Notion上）で一元管理ができる「自分流ノート」が作れるようになります！ ぜひ、最後まで読ん
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 Git初心者の方は特に、コマンド操作に抵抗を感じている方も多く、なかなか一歩が踏み出せないんじゃないでしょうか？ そんな方には視覚的に操作できるGUIツールがおすすめです！ いくつかあるGUIツールの中でも、今回はGitHub公式のGitHub Desktopについてご紹介します。 インストール方法から使用方法までキャプチャ付きで解説しているので、この記事を読めばGit初心者の方でもGitHubをサクサク使えるようになります！ エンジニア志望の方だけでなく、Web制作のコーダーやWebデザイナーの方にも便利なツールですので、GitHub Desktopを使っ
ホーム PENGINコラム VSCodeプラグイン【DartJS Sass Compiler and Sass Watcher】でSassを使ってみよう！ 2024.01.08 2024.08.04 Webデザイン VSCodeプラグイン【DartJS Sass Compiler and Sass Watcher】でSassを使ってみよう！
スマホにおける:hoverは、タップした要素に装飾があたった後、別の要素に「タップされた」と判定されるまで装飾が残ります。 :hoverで指定したものは、タップして指を離した後も設定した装飾が残り続けることになるのでデザイン的・ユーザビリティ的にもあまりよくありません。 これでいくと、タッチ端末でタップする瞬間の装飾をしたいなら、:hoverではなく:activeの方が近いということになります。 では、PCではhover、スマホ・タブレットではactiveと切り分けて、同じスタイルをそれぞれ指定すればいい、という考えもできますがなかなかスッキリしませんよね。 そもそもタッチ端末ではユーザーの動作に反応する装飾は行わない、というのも選択肢としてはありだと思いますが、今回はそこも含めてどう制御するかという観点でまとめていきます。 端末・ブラウザによる挙動の違い ios特有のものなのか、特にsa
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 そんなお悩みをお持ちのデザイン初学者さん必見です。 迷ってしまう気持ちはよくわかりますが、実は最低限入れておくべきプラグインは限られています。 この記事では厳選した22個のプラグインを使い方とともにご紹介！ デザインだけでなくコーディングに役に立つプラグインもあるので、コーダーを目指す方にもぜひ読んでいただきたいです。 すべてを入れる必要はないですが、自分にとってこれは必要そうだ！と思うものがあったら、記事を読んだ後さっそくインストールしてみてください。XDでの作業がぐっと捗りますよ！
Notionとは Notionとは、メモ作成やタスク管理、プロジェクト管理などを一括で行えるアプリケーションです。 オールインワンワークスペースとして、管理したい情報をNotion1つでカバーできるので、個人で使うことはもちろん、部署間やプロジェクトチームなど、企業でも利用できる万能アプリとなっています！ Notionでできること一覧 Notionでは、下記のようなことができます。 これらはほんの一部なので、カスタマイズすればより幅広く活用することが可能です！ 他タスク管理ツールとの違い Notionが管理ツールとして優れている点 Notionが優れている点の1つに、「1つのタスクに複数の情報を紐づけられる」ことが挙げ られます！ 他のタスク管理ツールではタスク一覧を作ったとしても、スケジュールの重なり具合を表示させたり、大きなタスクに付随する細かいタスクを合わせて表示することはできません
@importとは @importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。 @importの廃止予定時期 便利な@importですが、公式で廃止予定であることが明言されています。 （日本語訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。 この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 Notionを使ってみたいけど、何から始めたら良いかわからない…という方は、多いのではないでしょうか。 実は、Notionにはたくさんのテンプレートが存在しており、目的にあったテンプレートを使うだけで、Notionを使いこなせるようになります！ また、私自身フリーランスのWebデザイナーとして、案件の進捗やTo Do listなどでNotionを使っていますが、進捗管理を一元化できたり記録を残しておけたりと、とにかく便利で…！ ぜひみなさんにも使っていただきたいので、この記事では、Notionのテンプレートが配布されているサイトや動画を10個、厳選してご紹介
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 今回はカード型（タイル型）レイアウトの作り方についてまとめました。 汎用的なWebデザインの一つですが、メディアクエリでカラム（縦方向の表示数）を変える時や、WordPresの記事一覧のようにカードの表示枚数が変動するサイトの場合を考慮したら意外と難しいデザインだったりします。 いくつか実装方法はありますが、この記事で紹介するのはnth系の擬似クラスやcss gridプロパティを使わない、初学者の方でも簡単に取り入れられる方法となっています。
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 Webサイトを作成するうえで「アコーディオンメニュー」という汎用的なUIパーツがありますが、jQueryを活用して実装するケースが多いです。 基礎的なメソッドを知っておけば簡単に作ることができるので、この記事ではアコーディオンメニューの簡単な実装方法をコード付きで解説します。 記事を読み終えると、アコーディオンメニューの実装方法が一通り理解でき、使い回しできるコードを知ることができますよ！ jQueryでアコーディオンメニューを作ろう アコーディオンメニューとは アコーディオンメニューとは、Webページなどの表示・操作要素の一つで、選択した項目がその場で広が
この記事を書いた人 だいち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の中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 今回はレスポンシブデザインのブレイクポイントについてまとめました。 ポイントを決める際の考え方も含めて、順を追って解説していきます。 また、単位の使い分けについてはこちらの記事でまとめていますので、よかったらご覧ください。
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）
2024.01.08 2024.01.08 【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾） 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 コーディング学習を始めたての時に、覚えることが多すぎてどうしたら良いかわからなくなってしまった経験ありませんか？ 頑張ってメモ取りながら学習をして行くけどなかなか進まず、どんどんモチベーションが下がってしまうという現象はコーディングを学習している人のほとんどが経験することです。 そのため今回は、実際のコーディングでよく使用するHTMLタグだけを集めてそれぞれの活用例をまとめました。 この記事を読むことで頻出のHTMLタグを抑えることができ、爆速でコーディング学習を進められるようになります。 チートシートのダウンロード まずは、業務で良く使うHTMLタグについ
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 今回はモーダルウィンドウをプラグイン無しで作成する方法をまとめます！ モーダルウィンドウはWebサイトによく使われるUIですが、意外に実装が難しいんですよね。 同ページ内に複数モーダルを設置する方法まで、基礎的な内容は解説していますので、不安な方は是非参考にしていただけると嬉しいです！ モーダルウィンドウ とは モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。 モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 最近話題のFigmaのプラグイン「HTML To Figma」の使用方法をまとめました！！ 「HTML To Figma」とは、URLを入れるだけで勝手にトレースをしてくれる最強のプラグインです。 僕自身このプラグインを活用してデザインの制作時間が大幅に削減されました！ それでは早速解説していきます♪ HTML To Figmaとは HTML To Figmaとは、Figmaで使用できるプラグインです。 このプラグインは、ウェブサイトのURLを貼り付けるだけで、デザインのトレースを完了させてくれるんです！ この機能を使うことで、デザインの工数を大きく削減する
粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 コーディングで仕事をするには、デザインツールで作成されたデザインカンプからのコーディング能力が必要です。 その中でも特にXDは操作性が高く人気なので、XDからコーディングできる力は必須といっていいでしょう。 この記事では、XDからコーディングするために必要なテクニックを解説しています。 僕がコーディング代行などの実務を通して感じた重要ポイントもふまえてまとめているので、記事を読み終えると実践を想定した知識が身に付きますよ！ AdobeXDとコーディング Adobe XDはアドビシステムズが提供している、UIデザインツールです。 「思考のスピードでデザインする
次のページ
このページを最初にブックマークしてみませんか？
『pengi-n.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
