Flexbox FroggyFlexbox Froggy is created by Codepip • YouTube • Twitter • GitHub • Settings Language Difficulty
ブラウザのCSS解釈方法についての衝撃事実 - Qiita
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. sampleクラスを見つける 2. 1の子孫のtable要素を見つける 3. 2の子孫のtd要素を見つける 4. 文字色を赤くする 正しい見解 上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 全てのtd要素を見つける 2. 1の先祖要素にtable要素が存在するかを確認 3. 2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 文字色を赤くする このように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです 何が問題か？ 例えば、以下のようなHTMLコードがあったとします。 上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO
開発会社におけるエンジニアスキル向上施策の過去と今｜TechRacho by BPS株式会社
morimorihoge@Webチーム部長です。ご無沙汰しています。ゴ魔乙はギルド戦が実装されてから拘束時間が多くなり、そろそろ見切りを付けようかとも思い始めた今日この頃です。とりあえずポケモンGOは始めました。 しばらくTechRachoに投稿できていなかったわけですが、別に遊んでいたわけではなく、むしろ開発会社としての本業の方で一杯一杯でなかなか記事を書く気合を充填できていませんでした。 今回は、最近社内で（というか主に僕のいるWebチームで）取り組んでいる社内エンジニアのスキルアップへの取り組みについて、これまでの経過と近況を書こうと思います。長いです。 ※今年に入ってから弊社は事業拡大を目指して採用活動を強化しており、現在進行形でメンバの増強を行っています。新しい人が入ってくる中で古くからの人もいるという当たり前のことではありますが、過去にこういう取り組みをしていたんだよという記録
コミットメッセージの書き方
コミットメッセージにはどのような情報を残すべきだろうか？はじめにこの記事ではGitのコミットメッセージの重要性と良いコミットメッセージの書き方を説明します。いままで良いコミットメッセージについて考えてこなかったかたも一度立ち止まって考えてみてくれると嬉しいです。 対象読者GitやGitHubを業務で使っている人「良いコミットメッセージ」をあまり意識しない人目次Gitを使ったソフトウェア開発で、なぜコミットメッセージが重要なのか？コミットメッセージの書き方の1例を紹介まとめGitを使ったソフトウェア開発で、なぜコミットメッセージが重要なのか？ソフトウェア開発において、良いコードとはどんなコードでしょうか？ 私は「 他人が読みやすく、理解しやすいコード」だと考えています。ソフトウェアにバグは必ず出ます。そのバグを修正する時間を最短にできるような、読みやすい、理解しやすいコードが良いコードだと思
!importantはもう使わない！CSSの優先順位をおさらいしよう
先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと？ 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ！」って方は5.つまりどうゆうこと？から読んでもらえれば大丈夫かと思
Grid Garden - A game for learning CSS grid layout
A game for learning CSS grid layout
【Git入門者向け】イメージで理解するGitコマンド事始め - きのこる庭
ご無沙汰です。連載企画を書き進めると豪語しておきながら かなり経過してしまいました。連載企画の方は時間を見つけつつ少しずつ書き進めていければと思います、申し訳ございません。 さて、最近周囲の方にGitの解説をする機会が増えてきたため、今回はGitの基本コマンドに関連する説明をします。 対象読者 ・何らかの理由でGitを使う事になったが、コマンドが多くてよくわからない方。 ・コマンドごとの意味は何となく理解しているけど、イマイチピンと来ない方。 (※「そもそも何故Gitを使う必要があるのか」「バージョン管理とは何か」といった点については ノンプログラマ向けの連載企画として後日記載させていただければ幸いです) 解説するコマンド git init, git add, git commit, git status, git log, git branch, git checkout, git me
Web制作にGPU処理を取り入れる
Updated 2013.10.24 / Published 2013.10.24 HexGLのようなWebGLのコンテンツを見ていると、これから本格的にWebがゲーム機の領域を浸食するようになっていくのかと、同じWebでもWebサイトを作る領域からすると動きの面で感心させられることしきりです。 なぜWebGLのアニメーションは滑らかなのか さておき、WebGLのコンテンツは非常に滑らかなアニメーションを実現できているわけですが、それはWebGLがCPUではなくGPUで処理されいるからとのことです。この場合のGPUで処理をするというのはソフトウェアであるブラウザがGPUを使ったハードウェア・アクセラレーションに対応していることが条件になります。つまり、CPU上でソフトウェア（ブラウザ）が処理する部分とGPU上のハードウェアで処理する部分を切り分けられる機能をもっているということになります。
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
イラストでわかる！git入門の入門
こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット？ジット？俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの？なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは？と思い、 今回はgit入門の入門、gitってなんだ？というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに？ プログラムを書いていて、こんなことありませんか？私はあります…
Git/GitHub 社内勉強会コンテンツ (最小限の手順まとめ) Git-it SourceTree - Qiita
概要 Git/GitHub 社内勉強会コンテンツ (最小限の手順まとめ)。 本記事は、Git-it で学習を進める際の、副資料。 はじめに Git-it という、Git/GitHub学習のための素晴らしいアプリがある。 Git-it (Git/Github 勉強アプリ) https://github.com/jlord/git-it-electron/releases/tag/3.1.0 それを使った、社内勉強会用コンテンツ。 しかしながら、Git-it では、プルリク - レビュー - マージ の開発の流れが理解しづらいので、その部分を、あとから追加で実施する。 ブランチの状態を可視化する目的もあり、Git管理アプリ SourceTree を併用しながら学習を進める。 SourceTree https://ja.atlassian.com/software/sourcetree GitH
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクタ｜CSS HappyLife ZERO
あのモジュールこのコンポーネントそのブロック