HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin
Web標準のバックエンドアプリのテスト
ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby
SPA(Single Page Application)について勉強したことをまとめました - Qiita
この記事のきっかけ 最近、Vueを触る機会が増えてきたのですが、どうやって表示されているのか気になったので勉強したことをまとめてみました！SPAと呼ばれるアプリケーションは、どのように表示されているのでしょうか。 そもそもSPAって何？ SPAは、Single-Page Applicationの略で、和訳は「単一ページのアプリケーション」といったところでしょうか。「単一のページってなんだ？」と思うかもしれませんが、これは単純に「HTMLファイルが一つしかない」ということを示しています。 では、HTMLファイルが複数個ある構成のアプリケーションはなんと呼ぶでしょうか。答えはシンプルで、単一を複数に変えるだけです。Multi-Page Applicationと呼ばれています。 HTMLファイルが一つの場合は、SPA。複数ある場合は、Multi-Page Application（MPA）と分類し
Web系エンジニア最低限入れておくべき Chrome 拡張機能３選 - Qiita
概要 Web ブラウザではすっかりお馴染みの Google Chrome ですが、開発者ツール（DevTools）だけでなく、拡張機能にも導入すると非常に便利なものがたくさんあります。 その中でも、Web系の開発をするエンジニアなら、是非入れておきたいオススメの Google Chrome 拡張機能について紹介します。 尚、いずれも無料で利用可能です。 IT エンジニア界隈では、既にどれも有名なものばかりですが、これから Web 系の開発をする方は是非お試しください。 本当はもっとたくさんオススメしたい拡張機能がありますが、ひとまず今回は３つ紹介します。 Wappalyzer（ワッパライザー） 「Wappalyzer（ワッパライザー）」は、現在表示している Web ページで使われている技術（言語、フレームワーク、プラットフォーム、分析ツール、その他のサービス）を一覧表示してくれる拡張機能で
駆け出しWebエンジニアへ勧める〜人気フレームワーク4選〜 - Qiita
はじめに 就職や転職を考えているWebエンジニアのみなさん、どんなことを勉強していますか。プログラミング言語を勉強した後の悩みといえば、どのフレームワークを使用すれば良いかではないでしょうか。フレームワークの選択はキャリアに影響する大切なポイントです。そこで今回は、フロントエンドとバックエンド開発などで需要が高いフレームワークを4つピックアップしました。それぞれのフレームワークの特徴などを解説していきます。あなたのスキルアップの参考にしてみてください。 フロントエンドで人気なフレームワーク 1. React ReactはFacebookが開発したJavaScriptのライブラリで、ウェブのフロントエンド開発で広く使われています。動的なWebアプリケーションを手軽に作ることができるため、特に人気のあるフレームワークの一つです。Reactは他のライブラリやフレームワークに比べて学習が難しいとさ
エンジニアのための勤怠時間管理システムをWebアプリケーションで開発しました - Qiita
3. 所感 3.1 実装するにあたって 3.2 工夫したこと プロジェクトのフロントエンドでは、Next.jsとTypeScriptを活用しました。特に、ページ間の遷移をスムーズにするために、Next.jsの動的なルーティングを活用しました。また、ユーザビリティの高いUIコンポーネントの作成に特に注力しました。ユーザーが直感的に操作できるデザインを目指し、UIコンポーネントを一貫性のあるスタイルで設計しました。さらに、コンポーネントの再利用性を高めるため、Reactのコンポーネントライブラリを活用し、共通のUI要素を効率的に管理しました。特に、フォームやナビゲーションバーなど頻繁に使用するコンポーネントについては、使いやすさと視覚的な一貫性を維持することを意識して設計しました。 これらの取り組みにより、ユーザー体験が向上し、アプリケーション全体の使い勝手が向上しました。また、開発効率も向上
「プロになるためのweb技術入門」要点まとめ - Qiita
はじめに 今回は「プロになるためのweb技術入門」という書籍についてざっとまとめていきます。 0. 「webアプリケーション開発はどう学んでいくべきか」 webアプリケーション開発の難しさ webアプリケーションというシステムの「歴史の新しさ」と「必要な知識の広さ」 技術の移り変わりがはやく体系的に学ぶのが難しい →書籍や記事、現場を通じて少しずつ身につけていくしかない現状 ではどう学んでいくべきか その技術が使われるようになった歴史や背景を知ることでどのように利用すれば良いかわかる 今までの背景を理解しておくことで、新しい技術が登場したとしても素早くその技術を理解できるようになる →その技術が「なぜ生まれたのか」「なぜ必要なのか」を自分で考えながら学習していく！ 1. 「そもそもwebアプリケーションとは何か」 webアプリケーションの主な特徴 1. 主な処理は、手元のPCではなくサーバ
Webエンジニアの学習ロードマップが知れるサイト - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 はじめに 「Webエンジニアを目指したいが、何から手をつけていいか分からない」 「いろんな人が学習ロードマップの情報提供をしているが、どれに手をつけるか判断に迷う」 こんな悩みを抱えている方の一助になれば幸いです...！ 結論 こちらのサイトになります。 自分が学習したい分野を選択すると、その分野のロードマップが書かれています。 最近では「言語専用」のロードマップも書かれているため、かなり充実したサイトになってきた印象です。 それでは、試しに「Backend」のロードマップを見てみましょう。 学習ロードマップ｜Backend こんな感じです。 黄色塗りのフォームが「仕組み」や「概念」が書かれたもので必ずチェックしたい内容になります
Webサイトのパフォーマンスを簡単に確認する方法 - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 タイトルに対する結論 Chrome DevToolsの項目にある 「Lighthouse」 を活用しましょう。 Lighthouseとは ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。 デジタル庁のサイトを使って確認してみる テキストだとイメージしづらいため、早速サイトを見ながら確認してみましょう。 確認手順 1. 対象サイトを開いた状態で「Chrome DevTools」を開く 画面上に「Chrome DevTools」が表示されます
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
1人日で出来るWebパフォーマンス改善入門 - Qiita
はじめに こんにちは、株式会社HRBrainでデザインエンジニアをしている @Mozu1206 です。 Webパフォーマンス改善。なんとも面倒くさそうな響きですよね。 「やり方もよく分からないし、一旦置いておこう…」 と思ってるそこのあなた！ この記事では、そんなあなたに向けたサクッと1人日で出来る、効果が期待できるパフォーマンス改善策をいくつか紹介します！ 具体的な方法をステップごとにご説明しますので、ぜひ参考にしてみてください！ 1人日で出来るWebパフォーマンス改善 1. 画像を圧縮する 画像ファイルは、Webサイトの読み込み時間を大きく左右する要素の一つです。画像を圧縮することで、ファイルサイズを小さくし、読み込み時間を短縮できます。 ImageMagickなどのツールで圧縮する: ImageMagickなどのツールを使って画像を圧縮することで、品質を保ちながらファイルサイズを削減
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
【登竜門Hack関西-Web講座】超初心者向け！たった4時間でやってみるWebフルスタック - Qiita
[外部公開にあたって] この記事は初学者向けに短時間でツール群や概念を説明するために、意図的に言葉の解像度を落としたり、誇張した表現を行なっている箇所があります 講師自己紹介 Yuma-Satake 名前：佐竹友真 所属：名古屋工学院専門学校(3年)・Matsuriba・NKC-UG・TechUni 領域：Webフロントエンド 趣味：車・旅行 Twitter：Yuma-Satake | Matsuriba代表🏮 受賞歴（講師なんて、こんなもんなんぼ書いてあってもええですからねぇ） 技育CAMP Vol.10（入賞） 技育CAMP Vol.11（入賞） 関西ビギナーズハッカソン（最優秀賞） 技育CAMPアドバンス Vol.1 （大賞） カラビナハッカソン （カラビナ賞受賞） マイナポータルハッカソン （本戦出場） 技育CAMP Vol.5（最優秀賞） 名古屋Web3ハッカソン（4冠） 技育
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
エンジニアに必要な「Web技術」を学ぶための書籍ロードマップ - Qiita
はじめに ◆この記事は何？ 「Web技術を学ぶための書籍」を紹介する記事 ◆対象は？ Web技術/Webアプリケーション開発を学びたいエンジニア ◆この記事のねらい Web技術を学ぶときのロードマップになれば幸いです 先に結論 ①「イラスト図解式 この一冊で全部わかるWeb技術の基本」 「イラスト図解式 この一冊で全部わかるWeb技術の基本」 Web技術の入門としておすすめです。 特に新卒エンジニアにおすすめできる本です。 ◆この本の良いところ HTTPの解説が他の入門書よりも詳しい、そしてわかりやすい 細かいところまで図解されており、データやコードで理解できる ネットワーク、データ形式、アプリ、システム、セキュリティと網羅性が高い 他の入門書 「図解まるわかり Web技術のしくみ」 「図解即戦力 Web技術がこれ1冊でしっかりわかる教科書」 ②「プロになるためのWeb技術入門」 「プロに
Web開発の基本概念-3層アーキテクチャについて - Qiita
この記事はweb開発をするにあたっての3層アーキテクチャについて記述する．さらに例示としてPythonフレームワークであるDjangoとJavaのフレームワークであるSpring Frameworkと3層アーキテクチャの関係性についても記載する． 3層アーキテクチャとは 3層アーキテクチャとは，アプリケーションの構造を以下の層に分離することを指す． クライアントサイド ユーザーインターフェース(UI)を提供するサイド．ユーザーの入力を受け取り、プレゼンテーション層(WEBサーバ)にHTTPリクエストを送信する．また，プレゼンテーション層(WEBサーバ)からのHTTPレスポンスを受け取り，結果を表示する． サーバーサイド プレゼンテーション層 クライアントからのHTTPリクエストを受け取る．HTTPリクエストを処理し，アプリケーション層に処理を委譲する．アプリケーション層からの結果を受け取り
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
IISへデプロイする方法について（ASP.NET） - Qiita
やりたいこと ASP.NETで開発したWebアプリケーションをデプロイしたい。 Visual Studio上からアプリを発行する 発行先（デプロイ先）のフォルダを作成します。 画像では、Cドライブ直下に、新しくDSというフォルダを作成しています。DSは、"Demo Site"の頭文字から取ってきています。 アプリケーションを右クリックし、発行を行います。 公開先となる場所を選択します。 画像では、フォルダーを選択しています。 先ほど作成したフォルダーを選択し、完了します。 公開先となるフォルダーの変更は後から変更することも可能になります。 構成を"Release"に変更して、保存をします。 設定が完了したら、"発行"をクリックします。 発行が完了すると、出力に公開された旨が表示されます。 フォルダを確認すると、発行したアプリケーションのファイルが出力されます。 IISで初期設定をする Wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
