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
エンジニアがデザインについて確認した方が良いこと - Qiita
開発の流れとして、デザイン決定後にデザイン（Figma）が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像（SVG）なのか、ラスター画像（PNGなど）か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは
WEBエンジニアだけど1mmも確定申告が分からないので調べたのだ～～！
2月になると「確定申告の季節ですね～」と言うエンジニアがいるのだ。 ぼくも「そうですねー」と話をあわせるのだが 「確定申告」ってなんなのだあああああああ～～～～？ 実はぜんぜん知らないのだああああああああああああああ ･･･って内心は思ってるのだ。 そんなことではいけないと思い、確定申告について調べてみたのだ！ 確定申告とは？ 一言でいうと「私は今年これだけ稼ぎました！」と税務署に報告することを指すらしいのだ。 うん、それは知ってるのだ。 中学生のときに「国民は納税する義務があるよ」と教えられたのだ。 でも、具体的に いつ？ どれくらい稼いだら？ どうやって申告する？ 税金の仕組みってどうなってるの？ など詳しいことは教えられていない気がするのだ。 そこらへんを掘り下げていくのだ。 その前に：会社員は？ 会社員の場合は、源泉徴収（げんせんちょうしゅう）というやつのおかげで、確定申告をしなく
私が独学をして、マジ神だと思うサイトおよび他 - Qiita
初めに 私は独学でプログラミングその他について勉強をしていますが、基本的に知識を得るために金はかけません。調べれば何とかなるので。 私がプログラミングを始めるにあたって自分に投資したものは安いノートパソコンとマウスのみで合計金額は14600円（ノートパソコン14000円、マウス600円）ですね。 もちろんいいものはお金をかけなければ手に入りません。しかし、いいものというのはある程度のレベルにならなくては持っていても意味がほとんどないと思います。 実際にプログラミングの勉強を独学で始めると、なかなか教材を見つけることができず、え？こんないいサイトあったの！？もうちょっと早く見つけときゃあよかった！というものがめっちゃありましたので、これから独学でプログラミングの勉強をしたいという方に向けて、少しでもお役に立てたらと、紹介をしたいと思います。 というわけで、今回は私が感謝する神サイトおよびその
時計/タイマー/カウントダウンのコードスニペット8選。CSS/JSで作れるデザイン！ - Workship MAGAZINE(ワークシップマガジン)
Webサイト上に「時計」を表示するデザインは、一定の需要があります。 もとからデバイスの画面に時計は表示されていますが、それでもWebサイト上に時計が表示されると、つい目がいってしまいますよね。 時計の要素としてとくに需要があるのが、クイズやイベントなどに使われるカウントダウンです。カウントダウンの機能は、UXにおいて重要な役割を果たすことも。 今回は、時計やタイマー、カウントダウンなどの機能を取り入れられるコードスニペットを8選ご紹介します。 1. Vue.jsを使ったデジタル時計 最初にご紹介するのは、近代的なデザインのデジタル時計です。この時計はVue.jsを使って構築されています。 機能自体はベーシックですが、目をひくデザインに仕上がっていますね。 See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
2024年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2023年のWebアクセシビリティに関連する出来事を振り返りつつ、2024年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2の勧告とWCAG 2.1の更新 長らく待ちわびていたWCAG 2.2について、2023年10月5日付けでようやくW3C勧告（Recommendation）となりました（日本語訳はまだありません。詳細は後述の「臨時WGの活動状況」を参照）。また、これと連動する形でWCAG 2.1（日本語訳）の勧告も改めて発行されました。 今回のWCAG 2.1の更新では、達成基準4.1.1構文解析に注記が設けられています。これにより、WCAG 2.2で削除された達成基準4.1.1の扱いについて連続性が保たれるようになっています。WCAG 2.1からの変更点は、公
"クラフトインターネット"という古き良きウェブへの回帰運動に期待している。 - 世界のねじを巻くブログ
個人ブログのこれから 「古き良きインターネットを掘りおこす」を2024年の目標の一つにしていたので、新年はそういう記事を書いていこうと思っている。 ・・・とそんなこんなでネットをさまよっていると、 クラフトビールやクラフトコーラ、ナチュールワインと同じように あの"手作り感"をWebの世界でも再現しようとする流れが生まれつつあるを知った。 kakijiro.net どこまで強欲に繋がり続けるインターネット。懐古主義で過去を懐かしがっても仕方がないからこそ、囲まれすぎたシステムから一歩踏み出す姿勢が大事なんだろう。元々のインターネットを取り戻すことはできない。利害関係に距離を置いて、空虚なつながりに見切りをつけて、手の届く範囲で自分の信じる空間をつくる。これしかない。 好きにいじれる土地を確保した感覚に近いような気がする。平屋の一軒家。犬がおしっこうんこしても文句を言われない。災害時にトイレ
「コピペで使おう! ライブラリ」なるページを作ってみました - K.Maebashi's はてなブログ
私のWebサイトkmaebashi.comに、「コピペで使おう! ライブラリ」というページを作ってみました。 kmaebashi.com 能書きはリンク先に散々書いてあるので、ここではあまり繰り返しませんが(つまり一部は繰り返すのですが)、プログラマのお仕事が、コードを読んだり書いたりではなく、「ググってライブラリを見つけ、ググって使い方を調べ、エラーが出たらググって解決策を探す」になってしまっているのは悲しいと私は思っています。 世間に山ほどあるプログラムでも、たとえ車輪の再発明でも、コードを書くのは楽しいですし、本人の力になると思っています。私は趣味で書いたプログラム(のうち他人でも使いそうなもの)をここに公開していきますので、読んだ方は、コピペして使うもよしいじりたおすもよし、あるいはこれを参考にまったく別のプログラムを作るもよし、ご自由にお使いください。 まあなんだ、既存のフレーム
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
Webアーキテクチャで迷わないためのイリティ（-ility）のすゝめ - Qiita
はじめに こんにちは！NewsPicks、 Web Experience Unit のイイダユカコ (@becyn) です。 本記事は NewsPicks Advent Calendar 2023 の 25 日目の記事です。最終日の担当をキャッチしてしまいました。ハードルがやや上がっていることを感じますが、2023年もあと数日、優しい気持ちで読んでいただけると幸甚です。 (24日にコロナ＆インフルに同時感染してしまい、投稿が遅れました。お待たせして申し訳ありません。) イリティ (-ility) とは イリティ (-ility) というワードを目にしたことがあるでしょうか？プロダクト開発をしていると、可用性、信頼性、テスト容易性、スケーラビリティなどの単語をよく聞くと思います。これらを英語表現した時、Availability、Reliability、Testability、Scalabil
知識ゼロからプログラミング学習して1年経った今、改めてWeb技術について整理してみた - Qiita
はじめに タイトルの通り、知識ゼロの状態からプログラミング学習を始めて1年が経とうとしています。今まではプログラミングスクールに通い、なんとか個人開発アプリを作成することが出来ましたが、正直Web技術（HTTP,HTML,URI等）周りの知識はかなり曖昧なままなんとなくで進めて来てしまっていたので、今回このタイミングで軽く整理してみました。 学習として使用させていただいた書籍は「Webを支える技術」「Web技術の基本」です。今回はこちらを参考にさせていただいています。 そもそもWeb技術って？ インターネット上でウェブページやウェブアプリケーションを作成、表示、動作させるために使用される技術。 例えば… HTTP HTML URI などなど。１度アプリ開発をやってみているので、もちろん聞いたことがあります。 ただ、 「HTTPは通信プロトコル？みたいなやつでサーバー同士がやりとりするもの…
Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル） - Qiita
Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル）oracleWeb この記事は、 JPOUG Advent Calendar 2023 24日目の記事です。 23日目は multilayer さんの記事『OCIのLanding Zoneについて調べてみた！』でした。 想定読者 ファントムファイルについてよく知らない、帳票の扱い方をあまり考えたことがない人 イントロダクション 皆さん、世の中のWebシステムで利用される画像や帳票ファイルがどこに保存されているかご存知でしょうか？ 帳票や大きな画像ファイルなどを扱う際、大きく分けて２つの設計方針があります。 ・DBに直接保存する ・DB外部に保存し、パスなどをDBに保存する オライリーのSQLアンチパターンの、”ファントムファイル”という章にはこのあたりのことが書いています。 [Amaz
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DNSでHTTPS ※ただしDNS over HTTPSではない
Web API 学習ロードマップ 2024 / Web API Learning Roadmap 2024
