外部サイトのリンクにだけ特定のアイコンを付与する
Result 外部サイトのリンクにだけ特定のアイコンを付ける、みたいなの やってる事は単純で、href属性に自サイトのドメインを含んでる場合は除外するようにしています 相対パスも対応する場合は便宜変更してください cssa:not([href^="https://codepen.io/"]):after{ content: ""; background-image: url(foobar.gif); display: inline-block; background-size: cover; }上記の場合はhttps://codepen.io/で始まるリンクを除外したコードとなります viaInline Icons & Wrapping
開催期間: 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サイトも自分で構築しました。独学開始前の自分からすると、結
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
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
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が新たに加
[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)
【時事ネタ】インターネットエクスプローラー、終了のお知らせ（１年ちょい先の話） - 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) の変更箇所の多さよ……。
2019.07.23 2024.04.02 CSS レスポンシブ こんにちは、開発チームの宇都宮です。 普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode」に携わっています。 今回はレスポンシブデザインでWebページを作る際の基本テクニックをご紹介したいと思います。レスポンシブデザインというのは、スマートフォンやPC、タブレットといった異なる画面サイズを持つデバイス向けのWebサイトを、一つのソースコードで実現する手法のことを指します。HTMLやCSSの書き方は、難しい内容ではないのでお付き合いください。 レスポンシブの基本① viewportの指定 viewportとは viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。レスポンシブデザインではこのviewportが重
フォームのデザインをかっこよくするタブ(tab)切り替えのCSS/JSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 入力項目が多いけどスクロールは避けたい場合、タブ切り替え機能をhtml/CSS/Javascript/jQueryなどで実装することも多いと思います。本記事ではフォームの中でも「タブ切り替え」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。基本形とも言えるシンプルタブ切り替え。縦型・横型の2パターン。See the Pen Bootstrap Tab Group by Stefan Rusu (@stephanrusu) on Cod
【圧倒的に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サイトがブラウザによって見え方が変わってしまうのを無くすリセット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です。 各タグの表示を紹介する
こんにちは。倉内です。 初めてプログラミングを学ぶとき、どのプログラミング言語を選ぶといいでしょうか？ とりあえず体験してみたいだけであれば学習コストが低いものを選ぶのがいいと思います。また、やりたいこと（たとえば、Webサービス作りたい、機械学習やりたい、ゲーム開発したいなど）があるなら、もちろんそれを実現するのに適した言語やフレームワーク、周辺技術を学ぶほうがいいでしょう。楽しく学び続けるためには大切なことです。 しかし、プログラミングを学習して未経験からITエンジニアを目指そうと考えているなら、「そのプログラミング言語は業務において需要があるか？」つまり「未経験でも応募できる求人が多いか？」という視点を持ってみてもいいかもしれません。特に、新卒や第二新卒ではなく中途採用で未経験からITエンジニアになる場合、実務経験を売りに転職できるわけではないので、需要が極端に少ないものを学んでもそ
次のレベルにステップアップ可能な業務自動化・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で描いた「ラフ」みたいな状態です
週刊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会
ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。 中にはCSSコードで出力してくれるものもあるので、それらは既にコーディング済みのページに適用させるのも楽だと思います。 本格的に使用する場合は有償だったりライセンスに注意すべきものもありますが、多くはフリーで使用できて且つ自分好みにカスタマイズしたものをダウンロードできるようになっています。 ※サイトによってはライセンスに注意が必要なので、使用する際は各自で再度確認してください。 CSS3 Patterns Gallery CSSで再現できるパターン集で、少し変わった見栄えもlinear-gradient()やradial-gradient()を用いて表現しています。 実装に必要なコードは、それぞれパターンサークルをクリックすると確認できます。 Grad
はてなブログ｜HTMLで背景色を設定し、デザインカスタマイズ｜初心者向け - Simple Life Navi
こんにちは！シンプルライフナビです🤗 ブログをはじめてしばらくすると、他の方のブログを見る機会が増えると思います。 すると、いろんなデザインが駆使されていて、いつか自分も使えるようになりたいな〜と思うことありませんか？🧐 ブログの表現力（デザイン）を向上させる方法 CSSを利用する場合はデザインCSS画面の操作が必要 超初心者でもできる文字の背景色設定（CSS操作不要） 文字カスタマイズの基本「背景色設定の方法」 例文を記述してみよう 背景色と文字色を指定してみよう 見た目を調整しよう① 見た目を調整しよう② 学んだことを利用した作成例と解説 作成例 作成例のコード表示 コードの解説 CSSは使わずHTMLだけを使った文字装飾のまとめ ブログの表現力（デザイン）を向上させる方法 ブログ超初心者だった私が*1、文字の背景に一部だけ色をつけてみたい、ちょこっとだけカスタマイズしてみたいとい
WordPress 5.8 をチェックしています
WordPress5.8 Beta が 公開されました。 WordPress5.8 は 2021年7月20日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress5.8 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.8 Development Cycle に載っています。 WordPress 5.8 Beta1 https://wordpress.org/news/2021/06/wordpress-5-8-beta-1/ WordPress 5.8 Beta2 https://wordpress.org/news/2021/06/wordpress-5-8-beta-2/ WordPres
Motunation.com Matching Transformer For Mac - gigacorporate
Visiteurs depuis le 26/01/2019 : 1665 Connectés : 1 Record de connectés : 21 Motunation.com Matching Transformer For Macbook ProMotunation.com Matching Transformer For MachineIridient Digital, maker of the popular Iridient Developer Raw conversion software for Mac, has announced a public Beta of a Fujifilm Raw converter utility for Windows. Iridient X-Transformer is a standalone utility that takes
Web ルーレット
これは、名前またはアイテムをランダムに選択するためのオンラインツールです。また、ランダムな名前ピッカーと呼ばれます, 名前のホイール, またはオンラインルーレット.時には人々が意思決定を行うことは困難です。次に、既存のオプションまたは候補のリストを作成し、そこからランダムに1つを選択します。この場合、当社のツールを使用して決定を下すことができます。シンプルで楽しい。テキストエリア内の名前を変更して、1行に1つの名前を入れることができます。名前は円に描かれます。サークルホイールをクリックするだけで、数秒間回転し始めます。結果は、リスト内の名前の1つをランダムに選択します。デスクトップを使用している場合は、便利なショートカットキーも提供します。 回転（クリック）を開始するとどうなりますか？このページのプログラムは、ネイティブのjavascript apiによって本当に乱数を生成し、名前の1つを
「令和」が発表された日に社会人デビューして以来、1年6か月で技術書を20冊読みました。なるべく新人の私でも読みやすくて、長く使えそうで、手を動かすことができる書籍を選びました。本記事では、読んでよかった技術書20冊について「あらすじ」と「感想」をまとめてみました。「ピン」と来る本を見つけましたら、読んでみてください！ エンジニア基礎力 『かんたん合格ITパスポート過去問題集 令和2年度秋期』 間久保恭子/インプレス/2020年 ITパスポートの参考書です。私が読んだものとバージョン(？)が違いますが、最新版を掲載しました。資格勉強だけでなく、ITの語彙を増やす意味でも重宝しました。 最初に読んだIT本で、「ITって、カタカナとアルファベット3文字の略称が多いなぁ～」って思いました。エンジニアではない人と話すときは、カタカナ語をなるべく使わないようにしています。 『令和02年 イメージ&クレ
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result 自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ 異なるコンテナに含まれる同一要素に自動でナンバリングします 結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します cssbody {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes,
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.10.29 最終更新日 : 2022.10.06 コーディング 「WebGL」が多くのサイトで使われるようになって来ていますが、それに合わせて「Canvas2D」という言葉も多く聞こえて来るようになってきています。 Canvas2Dとは何のことか分からない人から学び初めの人に向けて、見るべき有料サイトや書籍をまとめました！ ぜひ確認してみて下さい！ 【Canvas2Dとは】canvasタグにおける「getContext(‘2d’)」って何？を説明します Canvas2Dのことを優しく例題を使いながら説明してくれています。 まずはこちらのサイトから概要を掴むのが良いかと思います。 https://blog.framinal.life/entry/2020/03/29/084651 canvasのgetCon
こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。 今回は、codepenから探してみました。 CodePen Home CSS3 text-shadow effects 綺麗なテキストシャドウです。CSS3で実装可能。 See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen. Rotating text テキストの一部が変わっていきます。使えそうな予感。 See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen. Shattering Text Animation メインビジュアルに使えそうですね。ループ
デイトラ
業界最安級のWebスキル特化型オンラインスクール 実務力が身につくカリキュラムで 仕事につながるWebスキルを 身につけよう！ \ 最短 10秒 で登録可能！ /無料で講座を体験する scroll 未経験から活躍中の受講生たち WEB制作コース フリーランス デザイナー みやび さん Webスキルを習得して “自分らしい生き方”を実現！ Before 金融機関で事務職に勤め、 手取りの収入は17万円。 After フリーランスデザイナー で独立し、 月の受注額70万円を突破 詳しくみる WEBデザインコース フリーランス デザイナー arina さん 未経験からデザインを学び、 約2ヶ月でデザイナーとして転職！ Before 新卒から2年間助産師として勤務。 After UI/UXデザイナーとして転職 詳しくみる shopifyコース ディレクター さんつ さん Shopifyの構築スキル
Goodbye IE
IE11以外の主要ブラウザがサポートしているウェブテクノロジー一覧 データはCan I useのcaniuse-dbより取得しています。 JS APIAbortController & AbortSignalPNGAnimated PNG (APNG)JSArray.prototype.findJSArray.prototype.findIndexJSflat & flatMap array methodsJSArray.prototype.includesJSArrow functionsJS APIAsynchronous Clipboard APIJSAsync functionsJS APIWeb Audio APICSSBackground-clip: textJS APIBeacon APIJSBigIntOtherBrotli Accept-Encoding/Content-
cssでテキストや文字に縁取り（アウトライン）や光彩を追加できたら便利だと考えたことはないでしょうか？css3から追加されたプロパティで、直接この要望に応えるものはないのですが、text shadowというプロパティを使 […]
Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css/* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } /* カウンター表示 */ li::before { content: counters(index, ".", decimal-leading-zero);/*先頭に0を付けて桁数を一定にする*/ text-align: right; font-weight: bold; min-width: 50px; padding-right: 12px; align-self
Visiteurs depuis le 24/01/2019 : 4509 Connectés : 1 Record de connectés : 25 The 'Gala' version of Flash Player with hardware acceleration for Mac OS X is not quite ready for a final release, but can currently be downloaded as a release candidate (much like the previous. Apple Footer. This site contains user submitted content, comments and opinions and is for informational purposes only. Apple may
「はじめに」「目次」などをPDFで公開中！ HTMLによる、HTMLのための、HTMLだけの本 Web制作の初心者に向けた「HTML5+CSS3でサイトを作ろう」といった内容の書籍は多数出版されています。しかし、それらを卒業し、2冊目となるような、より深く「HTML」を学習できる書籍はあまりありません。 本書は、最低限のHTMLに関する知識やスキルを持ち、簡単なHTMLファイルを作成できることを前提に、HTMLを再入門、あるいはHTMLの初・中級者からさらなるステップアップをしたい、という読者を対象にしています。 HTMLをより深く学習する、言い換えると深く理解するためには、HTMLのシンタックス(構文)とセマンティックス(意味論)を理解することが不可欠です。シンタックスは機械的にチェックできますが、セマンティックスについては現在の技術では人によるチェックをせざるを得ないのが現状でしょう。
プログラマーでもエンジニアでもない私がエンジニア転職に向けた取り組みとして「これまでプログラミングの独学に使ってきた技術書の遍歴」を、Qiitaの練習も兼ねて記事を書いてみました。 採用担当者の方が目にしたときに「この人が独学でなにを学んできたのか」がまとまってる記事になるといいですね(誰得感...) 想定読者 開発実務未経験でプログラミングの知識ゼロでまともなSESとかに行きたい方あるいはSES採用担当者様向けな内容になっているかなあと思います。私の学習履歴を並べた自己紹介的な内容ですね。(私はまだ転職できていませんが... プログラマーとして正社員として転職できました) 私について Not プログラマー Not エンジニア 完全に独学のみです。エンジニア転職活動中の者です。(この記事を書いた当時の話です) 「なぜプログラマー/エンジニアを目指しているのか？」ですが、私は平日・土日問わず
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【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の書き方 | CSS
タブ切り替えをおしゃれにするCSS/JSスニペット16選。通常型もスライドショー型も縦型も。 | KodoCode
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
プログラミング学習、最初はどの言語を選ぶべき？未経験者向けに解説 - paiza times
手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10
社会人デビューから1年6ヶ月の間に読み漁った技術書20冊をまとめました。 - Qiita
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ | AndHA Blog
【2021年4月】現場で使える！テキストエフェクトのまとめ | FASTCODING BLOG
【css】text-shadowで文字に太い縁取りや光彩を装飾する方法
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Flash Player 10.1 Available For Mac
HTML解体新書 | 株式会社ボーンデジタル
実務未経験者が今まで独学に使ってきた技術書を公開していくよ - Qiita