令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/13 1152 users HTML 令和 JavaScript 書き方まとめ

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コ... 続きを読む

CSS Stock｜Webデザインを楽にするCSSコピペサイト

2023/05/27 568 users コーディング webデザイン 順次 HTML パーツ

当サイトについて 「CSS Stock」はWeb制作の「これが欲しい」を叶える、をテーマにHTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。 あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。 ちなみに新しいスニペットを順次... 続きを読む

ハーバード大学のコンピューターサイエンスの講義（日本語版）が無料公開されている件「聞き取りやすいから英語も勉強できる」

2023/01/01 1096 users コンピューターサイエンス ハーバード大学 講義 英語 日本語版

🎍QDくん🎍Python x 機械学習 x 金融工学 @developer_quant ハーバード大学のコンピューターサイエンス入門講義は日本語版が無料公開されている cs50.jp ・講義動画は日本語字幕付き ・講義ノートも日本語訳あり ・C言語 ・配列 ・アルゴリズム ・メモリ ・データ構造 ・Python ・SQL ・HTML, CSS, JavaScript ・Flask ... 続きを読む

【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集 - PhotoshopVIP

2022/07/15 551 users Twitter PhotoshopVIP NIKE テスラ

AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサ... 続きを読む

Python だけで作る Web アプリケーション(フロントエンド編)

2022/05/29 604 users Python アプリケーション HTML フロントエンド編

Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

2022/01/27 576 users グラデーション 美しいグラデーション 中央 解説 現象

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む

CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users コリス ビューポート コンポーネント アニメーション 進化

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

2021/03/22 602 users コリス table フレームワーク アクセシブル グラフ

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む

2021年、HTMLやCSSやJavaScriptなどのコードを書く時に便利なVS Codeの機能拡張のまとめ | コリス

2021/03/04 524 users コリス デベロッパー HTML VS Code コミュニティ

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるコミュニティによって作成された機能拡張の巨大なライブララリがあることです。 その中から、...記事の続きを読む 続きを読む

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users UIコンポーネント スニペット ナビゲーション レイアウト

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

Obsidianは最高のマークダウン『メモ』アプリである

2021/01/05 658 users 見出し 下書き 役目 マークダウンエディタ PDF

僕は今までマークダウンエディタを資料作成ツールとして使ってきました。見出しやリスト、表を簡単に記述でき、それをCSSで整形して表示できるマークダウン記法は、ブログの下書きや業務で使うPDFなど、「他人に見せるための資料を作る」という役目にピッタリです。 逆に言えば、個人的なメモには向いていないと思ってい... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング コリス HTML 実装時 JavaScript

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

2019/09/04 520 users hooks React Grid 教材 あっという間

id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私... 続きを読む

実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方 | コリス

2019/07/23 779 users コリス 一昔前 コード JavaScript かなり

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog... 続きを読む

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス

2019/05/16 591 users 実装 Webクリエイターボックス CSS小技集 コード 進化

2019年5月17日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ... 続きを読む

CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響 | コリス

2019/04/11 512 users 実装 テクニック セレクタ コリス プロパティ

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したもので... 続きを読む

すごく分かりやすい！CSSのセレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet | コリス

2019/04/05 585 users セレクタ コリス くら チートシート PDF

CSSのセレクタがいまいち、という人にお勧めです！ セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。 このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくら...記事の続きを読む 続きを読む

CSSのセレクタチートシート | webliker

2019/02/07 771 users セレクタ CSSセレクタ チートシート コード あなた

CSSセレクタのチートシート CSSのセレクタのチートシートです。コードはコピペできるようになっています。詳しいコードの使い方は「あなたはいくつ知ってる？CSSのセレクタ40個を総まとめ」をご覧ください。 続きを読む

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ | コリス

2018/08/06 524 users 指針 コリス HTML React.js ロードマップ

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 基礎知識（HTML, CSS, JavaScript）、制作者として必要な...記事の続きを読む 続きを読む

びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール | コリス

2018/04/20 848 users コリス Bootstrap 積み木 HTML デスクトップ

さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala ... 続きを読む

「フロントエンド開発者」の終焉 | キャリア・働き方 | POSTD

2018/01/18 591 users HTML 著者 職業 POSTD 答え

元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれた... 続きを読む

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】 | eureka tech blog

2017/12/13 3803 users フェードイン 挙動 HTML 最強 全力

エウレカのPairsグローバル事業部エンジニアの山内です。 この記事は、eureka Advent Calendar 2017 13日目の記事です。 昨日は新卒エンジニア鈴木康文さんの「 Goのフレームワーク“Revel”を触ってみた 」でした。 これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。 # 前置き 最近、HTML要素をフェードイン/フェードアウトする実装をし... 続きを読む

もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita

2017/11/20 1121 users Photoshop プロパティ 融通 カタカナ Qiita

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと... 続きを読む

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ | HTML5Experts.jp

2017/10/26 824 users CSSグリッドレイアウト HTML5Experts.jp

連載： HTML5 Conference 2017特集 (9) こんにちは、編集長の白石です。 この記事は、9月24日に開催された HTML5 Conference 2017 に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を... 続きを読む

5000兆円欲しい！.css

2017/07/20 949 users ５０００兆円

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write ... 続きを読む