サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
pengi-n.co.jp
そんな方におすすめなのがJavaScriptライブラリの「simpleParallax」です。 JavaScriptを使いますが、仕組みが理解できればカンタンにカスタマイズできるため、Webサイト制作で重宝すると思います。 CSSで実装するよりもsimpleParallaxを使うほうが実はカンタンだったり… その理由は当記事でフロントエンドエンジニアでもある筆者が、実際のコードとともに解説していきます。 ぜひ最後までお付き合いください! パララックスとは? パララックスとは「視差効果」という意味で、奥行き感の演出を意味します。 Web制作におけるパララックスは、画面をスクロールするとスクロール方向とは別方向に要素が動いたり、スクロールタイミングと要素がズレて動くことで、要素間に重なりや奥行き感が出るデザインを指します。 パララックスによりコンテンツをより魅力的に見せたり、ユーザーの関心を引
この記事を書いた人 もなか30歳を過ぎてからプログラミングの勉強を独学で始め、現在コーダー3年目。毎日JavaScriptについて勉強中。趣味はパンを焼くこと。2人の男の子のママ。
いつも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変数の基礎から使い方まで解説するので、一歩進んだコーディング知識を身につけたい方はチェック
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) Gitを学ぶには時間と労力がかかりますし、最適な連携方法(できれば簡単なやり方)を模索して当記事に辿り着いた方もいるかもしれません。 普段使ってるコードエディタ・VSCodeで簡単にGitHubが使えたら便利だと思いませんか?? そんな方に向けて、この記事ではVSCodeからGitHubに連携する手順についてまとめてみました! 初期設定から具体的な連携操作方法まで解説します!
話題のプロジェクト管理ツール”Notion”。 はじめこそクリエイティブな仕事をしている方達の利用が目立っていましたが、最近は業種や職種関係なく利用者が増えており、個人だけでなく企業の業務管理ツールとして採用されるケースも徐々に目立ってきています。 その一方で、 といった悩みや疑問が多いのも事実。 この記事では、興味はあるけど使い方がイマイチわからない方に向けて、Notionの基本的な使い方を徹底的にまとめています。 読み終える頃には、仕事もプライベートもWEB上(Notion上)で一元管理ができる「自分流ノート」が作れるようになります! ぜひ、最後まで読んでみてください! NotionとはNotion(ノーション)とは、メモの作成、タスク管理、データ管理・共有など、さまざまな情報を一元管理できるツールで、CMS(コンテンツ管理システム)と呼ばれるものの中の1つです。 2018年にリリース
この記事を書いた人 もりみ本業(機械設計)育休中に、Web業界への転職を目指し家事・育児・勉強に励む一児の母です。東海地方在住。旅行が趣味です。 Git初心者の方は特に、コマンド操作に抵抗を感じている方も多く、なかなか一歩が踏み出せないんじゃないでしょうか? そんな方には視覚的に操作できるGUIツールがおすすめです! いくつかあるGUIツールの中でも、今回はGitHub公式のGitHub Desktopについてご紹介します。 インストール方法から使用方法までキャプチャ付きで解説しているので、この記事を読めばGit初心者の方でもGitHubをサクサク使えるようになります! エンジニア志望の方だけでなく、Web制作のコーダーやWebデザイナーの方にも便利なツールですので、GitHub Desktopを使ってGitHubを体験してみましょう! GitHub DesktopとはGitHub Des
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特有のものなのか、特にsaf
XDプラグインとはそもそもプラグインとは、アプリケーションの機能を拡張するプログラムのこと。 プラグインを使用することで、デフォルトにない機能が使えるようになります。 XDでインストールできるプラグインはなんと250種類以上!何を使えばいいか迷っちゃいますね。 XDプラグインを使うメリットXDプラグインを使うメリットは主に以下2点です。 自分の作業に合ったプラグインを見つけて、より使いやすくカスタマイズしてみましょう! XDプラグインのインストール方法まずはプラグインのインストール方法を見ていきましょう。 XDプラグインパネルからXDを起動したら、メニューバーの「プラグイン」から「プラグインを参照」をクリック。 こんな感じの画面が現れます。このトップ画面には人気のプラグインなどが提示されているので、この中から好きなものを探しても良いです。 特定のプラグインを検索するには、虫眼鏡のマークか「
この記事を書いた人 よっしー大阪出身、関東在住の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とほとんどのグローバル関数のサ
この記事を書いた人 よっしー大阪出身、関東在住の26歳。宇宙とアニメが好き。未経験からWebデザイナーになりました。現在はフリーランスとして活動中。 Notionを使ってみたいけど、何から始めたら良いかわからない…という方は、多いのではないでしょうか。 実は、Notionにはたくさんのテンプレートが存在しており、目的にあったテンプレートを使うだけで、Notionを使いこなせるようになります! また、私自身フリーランスのWebデザイナーとして、案件の進捗やTo Do listなどでNotionを使っていますが、進捗管理を一元化できたり記録を残しておけたりと、とにかく便利で…! ぜひみなさんにも使っていただきたいので、この記事では、Notionのテンプレートが配布されているサイトや動画を10個、厳選してご紹介します。 テンプレートを使用することで、Notionを簡単に活用することができますよ♪
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください!
今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。 よく議論が起こるテーマですが、先にお伝えしておくとコーディング時の単位に正解は無いです。 案件によってルールが引かれてる場合もありますし、基本的に適材適所使うことが前提です。 あくまで様々な方の意見や情報を見たうえで、一つの考え方としてまとめた形になっているということをご了承ください! 当記事の結論 フォントサイズ:rem要素の大きさ、marginやpadding:rem親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素:%letter-spacingや擬似要素との間隔:emboderなどの可変させたくない要素:pxヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素:vw 次からその根拠と解説を紹介していきます。 絶対値と相対値単位には「絶対値」と「相対値」
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) 今回はカード型(タイル型)レイアウトの作り方についてまとめました。 汎用的なWebデザインの一つですが、メディアクエリでカラム(縦方向の表示数)を変える時や、WordPresの記事一覧のようにカードの表示枚数が変動するサイトの場合を考慮したら意外と難しいデザインだったりします。 いくつか実装方法はありますが、この記事で紹介するのはnth系の擬似クラスやcss gridプロパティを使わない、初学者の方でも簡単に取り入れられる方法となってい
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) 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の中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。
この記事を書いた人 PENGIN LLC.PENGIN BLOGは、LPやECサイト制作を中心に行うPENGIN LLC.が運営しております。 弊社は、プログラミング教育などのテクノロジー教育に関わったメンバーが多数在籍しているため、当メディアを通じて、Web制作をご検討中の企業様やWeb制作を学習中の方の学習に役立つ情報を発信しています。 デザインには根拠が必要とは言いますが「何をどう勉強したら根拠のあるデザインができるようになるの?」っていう方はきっと多いですよね。デザインを学習している誰もが一度はぶち当たる問題だと思います。 この記事では、根拠のあるデザインを作れるようになるためには、どんなことをどうやって学習すれば良いのかを僕の経験を踏まえて紹介していきます。上記の問題にぶち当たっている方は参考にしてみてください! 根拠のあるデザインを提案できるようになる学習ステップ根拠のあるデザ
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) 今回はレスポンシブデザインのブレイクポイントについてまとめました。 ポイントを決める際の考え方も含めて、順を追って解説していきます。 また、単位の使い分けについてはこちらの記事でまとめていますので、よかったらご覧ください。
この記事を書いた人 だいち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を貼り付ける
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) コーディングで仕事をするには、デザインツールで作成されたデザインカンプからのコーディング能力が必要です。 その中でも特にXDは操作性が高く人気なので、XDからコーディングできる力は必須といっていいでしょう。 この記事では、XDからコーディングするために必要なテクニックを解説しています。 僕がコーディング代行などの実務を通して感じた重要ポイントもふまえてまとめているので、記事を読み終えると実践を想定した知識が身に付きますよ! AdobeX
このページを最初にブックマークしてみませんか?
『pengi-n.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く