Tailwind CSS 3.0 alpha1〜2の注目の新機能（５選！）をご紹介！ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。 2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう！ でした。 4日目は「Y.S」さんが DenoのFFIでMySQLに接続する の記事を書かれる予定です。 はじめに Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。 今回は、その中からよく使われそうな 注目の新機能を５つ厳選して、ご紹介しようと思います。 最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。 Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。 🤞🥵 pic.twitter.com/f700zq04wh— Adam Wathan
駆け出しフロントエンドエンジニアは何を学ぶべきか - RAKUS Developers Blog | ラクス エンジニアブログ
目次 はじめに スキルマップ HTML CSS JavaScript SPA（Single Page Application） JavaScriptフレームワーク パッケージ管理 TypeScript Git Linux Web知識 テスト ブラウザ コーディングルール Docker（必須ではないが知っておくと良い） 情報収集に使えるWebサイト（おまけ） まとめ おわりに はじめに こんにちは、フロントエンドチームの北嶋です。 弊社でフロントエンドチームを立ち上げてから1年以上が経ち、少しずつメンバーも増えてきました。 最近は来年度の新卒メンバーに対する育成プランを考えているのですが、昨今のフロントエンド技術は移り変わりも激しく、学ぶべき項目が多岐に渡っているため、育成プランを考えるのも一苦労です。 ネットでフロントエンド関連の情報を調べると、今では参考にならない古めの記事も多いですし「
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
皆さんおはこんばんにちは。ぐーどらです。今更しれっと書きますが、先日の7/27（土）に技書博の1日スタッフやっておりました。 gishohaku.dev 1日スタッフ目線ですが、一般参加者やサークルさんにとってとても安心感のあるイベントだったと思います。第二回も開催決定しているので、またスタッフとして参加させていただこうと思っています。 あともう一つ、Builderscon最高でしたね。スピーカーの方、スタッフの方やスポンサー企業様、参加者の皆さん本当にありがとうございました。 転職エントリー ガラッと話題は変わりますが、転職活動を本格的に始めます。 今回の記事は自分の整理した考えを書き、自分と会ってくださる採用担当の方やエンジニアの方とのギャップを埋めるために書いていきたいと思います。 自己紹介 2019年1月に異業種からエンジニアへ転職しました。前職では派遣でコールセンターの業務をやっ
輝く板モンスター🍯🧸 @mactogame @kakkokari_gtyih マジですか…CSS3にアニメーションプロパティがあるのは知ってましたがこんなことまでできるとは… 知ったかぶりをしてしまい申し訳ないです 2021-01-04 21:24:23
最近 Chrome で Google 検索から検索結果に移動すると 結果に該当する部分が黄色でハイライトされて表示されます。 （ 上記は Wikipedia のページを開いた例です。 ） これが何か気になったので調べてみました。 Scroll To Text Fragment これは Scroll To Text Fragment あるいは Text Fragments と呼ばれる機能です。 Chrome 80 以降、デフォルトで有効になっています。 URL を開いた場合、ページの先頭が移動するのが一般的ですが ページの特定部分に誘導したい場合があります。 今までは id が付いている html 要素にしかリンクを貼れませんでしたが この機能の追加によりユーザが任意の場所にリンクを貼れるようになります。 将来的にはテキストを選択したあとにその部分へのリンクを作成するなどの機能も追加したいみ
画像フォーマットWebP（ウェッピー）について詳しく調べてみた｜WebP編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WebPとは WebPとは、Googleが新しく作った画像フォーマットのことです！ 画像は sample.png のように、拡張子でフォーマットが指定されていますよね。同じように、WebP画像も sample.webp のような形で保存されます。 ちなみに、読み方はウェッピーです。 また、Wikipediaには、 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 引用元：Wikipedia と書いてあります。非可逆圧縮でもアルファチャンネルを扱えるということは、透過した画像もWebPとして書き出すことができるということです。 WebPの歴史 次世代フォーマットともいわれるWebPですが、なん
検出 - インデックス未登録とは、Googleサーチコンソールに表示されるステータスの一つで、Googleが、ホームページにあるページのURLを知っているけれども、内容を見る前に、何かしらの不具合が発生したページになります。 当社の制作実績では、検出 - インデックス未登録が多いホームページはありませんが、Twitterを見ると、自分でホームページを制作している場合は、結構な頻度で発生しているようです。 当ページでは、検出 - インデックス未登録とは何かや、確認法、改善法、間違えた対策法を紹介します。 検出 - インデックス未登録とは 検出 - インデックス未登録とは、Googleサーチコンソールに表示されるステータスの1つで、GoogleがURLを知っているページだけれども、内容を見る前に、何かしらの問題が発生してしまい、見るのを辞めたページのことを言います。 検出 - インデックス未登
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている対応と今後 感想 三行 かねてから jQuery には拡張した CSS セレクタとして :has() がある :has() Selector | jQuery API Documentation Safari 15.4 と Chrome 105 で CSS セレクタとして :has() が実装された :has() pseudo class - Chrome Platform Status :has() CSS relational pseudo-class | Can I u
概要 Webページでアニメーションを実装しようとしたときに、どんな方法があるのかまとめる。 今回は「実装したい特定のアニメーションにとって良い方法とは」ではなく、Webのアニメーション全般に対する知見を深める目的。 このアニメーションどうしようかなと思ったときに見返せるように。 方法 参考リンク 特徴のコメント 実際の例 などを書く構成になっています。 パッとググって出てくるライブラリは網羅したはず。 ライブラリの細かい使い方についてはそれぞれ紹介している記事がいっぱいあるので、ここでは特徴をメモ程度に。 スター数や最終更新日は執筆時点のもので、こまめに更新する予定はありません。 目安程度で実際の値は実際にGitHubをご確認ください。 パフォーマンスについてはスコープ外です。 アニメーションの調査方法について 既存サービス/サイトのアニメーションに何が使われているか調べる方法としてChr
まだ知らないCSSプロパティと出会える方法 - Little Strange Software
どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 ところが。 CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全てのプロパティを網羅しているわけではありません。 また、仮に「全てのCSSプロパティを網羅した本」があったとしても…CSSは進化しているので、時が経つとまた新たなプロパティが生まれたりもします。 プロパテ
【概要】 こんにちは〜 現在、プログラミングスクールRUNTEQで未経験からWebエンジニア転職を目指して学習中のなおやです。 今回は、GitHubのプロフィール欄を充実させて、自分の実力をつよつよに見えるようにしていきましょう〜！ ※今回はつよつよに見えるプロフィールを作ることが目的です。 (実際の実力を担保するものではないのであしからず。。。。。) 【対象者】 ・GitのCloneや基本的操作などが行える状態の人 ・就活で見せるようにGitHub欄をつよつよにしたい方 ・GitHubをつよつよに見せて、「なんかできそう！」と思われたい方 【趣旨】 自身のGitHubのプロフィールを作成することで、 完成イメージは下記です。 【実装方法】 実装方針としては、とてもシンプルです。 ①.ReadMeを作成する。 ②.ReadMeの作成を行い、反映されているか確認する。 以上、2点を行うことで
【CSS】３種の背景画像を重ねて個別に動かすアニメーション - Little Strange Software
どうも！LSSです！！ mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。 美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。 …ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますｗ コード 使用画像 表示サイズと移動量の話 余談 コード <style> @keyframes divers{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:-800px 1600px,0px -800px,0px 0px;}/*ダイバー画
Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container. The @container API is not stable, and is subject to syntax changes. If you try it out on your own, yo
ユーザーエクスペリエンス・デザイナー。インフォメーション・アーキテクト。アクセシビリティ・コンサルタント。Watson。 ux hcd uxd user experience ai ucd watson artifact intelligence chatbot watson knowledge studio watson discovery web design usability scenario persona product management design thinking css3 html5 google analytics design bis innovation big data dx キャリア career agile cms clement mok david siegel インターネット老人会 spotify getwild ui mttokyo movable
開催期間: 2020.8.28 - 2020.9.10 Kindleストアの出版社横断プログラミング書籍セール 700冊以上が対象 50%ポイント還元 or 50%オフ (対象外のも含まれていますのでご注意を) 出版社別対象作品リスト: インプレス / 日経PB / SBクリエイティブ / マイナビ出版 / 秀和システム / 翔泳社 / 近代科学社 / MdN / NextPublishing (セール対象外多め) 本ページはキンセリの特設ページです アマゾンに当セールの対象作品一覧ページが存在しないので作成しました （間違い等ありましたら運営者までお知らせくだされば幸いです） 沈黙のWebライティング —Webマーケッター ボーンの激闘— 沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション アルゴリズムイントロダクション 第3版 総合版：世界標
どうも！LSSです！！ このブログのカテゴリを見ていると…「HTMLなど カテゴリーの記事一覧」の記事数ばかりがダントツで多くなってますねｗｗｗ 「HTMLなど」というざっくりとしたカテゴリを設けたのは、本来Androidアプリ開発をメインとしたブログとなる予定だったからなのですが（一応、検索流入的にはまだそちらが勝っていたり）、HTMLの話、CSSの話、JavaScriptの話、をごっちゃにしたカテゴリとして、でした。 ブロガー仲間の方にとって有益なのは、とりわけ「CSS」に関するものかな、と思います。 で、ここで一旦、ちょっとまとめてみます。 CSSの基本的な部分について 記事検索「CSS」 記事検索「gradient」 記事検索「animation」 CSSの基本的な部分について little-strange.hatenablog.com CSSにはざっくり分けて３種類の書き方があり
ネットには色々な情報がありすぎ、良いものも悪いものも新しいのも古いものもごったになっていて、初心者には見分けがつきません。 結局これが参考になった。よかったと思ったものを項目ごと並べていきます。無駄に時間を使わなくてよいようにコツみたいなのもわかる範囲でかきます。 周りに詳しい人がいないけど、独学で勉強されるかたの参考になれば幸いです。 誰かの役にたてば苦労は無駄ではなかった。 ぐぐって記事を探すとき 「+2022」を入れ今年以降の記事を検索する 結構無駄な時間が省けます。 理由：フロントエンド技術は半年前の情報があてにならない。 目次 1. エディタとPC 2. Portfolioサイト 2. HTMLとCSS 3. JavaScript 4. React 5. PHP 6. Python 7. Git 8. サーバとDB 9. フロントエンドとバックエンド技術 10. デザイン関係 1
はじめに 経歴として大学卒業後に自動車部品の会社で金型設計の仕事を2.5年していました。 2020年4月から独学を開始し、約6ヶ月後にWEB系自社+受託開発企業様から内定をいただくことができました。 内定までの学習状況や転職活動での経験を共有させていただきます。 低偏差値大学、有用なスキルor資格無し、離職期間15ヶ月の私でもなんとかなりましたので、 これから勉強を開始される方や、転職活動中の方の参考になれば嬉しく思います。 目次 なぜエンジニアを目指したか 学習開始時に設定したゴール 転職時のスキルセット 情報収集方法 学習教材＆金額 学習＆転職活動 反省点 まとめ 1. なぜエンジニアを目指したか この部分が最も大事だと思います。前職では目標もなく、なんとなく大手に入った理由から退職しましたので。 個人で稼げるから、リモートワークできるからという気持ちは、少なからず誰しもがあると思いま
こちらの記事は、2020年頃のWeb制作学習最適解としてアップしておりましたが、現在は「2022年最新版の学習ロードマップ」でガッツリ学習してもらうのをおすすめしています！ 学習マップをお探しの方はそちらに移動をお願いいたします！ ただ、この記事ではスキル０の30代だった僕の奮闘や熱量がそのまま書かれているので、モチベアップなどの作用はあると思います。 そうした用途でみていただきつつ、学習は「2022年版学習ロードマップ」をご使用ください！ 【知識0・30歳】半年間のプログラミング独学で30万円稼ぐことができた全工程を解説 こんにちは。ワードプレスを使って副業で稼いでいる「はら」と申します。 半年前までパワポしか使えなかった僕が、半年間プログラミングを独学した結果、月に30万円ほど稼ぐことができる様になりました。 ちなみにこのWEBサイトも自分で構築しました。独学開始前の自分からすると、結
Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由｜TechRacho by BPS株式会社
2022.02.17 Rails 7: importmap-rails + tailwindcss-railsでnode.jsが不要な理由 Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた 上の記事に書いたように、Rails 7でimportmap-railsを使う場合、node.jsは不要になり、node_modules/ディレクトリも作成されません。 # デフォルトでimportmap-railsがインストールされる $ rails new . ちょっと不思議だったのは、importmap-railsとtailwindcss-railsを組み合わせた場合にもnode.jsが不要なことです。なお、このセットアップではconfig/importmap.rbにtailwindのエントリは入らず、app/assets/builds/の下にtailwi
【ツール】CSS3Dアニメーションお試しツール【学習入門用】 - Little Strange Software
どうも！LSSです！！ CSSの3D表現とkeyframesによるアニメーション。 組み合わせると色々面白い動きを作る事ができます^^ が、関連するプロパティが多く、またそれぞれを「どうすれば どうなるか」が分かりにくいところもあり、これから学ぼう、あるいは自分で考えた動きをさせてみようとされる方に「高いハードル」となっているのではないでしょうか。 そこで、微力ながら「手軽に設定変更でき、その設定がどう動きに反映されるのかを即時に見られるツール」を作成してみました。 CSS3Dアニメーションお試しツール 使い方 選択項目について あとがき CSS3Dアニメーションお試しツール 黄色枠内の項目を変更できます。 <style> @keyframes kaitena{ 0%{transform:rotate(0deg);} 100%{transform:rotateX(deg);} } .wak
[React] アプリのビルド時にBrowserslistの更新を要求されるので対処してみる | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、Reactアプリケーションのビルド時にBrowserslistの更新を要求されるので対処してみました。 ビルド時にBrowserslistの更新を要求される 本日（2021/09/12）より一ヶ月ほど前（2021/08/13）にcreate-react-appして作成したReactアプリケーションがあります。 このアプリケーションでデバッグを行うためにローカルでビルドや起動を行う際に、いつの日からか次のようなメッセージが表示されるようになりました。 Browserslist: caniuse-lite is outdated. Please run the following command: npx browserslist --update-db ビルド時 $ npm run build > react-app@0.1.0 b
![[React] アプリのビルド時にBrowserslistの更新を要求されるので対処してみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Tailwind CSS 3.4では、動的ビューポート単位のサポートが追加されたほか、親要素だけでなく子要素に基づいてスタイル設定を可能にする:has()疑似クラスのサポート、親から子のスタイルを設定する*バリアントの追加が行われている。 さらに、幅と高さを同時に設定するユーティリティsize-*、小さなセクションにおいてバランスの取れた見出しを実現するtext-wrap: balance、サブグリッドのサポート、min-width、max-width、min-heightスケールの拡張、不透明度スケールの拡張、grid-rows-*スケールの拡張、強制カラーモードのスタイルを調整するバリアントforced-colors、強制カラーモードのデザインへの影響を制御するユーティリティforced-color-adjust-autoおよびforces-color-adjust-noneが新たに加
【時事ネタ】インターネットエクスプローラー、終了のお知らせ（１年ちょい先の話） - Little Strange Software
どうも！LSSです！！ 今回は珍しく時事ネタです。 MicrosoftがIEのサポート終了を発表 開発はかなり前から止まってました 諸行無常の響きあり、盛者必衰の理をあらはす MicrosoftがIEのサポート終了を発表 ja.wikipedia.org ↑既にWikiにも反映されていますが、とうとうというか、ようやくというか、MicrosoftがIEのサポート終了を発表しましたね！ 2022年6月15日（日本時間では16日）にサポート終了との事。 Windowsに標準搭載されているブラウザで、利用者も多かったですね。（今なお使用されている方もおられると思いますが） やがてGoogleChromeなどの他社ブラウザにシェアを追い抜かれ、Microsoft自身もEdgeという新しいブラウザを出したり、IEユーザーにEdgeへの乗り換えを勧めたりしていました。（今回の発表も、Edgeへの乗り換
IE 6-9とOpera 10-11.5では、flexboxを使用することができません。これらが推奨環境に含まれてしまっている場合はflexboxを使用するのを避けましょう。 また、最新のIE11でもいくつかバグが報告されているため、flexboxを使用する際は動作確認を行った方がいいでしょう。 FlexBoxの基本 それではflexboxの基本から学んでいきましょう。 flexboxは、HTML内に親要素となるコンテナを作成し、その中に子要素となるアイテムを作ります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello World !</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div clas
If you’re looking to stun your website visitors, using CSS animations ought to do it! It might sound simple at first, but using animations like this can be extremely compelling and really make an impact on how your site is perceived. They can add a layer of interactivity that drives interest. They can also add personality. So, if you’re not sure how to get started with CSS animations or where to f
はじめに 私はもともとネットワークとかインフラ系の話をやっている人で、ソフトウェア開発はやっていなかったのですが、この 1 年くらいで D3.js とか Vue.js とかを触るようになりました。この記事では、私の体験をもとに、フロントエンド技術が主業務ではない人 (私のようなIT基盤系エンジニアなど) 向けに、D3.js をつかったデータ可視化をする際の考え方をお伝えしたいと思います。プログラミングのノウハウというよりは、プログラミングをする前に知っておくべきこと・考えておくべきこと、みたいな形になるので、個人差があるとは思いますが、まあ参考程度に。 D3.js を始める前に [2019/9月時点情報] D3.js は v3 と v4/v5 の間に大きな変更が入っています。 d3/CHANGES.md をみてもらえるとわかると思うのですが、v4 (2016/6) の変更箇所の多さよ……。
フォームのデザインをかっこよくするタブ(tab)切り替えのCSS/JSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 入力項目が多いけどスクロールは避けたい場合、タブ切り替え機能をhtml/CSS/Javascript/jQueryなどで実装することも多いと思います。本記事ではフォームの中でも「タブ切り替え」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。基本形とも言えるシンプルタブ切り替え。縦型・横型の2パターン。See the Pen Bootstrap Tab Group by Stefan Rusu (@stephanrusu) on Cod
2019.07.23 2024.04.02 CSS レスポンシブ こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 今回はレスポンシブデザインでWebページを作る際の基本テクニックをご紹介したいと思います。レスポンシブデザインというのは、スマートフォンやPC、タブレットといった異なる画面サイズを持つデバイス向けのWebサイトを、一つのソースコードで実現する手法のことを指します。HTMLやCSSの書き方は、難しい内容ではないのでお付き合いください。 レスポンシブの基本① viewportの指定 viewportとは viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。レスポンシブデザインではこのviewportが重
【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール) | 【FIRE実践会】副業・不労所得・資産運用「幸せな人生研究会」
「THE THOR」は、累計販売数30,000件を突破！ 2021年9月9日「THE THOR」は、累計販売数30,000件を突破することができたそうです。 インターネットでビジネスや副業をするためには、ホームページやブログは必須のアイテムです。 ホームページやブログを作るためには、アメーバブログなどの無料のブログを利用するのも良いですが、本格的にやるには、やはりWordPress（ワードプレス）でしょう！ 中でもアフィリエイターに取っては、月収を左右するのが、SEOに強いテーマです。 その中でも厳選されたテーマが、ここでご紹介する【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)です。 Twitterでの利用者のつぶやき https://twitter.com/shoblog2019/status/1116256592662421504
こんにちは。倉内です。 初めてプログラミングを学ぶとき、どのプログラミング言語を選ぶといいでしょうか？ とりあえず体験してみたいだけであれば学習コストが低いものを選ぶのがいいと思います。また、やりたいこと（たとえば、Webサービス作りたい、機械学習やりたい、ゲーム開発したいなど）があるなら、もちろんそれを実現するのに適した言語やフレームワーク、周辺技術を学ぶほうがいいでしょう。楽しく学び続けるためには大切なことです。 しかし、プログラミングを学習して未経験からITエンジニアを目指そうと考えているなら、「そのプログラミング言語は業務において需要があるか？」つまり「未経験でも応募できる求人が多いか？」という視点を持ってみてもいいかもしれません。特に、新卒や第二新卒ではなく中途採用で未経験からITエンジニアになる場合、実務経験を売りに転職できるわけではないので、需要が極端に少ないものを学んでもそ
WEBサイトがブラウザによって見え方が変わってしまうのを無くすリセットCSS（reset.css）。 リセットCSS（reset.css）と一言で言っても、ブラウザ同士の見え方だけを調整したもの、全てのタグをリセットさせるもの、単位が違うものなどなど、種類が多くあります。 そこで今回は、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）を紹介します。 destyle.css 個人的に一番よく使うのがこのdestyle.cssというリセットCSS（reset.css）。 このdestyle.cssは、h1タグだろうとpタグだろうと全部共通の大きさに設定されるリセットCSS（reset.css）。 全てが同じ大きさになるので、いちいちスタイリングする手間は増えますが、CSSで各タグの大きさ調整が柔軟に対応できるのでお気に入りのreset.cssです。 各タグの表示を紹介する
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
週刊Railsウォッチ（20191204後編）Rubyコードをトランスパイルするruby-next、Cloud Run正式リリース、2019年Web年鑑レポート、V言語ほか｜TechRacho by BPS株式会社
2019.12.04 週刊Railsウォッチ（20191204後編）Rubyコードをトランスパイルするruby-next、Cloud Run正式リリース、2019年Web年鑑レポート、V言語ほか こんにちは、hachi8833です。1日遅れの後編です🙇。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓お知らせ: 週刊Railsウォッチ「第17回公開つっつき会」（無料） お申し込み: 週刊Railsウォッチ公開つっつき会 第17回｜IT勉強会ならTECH PLAY［テックプレイ］ 第16回目公開つっつき会は、明日12月05日（木）19:30〜にBPS会
次のレベルにステップアップ可能な業務自動化・API・Flutter・React・ECサイト構築などの知識が動画でサクッと身につく「Udemy」ブラックフライデーセール
ITブームが到来しており、IT技術者は各業界から引く手あまたな状況の中、「今のうちにもう少しスキルレベルを上げておきたい」と考える人も多いはず。そんな人に役立つのがオンライン学習プラットフォーム「Udemy」で、ちょうど年末商戦の幕開けとなるブラックフライデーセールが11月26日(金)まで開催されており、対象の講座が1200円～という非常にコスパの良い価格になっているほか、さまざまなトピックの新講座が続々と公開中とのこと。多数の良質な講座の中から、次のレベルを目指すステップアップに良さげな講座を5つピックアップしてみました。 オンラインコース -世界最大級のオンライン学習プラットフォーム- Udemy https://www.udemy.com/ ・目次 ◆1：面倒な定型作業を簡単に自動化するツール「Power Automate」解説講座 ◆2：APIを自由自在に作成・利用することで高機能
【CSS】3D直方体を改変した水槽…の作りかけ【途中経過】 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com で作った直方体を元に、あれやこれや手を加えて水槽らしきものを作ろうとしてみました（途中） 「水槽」というのは、 noriko(id:non704) 質問へのお返事ありがとうございました。 水族館風・水中花風・・・やってみましたが、今一つ。(^^;) ゆっくり又考えてみます。 いただいたコメントから拝借したアイデアなんですけどねｗ また、今回の記事ネタは、同じくいただいたコメント、 のんべえ(id:whisky-coke) 大きさも色々変えられて良いですね。でも、使いどころが難しいｗ ちなみに作成後にフロントとバックの中間にもう一面追加して入れることは可能でしょうか？ の回答の実践例でもあります。 作成するにあたり、数枚の透過画像を描く必要性が出てきましたが、そこを強引にCSSで描いた「ラフ」みたいな状態です
ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。 中にはCSSコードで出力してくれるものもあるので、それらは既にコーディング済みのページに適用させるのも楽だと思います。 本格的に使用する場合は有償だったりライセンスに注意すべきものもありますが、多くはフリーで使用できて且つ自分好みにカスタマイズしたものをダウンロードできるようになっています。 ※サイトによってはライセンスに注意が必要なので、使用する際は各自で再度確認してください。 CSS3 Patterns Gallery CSSで再現できるパターン集で、少し変わった見栄えもlinear-gradient()やradial-gradient()を用いて表現しています。 実装に必要なコードは、それぞれパターンサークルをクリックすると確認できます。 Grad
captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。 基本的な使い方 デモはスマホで見てね。 あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。 PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。 値 capture, captu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
転職エントリー - 酒と開発の日々
アンサイクロペディアの「バイキング」の記事が「まさにインターネット」という感じでワクワクする「発想の勝利」
URLの `#:~:text=` とは何か？（ Text Fragments ） - Qiita
検出 - インデックス未登録の対策法｜大阪のホームページ制作会社セブンデザイン
ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた - hogashi.*
2020年中期のWebアニメーション実装の全容と方法70選 - Qiita
GitHubのプロフをつよつよにみせる - Qiita
Next Gen CSS: @container | CSS-Tricks
Yoshiki Hayama
【Kindle】夏のプログラミング書 合同フェア (2020/8/28から9/10まで)
【CSS】CSS関連記事まとめ - Little Strange Software
Web系プログラミング独学者の時間を無駄にしない参考まとめ 2022年
未経験×独学からWeb系自社+受託開発企業のエンジニアになるまでのストーリー - Qiita
【知識0・30歳】半年間のプログラミング独学で30万円稼ぐことができた全工程を解説 | はらブログ
オープンソースのCSSフレームワーク「Tailwind CSS 3.4」がリリース
【2019年＊保存版】FlexBoxで簡単に横並びレイアウト｜初心者でも大丈夫
17 Cool Pure CSS Animations - 1stWebDesigner
これから D3.js を始める人のためのメモ - Qiita
タブ切り替えをおしゃれにするCSS/JSスニペット16選。通常型もスライドショー型も縦型も。 | KodoCode
レスポンシブ対応するためのCSSの書き方 | CSS
プログラミング学習、最初はどの言語を選ぶべき？未経験者向けに解説 - paiza times
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10