ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
前書き 5か月ほど前にQiitaに登録し、それから登下校中や休憩時間など、空いた時間は基本Qiitaを見るようになりました。 ストックした記事が106、LGTMした記事が12ページ分にもなり、記事の整理もかねて、特に好きな記事や理解が深まった記事などを振り返りつつまとめようと思います。 無言で記事を掲載しております。迷惑だったら申し訳ありません。 が、随時更新予定です。 追記(2022/10/18) Twitterにておすすめの記事を紹介していただきました！ 今後もそういった機会があることを信じて、ほかの方にオススメされた記事を紹介する枠を設けます。 誰に向けて Qiita触りたての人 プログラミング始めたての人 自分自身 最初に見ておくべき記事 最初の頃は数学と同じように変数を決めていたため、aやbとしていたが、この記事を見て驚愕した（笑） リーダブルコードを読むきっかけとなった記事。
リンク www.univcoop.or.jp 自立とは「依存先を増やすこと」｜全国大学生活協同組合連合会(全国大学生協連) 全国大学生活協同組合連合会(全国大学生協連)のホームページ。大学生協の組織や事業、活動の紹介や、充実した大学生活を送るためのアドバイスなどを掲載しています。 11 users 957 リンク Wikipedia 熊谷晋一郎 熊谷 晋一郎（くまがや しんいちろう、1977年（昭和52年）- ）は、日本の医師、科学者。専門は小児科学、当事者研究。博士（学術）（2014年、東京大学）。東京大学先端科学技術研究センター准教授。「ちいさい・おおきい・よわい・つよい」編集長。山口県出身。 山口県新南陽市生まれ。新生児仮死の後遺症で脳性麻痺となり、車椅子生活を送る。小学校・中学校と普通学校で統合教育を経験し、山口県立徳山高等学校、東京大学医学部医学科を卒業。小児科医として病院勤務を
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
Gitでよく使用するコマンドをGIFアニメで解説
Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 🌳🚀 CS Visualized: Useful Git Commands by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Gitのマージ（fast-forward, no-fast-forward） Gitのリベース（rebase） Gitのリセット（reset, revert） Gitのチェリーピック（cherry-pick） Gitのフェッチ（fetch） Gitのプル（pull） Gitのリフログ（re
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
未経験から1ヶ月でWeb系企業に就職する勉強法
取り上げた技術は、本格的な開発でも役に立つもので、最も学習コストが低いものを選んだ。 重要度が低いものは載せていない。たとえばHTMLとCSSなんてググりながら書けば全く問題ない。Bootstrapなどのフレームワークも全くやる必要はなく、仮に就職先で使っていたら覚えればいい。 逆に言えば以下に挙げる技術は、そもそも概念自体がプログラミングにとって普遍的なものであり、（基礎的な部分を）調べながら使うようではエンジニア失格ということ。 基本的に現在では、バックエンド・フロントエンド・運用保守全てができないエンジニアに価値は無い。 以下に挙げた技術（①⑤⑥は他の言語やフレームワークで代替可能）が身に付いていなければまともな企業に就職することは難しい（もちろん、下らない業務システムを下請けで作ってる底辺企業には入れるだろうが）。 経験者でも、これらができない/わからないのは、相当恥ずかしいことだ
こちらの記事は随時追加更新していきます 記事の内容 何かと話題のChatGPTですが、今回はこのChatGPTをプログラミング学習として活用し、 「最強の学習ツール」にしてしまおうという記事になります。 内容を書き換えれば、英語学習などにも置き換えることができます。 筆者の関連記事 ChatGPTはそのチャット内で質問した内容を記憶しそれによって回答が異なるケースがあります。 もし、意図した回答が得られない場合などは「New chat」から新たに質問するなどの工夫が必要です。 そして、ChatGPTからの回答内容はあくまでも一つの例であるという認識で向き合いましょう。 アジェンダ 登録方法 質問のコツについて ロードマップ(カリキュラム)を提案してもらう ふんわりとした内容を具体的にしていく 更に深掘りして手順を教えてもらう 「何がわからないかわからない」状態をなくしていく 次のレベルアッ
こんにちは。masakichiです。 わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。 そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。 ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。 なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。 The Coding Train 所感 スネークゲームやパズルゲームなどクリエイティブなチュートリアルがたくさんあるチャンネルです。運営者が教育の仕事もしているようなので、説明がわかりやすいと思いました。また、語学学校の先生みたいなノリで喋るので、聞き取りやすく親しみを感じることができると思います。 技術範囲 p5
エンジニア向けチートシート集 - Qiita
はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい人 コードを書くテクニックを知りたい人 VsCodeチートシート はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。 VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカット
新規Webサービスを独りで開発・運用する際に立ちはだかった壁とそれを乗り越えた方法まとめ【個人開発】 - Qiita
その1. そもそもアイデアが思い浮かばない 遭遇確率 ：★★★★☆ どんな壁？：いざWebサービスを作ろうとしても何もアイデアが思い浮かばない 解決策：身近な課題をひたすら探す サービスを作る上では何かを解決する系のアイデアであり、かつ自分が当事者であるとモチベーションも続きやすいです。 自分が普段ネットを使っていて不便だと思うこと、今使っているサービスの不満点、などなんでも良いのでとりあえず書き出してみましょう。 大体この中に自分の技術力でも解決できるような課題が存在します。 もし自分の中での課題が見つからないという場合は、日々Twitterのタイムラインで流れてくる身近な人が抱えている課題をピックアップしてアイデア化するのもありです。 回避策：しょぼいアイデアでも日々書き残していく いざサービスを作るというときにアイデアも出ないし身近な課題すら見つからない場合は、普段からアイデアを無理
プログラミングスクール生へ、採用の現場より
こんにちは。 プログラミングスクールに通う方や、スクールそのものの在り方について増田やはてブで度々話題に上がるけど、 現役エンジニアの諸先輩方ではなく、いち採用側の目線で少しメッセージを残しておきたい。 （ここでいうエンジニアとは主にwebやアプリにおけるソフトウェアエンジニアを指します。わかったかはてなー！） ■前提自分は非エンジニアだよ HTML、CSS、JSの基礎は習得し、WordPressを使いイチからDockerを駆使して開発環境の立ち上げや、GitおよびGithubでのRepo管理やcommit、本番サーバーで運用できる程度の知識人事職は2年目 本業は別で、社内で掛け持ちしている形なのでプロではないよ書類選考〜早い段階での面接がメイン、書類だけなら職能関わらず4000人程度に目を通したよプログラミングスクールそのものの是非は語らないよ 7期目を迎えた中小IT企業だよ 弊社エンジ
2021年10月25日、この日は僕がただの大学生から、大学のサーバーをダウンさせた"犯人"へと変わった日です。 小説みたいな書き出しをしてみましたが、これは嘘みたいな本当の話で、ふと思い出して懐かしくなったので回想録として note に残すことにしました。 出来事の概要2年前の2021年10月、何が起きたかを簡単に書くと以下の通りです。 ・大学の授業や課題を管理するためのシステムを拡張するツールを作った ・ツールが予想以上の人数に使われ、結果として大学のサーバーに負荷がかかりサーバーが落ちる事態になった ・大学から呼び出しを受けることになった 時系列を追って、この note で出来事の全容を書きたいと思います。 使いづらい LMSまず前提として、私の大学では毎日の授業や課題は授業支援システム、通称 LMS と呼ばれるオンラインのシステムで管理されています。 実際のLMSの画面しかし、この
今回は、Corey Haines（@coreyhainesco）氏の「How I launched a profitable job board with no-code tools in 3 weeks」という記事を、本人の許諾を得て翻訳・掲載しています。 およそ12,000字の長い記事なので、かんたんに内容をまとめると下記のようになります。 翻訳元記事の筆者はスタートアップでマーケティングを本業としている。 自身の経験から、マーケター専用求人サイトに需要を見出し、開発に着手。 非エンジニアでコードは書けないので、ノーコードツールを駆使して開発。 持ち前のマーケティング力でサイトを成長させる（Product HuntやTwitterで初期ユーザーを獲得し、SEOやメーリングリストで継続的成長）。 具体的な金額は非公開だが、一定の収入源にはなっている。 いわゆる個人開発のお話になります。翻
文字コード再入門 ─ Unicodeでのサロゲートペア、結合文字、正規化、書記素クラスタを理解しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
文字コード再入門 ─ Unicodeでのサロゲートペア、結合文字、正規化、書記素クラスタを理解しよう！ 文字コードには、どのような種類があり、それぞれどのような意味を持つのか、といった、文字コードの基本的な概念、従来の文字コードを紹介し、現在のUnicodeの構成を概説し、プログラミングにおいて注意すべき箇所をいくつか取り上げます。 ソフトウェア開発に携わる方の多くは、何らかの形で文字コードに触れることがあるでしょう。文字や記号をコンピュータ上でデータとして扱うには、文字コードの知識が必要不可欠です。 本稿では、書籍『プログラマのための文字コード技術入門』の著者である矢野啓介さんが、知っておきたい基礎知識を分かりやすく解説します。 文字コードとは？ Unicode以前の文字コード Unicodeとその主な符号化形式 UTF-16 UTF-32 UTF-8 Webで文字コードを指定する仕組み
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
経験年数に応じて一般的に求められるスキルが身についてないままソフトウェアエンジニアとして生きている(いた)ことのつらみ｜ぱん
※以下、ソフトウェアエンジニアをエンジニアと省略して書いていることがあります。 プログラミングを仕事にしてから9年だ。いちおう9年ということになる。知り合ったばかりの人に「プログラミング歴何年ですか？」「プログラマー・エンジニアになってから何年ですか？」と聞かれたらこう答えざるを得ない。そしてそう答えると、「え、9年…！ベテランですね…！」と言われる。企業の採用担当（エンジニアの詳しいスキルを測ることがあまり得意ではないと思われる人が多い）からもおそらくそういう目で見られているのだろう。「豊富なスキルをお持ちの方とお見受けいたします。弊社のテックリード/リードエンジニアポジションはいかがですか」みたいな全くマッチしていないスカウトメールが時々来る（だいたいベンチャーで、色んな人に送っているんだろうとは思うけど）。ほんとうにつらい。なぜならわたしのスキルは、周囲にいる他のエンジニアと比較する
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
プログラミング初心者がゲーム感覚で楽しく学べる無料サービス16選｜苦しんでプログラミングを学んだ柴犬（くるしば）
こんにちは。 苦しんでプログラミングを学んだ柴犬こと、「くるしば」と申します。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業、経営したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに10000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — くるしば | 読めば10倍効率が上がるプログラミング学習の教科書 (@shiba_program) September 13, 2022 技術書、Webサービス、QiitaやzennのWeb記事など、最近は本当にプログラミングを学習できるコン
はてなブログのキャッシュ周りをきちんと改善したら、アプリケーションサーバの台数を半分にできた話 - Hatena Developer Blog
はてなブログでSREをやっているid:cohalzです。 2019年12月頃からid:utgwkkやid:onkとともに、はてなブログにおけるキャッシュ周りの改善を行いました。その結果、次のような成果が得られました。 ブログ記事のキャッシュヒット率が、1日平均で8％から58％に向上 アプリケーションサーバの台数を、以前の半数以下に削減 DBに届くリクエスト数が、以前の3分の2まで減少 レスポンスタイムの平均が、以前の8割まで減少 この記事では、実際にどういった改善を行ったのか、その際に気をつけたことや大変だったことを紹介します。 はてなブログがVarnishを導入した経緯と課題 開発合宿をきっかけに問題が明らかになる 進め方をまず考える ホストのメモリをできるだけたくさん利用する メモリを積んだホストでなぜかレイテンシが悪化 キャッシュが分散しないようVaryヘッダを使う デバイス情報を適
Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
※2021年 3月28日 更新※ たくさんの方にご一読いただき、ありがとうございます。お読みいただいた方からご指摘を賜った点をもとに記事を修正いたしました。修正・追記箇所は末尾をご確認ください。 サーバ周りの仕組みについて、初心者でも最低限知っておくべきだと感じた内容を整理しています。 ここでいう「最低限」とは、プログラミング言語を勉強し、何かしらアプリケーションを作成して、ユーザが利用可能な状態にし（デプロイ）、公開するうえで必要になる知識のことです。 「サーバ」とは何か ユーザの要求（リクエスト）に応じて、サービスを提供（レスポンス）するコンピュータやプログラムのことを「サーバ」と言います。 例えば、ユーザが「このWebページを閲覧したい」とリクエストしたら、サーバはそのWebページの表示に必要な処理を実行し、ユーザに返します。これによってユーザが使用しているブラウザに、Webページが
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
普通のコードエディタに見えて実は壮大なゲーム(MMORPG)画面の「CyberCode Online」で遊んでみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、どこからどう見てもごく普通のコードエディタに見えて、実はマルチプレイ可能なMMORPGというジャンルのゲームが遊べるちょっと変わったWebサービスをご紹介します。 見た目はVisual Studio Code風の画面レイアウトなのですが、本格的なテキストベースのMMORPGになっていて、友人・知人と一緒に敵と戦いながらプレイヤーを成長させていくことができます。 第三者から見るとゲームで遊んでいるとは思われないのも1つの特徴になっています。 【 CyberCode Online 】 ■「CyberCode Online」の遊び方 それでは、最初に「CyberCode Online」をどのように遊ぶのか詳しく見ていきましょう！ サイトにアクセスすると、ごく普通のコードエディタが表示されるのですが、プログラムをよく見るとsignUp()関数が
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ほぼ毎日Qiitaを２時間見る私が、特に好きな記事をまとめてみた - Qiita
「自立とは”依存先を増やすこと”」障害を持つ東大の先生の言葉に反響「依存しないことではなく、多くのものに浅く依存すること」
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
2022年におけるフロントエンド開発のベースライン
2022年のモダンCSS改
丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
XMLHttpRequest とはなんだったのか | blog.jxck.io
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
ChatGPTを最強の学習ツールにする方法 - Qiita
【絶対に観るべき】英語のYoutubeチャンネル集【プログラミング】 - Qiita
僕の自作ツールが大学のサーバーをダウンさせてしまった日の話｜くりきん
【翻訳】コードは書けないけど、1人で作ったwebサービスを収益化した話 - Qiita
DNP、読む速度を約2倍にする自動レイアウト技術
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
文章を読むスピードが最大2倍。「読書アシスト」無償公開
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
無料で「Photoshop」「Illustrator」「WordPress」などWebデザインが学び放題に！／事業譲渡に伴い有料会員サービスを終了した学習サイト「chot.design」の全レッスンが無料公開
面白Web API 100連発 - pastak-pub
2024年に最適なfont-familyの書き方 - ICS MEDIA
【図解】初心者が知っておきたいサーバ周りの仕組みの話 - Qiita
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
Sign-in form best practices | Articles | web.dev
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.