以前「2020年版」としてFigmaのおすすめプラグインについて記事を書きました。多くの人に読んでいただき大変感謝しております🙏✨しかしそれから時もだいぶ流れ、続々と新しいプラグインがリリースされて...

orientation-String-see exampleThis is the orientation (or direction) of the parallax effect. Choose up and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (right, down, left, up left, up right, down left or down right). When

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。

画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class

Wordpress等で記事の一覧をFlexboxで横並びにすることはよくあると思います。 デザインカンプなどでは「良い感じ」の文字量で作られていることが多いので気にならなくとも、実際に運用が始まった後に「記事毎にタイトルの長さが違っているので高さが揃わず気持ち悪い」ということはよくあると思います。 自分でも良く忘れるのでので、備忘録も兼ねて。 完成形まず、目指すべき完成形はこんな感じです。 分かりやすいようにタイトル部分に背景色を付けましたが、タイトル部分の高さが揃っているのでボタンの位置もそろっており、細かいことを言ってくるクライアントやディレクターも満足してくれるでしょう。 このタイトル部分の高さが記事によって異なることで良く陥りがちなレイアウト崩れがこちら。 タイトル行くらいであれば1行～2行で収まるのでそこまで気にならないかもしれませんが、例えば商品説明などが入る場合は参考画像の比

経営理念について語る際は、本来は言葉の定義を明確にしたいという方もいると思います。 企業理念、経営理念、信条、社是、クレド、ビジョン……本来は、それぞれ厳密には定義が異なるのではないかと思います。 ですが、カヤックにおいては経営理念が一番大事だと考えております。各社の理念を見ていくとその会社が何を大事にしているかがわかります。さらに、いい理念は、唱えるだけで会社の戦術すら浮かんできてしまうものです。 ちなみにいい理念の定義を、カヤックでは下記のように考えています。 1.成長性を示唆していること 2.理念から戦略＆戦術のヒントがあること 3.社会に貢献するものであること 会社が成長すべきか否かは意見の分かれるところかもしれません。ですが、資本主義社会そのものを否定しないのであれば、成長は是であり、成長過程でこそ、中で働く社員も成長できると考えています。 理念から戦略や戦術が見えることもそれな

追記(2020/12/14): Qiita の Advent Calendar 2020 に空きがあったので登録しました プログラミング技術の変化で得られた知見・苦労話【PR】パソナテック Advent Calendar 2020 1日目 追記(2020/12/30): Homebrew のインストーラーがM1 Macをサポートされました！ 追記(2021/02/07): Homebrew 3.0.0 がリリースされ正式に対応されました Apple Silicon (M1 チップ) を採用した Mac に Homebrew をインストールするときのみんなの設定に対してもっと楽な方法があるのにと思い投稿しました。 上記の記事ではわざわざRosettaを選択してーやシェルを切り替えてーみたいなことが書いてありますがはっきり言って面倒です！ 前提 Rosettaをインストールしている これがない

FAQの構造化データとは？ FAQ形式の構造化データは、質問と回答がペアになったデータ構造です。FAQ形式で構造化データをページに埋め込んでおくと、Google検索結果にリッチリザルトとして表示されます。 構造化データを使用して「よくある質問」をマークアップする  |  Google 検索デベロッパー ガイド  |  Google Developers Google検索結果には、質問ごとにアコーディオン形式で表示されます。回答部分には、HTMLタグが記述できるので、見出し・リンク・強調表示が可能です。長い回答も記述できますが、300文字前後で省略される点には注意が必要です。 また、FAQの構造化データは、Googleアシスタントや音声検索の回答として利用されることがあるので、活用シーンは広そうです。 関連ツール：構造化データと画面デザインを1画面で確認する【アナトミー】 Q&Aの構造化デー

非エンジニアのために最適化されたコンテンツ世の中の多くのエンジニアリング学習サービスは、エンジニアのために作られています。この「非エンジニアのためのエンジニアリング」は、コンテンツの構成、内容、伝え方、すべてがエンジニアではない人を対象に設計されています。特別な前提知識は必要ありません。 手を動かしながら学べるチュートリアルテキストをただ読むだけでは、知識を身に付ける前に飽きてしまいます。実践形式のチュートリアルをクリアしていくことで、自然とエンジニアリングの知識を身に付けることができます。初めての人におすすめのチュートリアルもありますが、学びたいことがある人は自由な順番でチュートリアルを進めることができます。 明日から仕事で使える知識を習得プログラミングを学ぶために、使いもしないサンプルアプリケーションを作る必要はありません。仕事でWebブラウザを使っている人であれば、明日の仕事からでも

フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 コンテンツを検索に適したものにすることで、最適なユーザーに確実にコンテンツが表示されるようにできます。検索エンジン最適化（SEO）は、検索エンジンでのウェブサイト ページの視認性を高めて、サイトにより価値のあるトラフィックを集めるプロセスです。サイトを Google 検索に最適なものにするために、何を行えばいいか確認しましょう。 検索エンジン最適化は、サイトを検索エンジン向けに改善するプロセスです。また、このプロセスを仕事として担当する人の肩書きとしても使われます。例文: 「当社のウェブでの認知度を高めるために新しい SEO 担当者を採用しました。」 Blogger、Wix、Squarespace などの自動化されたウェブ ホスティング プラットフォームでウェブサイトを運営している場合や

Linearly Scale font-size with CSS clamp() Based on the Viewport Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior at different screen sizes more predictabl

Getting right to the code, here’s a working implementation: html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing. That would scale fon

system, global, localの順に読み込まれる。例えば、systemとlocalで同じ項目が設定されている場合はlocalの値が有効になる。 なお、以下で説明するgit configコマンドでそれぞれの設定ファイルの確認・編集が可能なので、ファイルの置き場所を気にする必要は特にない。 git configコマンドによる設定の確認・変更 設定に対する確認や変更などの処理はgit configコマンドを使う。 設定項目 設定項目の一覧およびその詳細は以下のリンクから。 Git - git-config Documentation 山ほどあるが、例えば、 color.ui : Gitの出力の色分け（通常はautoと設定） core.editor : コミットメッセージなどの編集で用いるエディタ user.name : ユーザー名 user.email : Eメールアドレス などがあ

はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的