CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの制御構造 CSSの実装テクニック 終わりに はじめに CSSは、スタイルのシステムに特化
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
CSSの数学関数min()、max()、clamp()の基本的な使い方
IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な使い方を紹介します。 min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets CSSの関数のさらにいろいろな使い方は、下記をご覧ください。 CSSの比較関数 min(), max(), clamp()の使い方を詳しく解説 CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装
ビギナー向け、無料で最強の海外独学サイトリスト - Qiita
#お金をかけずに効率よくプログラミングを学ぶには とりあえず、メモ帳代わりにここのブログでなんか書いてみるかと思いたって、何の考えもなしに書いた一番最初に書いた記事に結構コメントや反響を頂き、意外と英語とプログラミングの話題って気になる人が多いのかなと思ったので、普段使ってメチャ便利やんという英語圏の学習用のリファレンスをリストアップしてみるよ。 前回も少し書いたのだけど、２０年前にウェブデザイナーとして、日本語しか分からない状態で色々コーディングを勉強していた時と、１０年ほど外資でプログラミングとか関係ない職種で働いた後に、英語中心でプログラミングを勉強し直した現在の違いを純粋に書いてみたわけだけど、おっさんになり、脳や集中力の衰えを勘案しても、理解の度合いが全然違うので、英語が出来るって、やっぱりプログラムを学ぶ上では大きなメリットだよねという話でした。 まず、今年に入って、もう一度プ
必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita
より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後
技術選定の際には絶対に知っておきたいウェブ開発・機械学習・科学計算に役立つ便利な技術を動画でサクッと学び始められる「Udemy」新生活応援セール【Julia・GraphQL・BERTなど】
何かと生活が変わることが多い春という季節は、新たな技術を学び始めるタイミングにピッタリと言えます。しかし、独学というのは少し分からない点が出てくるだけで挫折してしまいがちなもの。そこで活用できるのが書籍よりも圧倒的な情報量をもつ「ムービー」という形式で学習を進められ、分からない点は講師に直接質問できるオンライン学習プラットフォームの「Udemy」です。ちょうどUdemyは3月26日(金)まで新生活応援セールをやっているとのことで、知っておくと便利な技術から機械学習の論文を解説するような難しめの講座まで、さまざまな講座をピックアップしてみました。 オンラインコース -世界最大級のオンライン学習プラットフォーム- Udemy https://www.udemy.com/ ・目次 ◆1：オリジナルデザインのサイトを作れるCSSフレームワーク「tailwindcss」とCSSをまとめて学んでいく講
ブラウザの作り方
リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html
まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog
この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連したCSSが複数の要素に分かれることはよくあります。その代表例がdisplay: flexです。例えばこんなレイアウトを考えてみましょう。左側のボックスの幅が決まっていて右側の幅が可変の2カラムレイアウトです。 左のカラム (100px)右のカラムこのレイアウトはおおよそ次のように実現できます。 /* 親要素 */ display: flex; /* 子要素（左） */ flex: 100px 0 0; /* 子要素（右） */ flex: auto 1 0;では、Reactではどの
【CSS】付箋風ボタンをCSSで作ってみる！ - Tech.log
今回は、付箋風ボタンをCSSで作る方法を紹介したいと思います！ 最初に、ベースとなるCSSコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきます。 目次 目次 ベースコード 使い方 カスタムパターン 付箋の色を変えてみる！ 角丸表示にしてみる！ 影の度合いを調整してみる！ 影薄めバージョン 影マシマシバージョン まとめ ベースコード 付箋風のボックスは以下のようなCSSで実現することができます。 .button.tag { display: inline-block; text-decoration: none; padding: 0.5rem; background: #f7f7f7; border-left: solid 6px #58ad5a; color: #58ad5a; font-weight: bold; box-shadow: 5px 5px 5px rgba
【CSS】円形グラデーションってこうやるのかぁ - Little Strange Software
どうも！LSSです！！ 今回は、CSSで円形グラデーションを、やや迷いながらやってみましたｗ サンプル コード 解説 形状の指定 色の指定 おまけ：実は色は２色に限らず、たくさん指定可能 コード（CSS指定部分のみ） サンプル サンプル です コード <style><!-- .marugra{ position:relative; border-radius:8px; border:1px solid black; padding:1em; width:200px; background-image:radial-gradient(circle 150px at 65% 35%,#ffffff,#888888); } --></style> <div class="marugra">サンプル<br />です</div> ※円形グラデーションに関する指定は赤字の一行だけです。 ※青字は任意の
#技術書典 にkosen14sとして初サークル参加してきた - ようじょのおえかきちょう
技術書典5 にkosen14sとしてサークル参加してきました。メモ形式で記録しておきます。 techbookfest.org おきもちを集約するとこれになる↓ #技術書典 初サークル参加でした。こんな素敵な機会をくださってありがとうございます！ 運営のみなさまと買ってくださったみなさまに感謝です🎉— やましー 技術書典お26🛀 (@yamasy1549) October 8, 2018 TL;DR kosen14sの有志で書いたジャンル不特定な闇鍋本と、whiimsからはプログラミング言語かるたやGitコマンドかるた、その他関連商品を頒布した 闇鍋本の組版は CSS でやった 開始直前被チェック数130、準備数50部（2冊それぞれ）、(頒布数)=(準備数)+(DLカード20数枚)。かるたは全て売り切れた BOOTH、いいっすね 当日まで 執筆 急かされないとやらない高専生なので、当落通
N予備校はプログラミング未経験者にとって最高の教材だ。 - Life is Records.
開沪实名认证-领啋唫 亚博彩票一分钟/期 首充优惠仅1倍水最高送18888W 请记住官方域名： baber28.cc 立即前往
JavaScript開発はこれ1つでOK！超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開！ - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
ネットで簡単にプログラミングが勉強できるProgateが凄すぎる件について - タコの卵
僕はまったくプログラムがわからない。C言語とかJavaScriptとかPHPとかよくみるけど実際には何言ってるかわからん。日本語も怪しいのに英語で…しかもプログラミングなんて全然わからない。 しかし、はてなブログは記事を書く時に 見たまま HTML編集 に分かれており、少しHTML編集でいじる時もある。</p>とかで段落？ってのがわかるぐらいの何とも頼りない知識だ。どうせならもう少しHTMLができるようになってブログをもっと読みやすくしたり軽くしたりといじりたい欲が出てくるが、いかんせん知識がなさすぎてすぐパワー系池沼キャラになっでじまう。 スポンサーリンク プログラミングでもできたらなぁ…何かカッコイイイメージもあるし、就職にも便利そうだなぁ…でも何から学べばいいしどうやって学べばいいかもわからない。まさに打つ手なし！状態だったが、ふとした瞬間閃いてしまった。 ネットで勉強できるんじ
オンラインプログラミング学習のトライブユニブ、資金調達でサービス強化
プログラミングのオンライン学習サービス「CodeCamp（コードキャンプ）」を展開するトライブユニブは5月19日、サイバーエージェント・ベンチャーズを割当先とする第三者割当増資を実施したと発表した。払込日は3月13日で、調達額は4000万円。 CodeCampは、現役エンジニアによるプログラミングの個別レッスンをビデオチャットで受けられるサービス。プログラミングの初心者から本格的に習得したい人まで、目的やレベルに応じてコースを選択できる。サービスの提供時間は毎日10時～23時40分。トライブユニブによると、5月現在の累計受講者数は、過去の月額サービス（3万円）時の利用者を含めて約400人だという。 コースと価格は、15回のレッスンでHTML5とCSS3を学べる「ベーシックコース」が4万8000円、45回のレッスンでHTML5とCSS3、JavaScript、JQueryを学べる「スタンダー
超会議3の超チューニング祭の感想
さて、超チューニング祭が終わったので、感想を書こうと思う。すでに、参加者の中で、感想を書いている人もいる。 レポート - 超チューニング祭で努力賞(最速賞)をとるためにやったこと - Qiita ニコ動 超チューニング祭で最優秀賞もらいました 超チューニング祭に参加した - masarakki's blog JavaScript - 超チューニング祭に参加＆表彰した - Qiita kmizu/slide_cho_tuning また、いつの間に行ったのか、優勝者に取材したところもあるらしい。 『ニコ超3』の超チューニング祭で、“創世神”戀塚昭彦氏を上回ったカップルが見せたバランス感覚 - エンジニアtype さて、筆者の視点からみた超チューニング祭はどうだったか。 そもそも、私がスタッフとして配置されるブースは、超時空ニコニコ研究所であるはずだった。しかし、超会議にさかのぼること三週間前、
Webサービスを作りたい人が、素早くプログラミング言語を学べる15サイト - paiza times
Photo by Daniel Cukier コーディング転職サイトpaizaを運営している関係上、「Webサービスを作りたいけど、プログラミング言語をどこから学んだらよいか？」という質問をよく受けることがあります。今回はプログラマ視点でプログラミングを学ぶときにつまずやすいポイントと、プログラミング言語の基礎を簡単に楽しく学べるサイトをまとめてみました。 最近はオンラインでプログラミングを勉強できるWebサービスが多数登場してきているので、以前よりプログラムを学ぶコストはぐっと下がっています！！ 目次 ・プログラミング言語を学ぶときに躓くポイント ・学ぶ言語を選ぶのに役立つサイト ・すぐ書きはじめられるプログラミング学習サイト ・講義型のプログラミング学習サイト ・少しコードに慣れてきてからお勧めのサイト ・さらにスキルアップするのに最適なサイト ・基礎文法をマスターしたいなら（おまけ）
HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク·DiagnostiCSS MOONGIFT
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
