Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事(MicroCMSと11tyで作るかんたん静的サイト)ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればGulpやWebpack等の選択肢もありましたが、Viteの設定が非常に簡便であるという噂を聞いたので試してみることにしました。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 各ツールの役割 MicroCMS:ヘッドレスCMS。コンテンツのデータを登録できる、APIを提供している。 11ty:ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターで、HTMLを出力することができる。複数のテンプレート形式に対応している
はじめに 静的サイトジェネレータをいろいろ調べているうちに 11ty というものを知り、1 度使ってみました。 その際、日本語ドキュメントが少なかったので公式ドキュメントを読んで学んだことをまとめます。 「よし!記事書くか!」となったところ何と 2 週間前にv2.0.0が登場したことを知り、もう一度ドキュメントを読む羽目になりました。 内容が間違っていないかできる限り確かめたつもりですが、間違いがあったらご指摘ください。 11ty とは シンプルな静的サイトジェネレータです。 古くて温もりのある Jekyll の代替というのがコンセプトっぽいです。 2023 年 2 月 26 日時点で Github のスター数は 13,285 個で、Jamstack な SSG の中では 15 番目に多いです。(1 位は Next.js の 97,399 個、因縁の Jekyll は 4 位で 45,69
毎日新しいWebデザインを手掛けていれば、レイアウトや構成が思い浮かばないことがあっても当然です。 そんなときは新しく公開された、話題になっている国内外のホームページを覗いて、次のデザインアイデアやヒントを手に入れましょう。 この記事では、ここ2か月くらいで公開されたデザインが際立つ最新ホームページ事例40個をまとめてご紹介します。 どのようにUIデザインテクニックを活用するのか分かる、目からウロコの事例を中心に集めています。 Webデザイン見本リスト こがしバターケーキ スクロールで袋に入ったこがしバターケーキが下へと移動するようなエフェクトは、その手があったかと思わせるユニークさ。使用されているキアロフォントもブランドイメージにぴったり。 採用サイト|株式会社 伊藤農園 | ページ全体に散りばめられた素敵な手描きイラストはもちろん、水平スクロール型コンテンツなど読みやすさも工夫されたデ
これまではCSSアニメーションで幅や高さのサイズを変更する時は、明示的なサイズ指定が必要でした。width: auto;やwidth: max-content;のようなキーワードではCSSアニメーションは機能しませんでしたが、CSSの新しい関数によって可能になります。 Chrome 129では、calc()に似た新しい関数calc-size()、width: auto;などのCSSアニメーションを可能にするinterpolate-sizeプロパティ、さらにbackdrop-filterプロパティの改善など、3つの機能もアップデートされました。 Web制作者は要チェックです! New in Chrome 129 Chrome 129 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
※本ページは、アフィリエイト広告を利用しています。 Adobe Expressはまだ使ってない、便利な使い方を知りたい、もっといろいろと活用したい、そんな人にお勧めのデザイン書を紹介します。 Adobe Expressは実はAdobeに登録(無料)するだけで無料で利用できます。無料版でも十分な機能を備えており、商用利用もOKです。Adobe CCユーザーにはAdobe Expressのプレミアム(有料版)が含まれています(参考:Adobe)。 著者はAdobe Community Expertでもある増田 幹男氏、農業するWebデザイナーとしても活躍されており、河童のアイコンを見たことがある人もいるかもしれません。本書ではそんな氏によるAdobeの新しいデザインツールAdobe Expressのさまざまなデザインにおける使い方、生成AIの活用術を学べます。
はじめに GitHubのリポジトリをみるという習慣はなかなか初心者の方だとないと思います。 しかし、世の中には参考になるリポジトリがたくさんあるので今回は厳選して紹介していきます。 エンジニア共通 エンジニアであれば共通的に参考になるリポジトリを紹介してきます。 How Web Works Googleで検索ワードをいれてエンターキーを押してから、実際にWebサイトが表示されるまでの裏側で行われていることを詳しく紹介してくれています。 developer-roadmap フロントエンド、バックエンド、フルスタックなど様々なエンジニアのロードマップが紹介されています。 最速で成長したいのであれば、その分野の専門家が教えてくれる学習手順で学ぶのが大切なのでとても重宝されているロードマップです。 free-programming-books 無料で見ることができるプログラミングを勉強する上で役立
2024年9月21日 話題のWeb関連情報 WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で最近人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね! ↑私が10年以上利用している会計ソフト! 1. 11月30日(土)鳥取県米子市で開催される「Life Hack Camp Vol.10」に登壇することになりました! 11月30日(土)鳥取県米子市で開催される「Life Hack Camp Vol.10」に登壇することになりました!https://t.co/Q2IVSJEIFt 「つながる、はじめる、考える チャレンジを楽しもう!」をテーマに、素敵なメンバーとともに語り尽くします!10月31日までは早割価格み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く