CSSだけでヘッダー固定時のスクロールのずれを解消する方法【scroll-padding-top】

こんにちは、ナカムラです。 スクロールしてもヘッダーが追従するようにposition: fixed;などで固定配置することがよくあります。 その際、ページ内リンクで該当箇所へスクロールすると、そのままではヘッダーが重なってしまいます。 この問題について、だい…

Rutesが簡単に?!Laravel Folioを試してみる

こんにちは、コバヤシです。 今回は先日stable releaseされたばかりの、Laravel Folioを試してみたいと思います。 Laravel Folioとは Laravel Folioは、Laravel用のファイル・ディレクトリベースのルーティングシステムです。Bladeテンプレートを特定のディ…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -機能紹介編(新規ドキュメント、トゥイーン)-

こんにちは、ユアサです。 今回も前回に引き続きAdobe Animateの内容の記事になります。予告していた通り、今回はトゥイーンなど機能の種類や書き出し方法についての紹介をします。(違う動作のアニメーションの内容も入れるとボリュームが大きくなってしま…

習うより慣れる!FigmaでWebデザイン 〜スタイル設定編〜

こんにちは、ハヤマです。 前回までは、デザインを行う前の下準備について書きました。 tech.arms-soft.co.jp 今回はもう少し進んで、制作する上で設定しておくと便利な「スタイル」についてご紹介します。 (インプットとアウトプットを同時進行で進めてお…

【SQL】データサイエンス100本ノック(構造化データ加工編)に挑戦!!10〜20

こんにちは、ドイです! 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp 挑戦する前に 前回、ブラウザ上でSQLを実行しましたが、今回はエラーが表示され、SQLを実行できませんでした;; # エラー内容 U…

ビューポート単位で100vwのスクロールバーを含めてしまう問題を解決できるのか?

こんにちは、ナカムラです。 今回はCSSでよく使われるビューポート単位について、検証したいことがあったので書きたいと思います。 100vhを使った時にアドレスバーの分、意図した高さにならない問題がiOS safariであります。 その対応に使えそうなビューポー…

話題のChatGPTをLaravelで動かしてみた

こんにちはコバヤシです。 昨今のAIブームも落ち着いてきた感がありますが、今更ながらChatGPTのAPIを試してみたいと思います。 APIキーの発行 OpenAI APIのウェブサイトにアクセスし、ログインをします。 platform.openai.com 右上の設定アイコンをクリック…

イラストを自在に動かす!Adobe Animateを使ってアニメーションを作ってみよう -基本的な動作編-

こんにちは、ユアサです。 業務内でアニメーションを使用する仕様の案件がありました。アニメーション作成については知識が全くなかったので今回は担当しなかったのですが、理想としては「作れます!」と言えるようになりたい・・・・。 そこで今回は、アニ…

クオリティに驚き!Photoshopで画像生成AI(Adobe Firefly)を使ってみた

こんにちは、ハヤマです。 今回は、現在公開されているPhotoshop Beta版で 画像生成AI(Adobe Firefly)機能を使った画像の「生成塗りつぶし(※)」を試してみたいと思います。 ※「ジェネレーティブ塗りつぶし」は、「生成塗りつぶし」に名称が変更となりま…

ページ内スクロールのナビゲーションにカレントを付与するJavaScript(GSAP)

こんにちは、ナカムラです。 今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。 GSAPのscrollTriggerを使用します。 GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger D…

【SQL】データサイエンス100本ノック(構造化データ加工編)に挑戦!!

こんにちは、ドイです! 今回は、今まで挑戦しようと思ってなかなか実行に移せなかったデータサイエンス100本ノックに挑戦しようと思います!! データサイエンス100本ノック(構造化データ加工編)とは 「データサイエンティスト協会スキル定義委員」の提供…

Laravel10の新機能 Pennantを試す

こんにちは、コバヤシです。 今回はlaravel10から実装されたPennantの機能を試してみたいと思います。 Pennant機能とは Pennant機能とは、Laravel 10で新たに導入された、アプリケーションのフラグ管理を助けるツールです。この機能を使うと、アプリケーショ…

最小値や最大値を指定してスタイルを制限!比較関数min()、max()、clamp()を使おう

こんにちは、ユアサです。 コーディングをする際、レスポンシブレイアウトなどにどうしても数値の有効範囲を指定したいという場面があることも多いかと思います。今回は、数値の最大値・最小値を指定できる比較関数を備忘録もかねてまとめていきます。 使う…

習うより慣れる!FigmaでWebデザイン 〜下準備編〜

こんにちは、ハヤマです。 今回からは実践を兼ね、学習しながらfigmaでWebデザインにチャレンジしていきます。 操作について未熟な点があるかと思いますが、筆者の学習を兼ねているためご勘弁を、、 手を動かしながら学んでいければと思います! (筆者:普…

Fat Controllerから脱しよう!ADRについて学ぶ!【実装編】

こんにちは!ドイです! 前回の記事では、ADRの概念について学びました。 今回は、LaravelでADRの実装をしたいと思います。 tech.arms-soft.co.jp Action Action:DomainとResponderの橋渡しを行う。Controllerとは異なり、「1つのクラスに対して、1アクショ…

角度が変わらない斜めの背景の作り方(CSS)

こんにちは、ナカムラです。 今回はCSSで角度が変わらない斜めの背景の作り方をご紹介します。 ウィンドウ幅いっぱいに、なおかつ斜めになっているデザインはよく使われます。 やり方はいろいろあると思いますが、今回はclip-pathを使ってみたいと思います。…

手軽に始めるAIコーディング!GitHub Copilotのススメ

こんにちは、コバヤシです。 前回に引き続き、今度は注目のGitHub Copilotに挑戦してみたいと思います。 GitHub Copilotとは GitHub Copilotは、GitHubとOpenAIが共同で開発したGPT技術を利用したコード補完ツールです。2021年から提供されており、開発者がG…

XDユーザーがFigmaを学ぶ 〜カラーマネジメントについて〜

こんにちは、ハヤマです。 今回は、Webデザインを目的とした視点で「Figmaのカラーマネジメント」について書いていきたいと思います。 Figmaのカラーマネジメント Webデザインを行うにあたって、取り扱うアプリケーションやツールがどこまでカラーマネジメン…

インライン要素の長文テキストの表示は大丈夫?box-decoration-breakを使って整えよう!

こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが(というより最近知ったのですが)、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間す…

HTMLタグ<details>でアコーディオンを作る(簡易版)

こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…

今注目のAI「GPT-4」を試す

こんにちは、コバヤシです。 今回は今話題になっているAI「GPT-4」について書きたいと思います。 GPT-4とは? GPT-4は、OpenAIが開発した最新の言語モデルで、GPT-3の後継となるものです。このモデルは、さらなる進化を遂げたことにより、自然な文章生成や質…

Fat Controllerから脱しよう!ADRについて学ぶ!

こんにちは!ドイです。 Laravelでの開発を始めて、3年が経ちました。 コードを書くことすら初めてだった私が、初めに覚えたのはMVCという概念でした。 開発を続けるうちに、小さな案件から大きな案件まで関わるようになり、少し困ったことが出てきました。 …

XDユーザーがFigmaを学ぶ 〜データの管理について〜

こんにちは、ハヤマです。 今回は、Figmaのデータ管理方法についてまとめていきたいと思います。 (Figmaに関するこれまでの記事はこちらをご覧ください) Figmaのデータ構造について Figmaのデータですが、XDとは異なる構造で管理をしています。 以下の図を…

忘れていると想定外の表示崩れが・・・長文テキスト対策について考えよう

こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲か…

iPhone Safariで入力エラーが起きた時に該当箇所へスクロールする

こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…

Web­Assemblyが気になったのでRustで試してみた

こんにちは、コバヤシです。 Web­Assemblyって知っていますか? 何かと目にする機会も多くなってきたので、今更感も強いですがRustを使ってWeb­Assemblyを試してみたいと思います。 Web­Assemblyとは WebAssemblyはWebブラウザーが実行できるバイナリー形式…

XDユーザーがFigmaを学ぶ 〜Frame(フレーム)とは〜

こんにちは、ハヤマです。 昨年AdobeがFigmaを買収し、これを機にFigmaの導入を検討されている方も多いのではと思います。 この記事では、もともと「XDユーザー」で、「これからFigmaへのシフトを考えている方」向けに、覚えておきたい点などをご紹介します…

AWSから請求が!?発覚から対処法まで!

AWS

こんにちは!ドイです。 先日参加した勉強会にて「AWSを利用していて、とんでもない額の請求がきた」という話を聞きました。 私自身、AWSを勉強しようとアカウントを作り、EC2を立ち上げ…とやってはいたものの、しばらく利用していないので他人事として聞い…

【フロントエンド初心者向け】なんでこんなところにリンク領域が?aタグの『見えないクリック領域』を暴け!

こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…

GSAPのタイムラインを必要なタイミングで動かす

こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…