It works!

上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. 　sampleクラスを見つける 2. 　1の子孫のtable要素を見つける 3. 　2の子孫のtd要素を見つける 4. 　文字色を赤くする 正しい見解 上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 　全てのtd要素を見つける 2. 　1の先祖要素にtable要素が存在するかを確認 3. 　2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 　文字色を赤くする このように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです 何が問題か？ 例えば、以下のようなHTMLコードがあったとします。 上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO

EJS – JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSとはEJS(Embedded JavaScript)は「.ejs」という拡張子のファイル内にあるhtmlにJavaScriptを埋め込む形で使用します。EJSを利用するには「Node.js」が必要になります。EJSにはGulp用のEJSがあり、Gulpで使うことができます。 EJSで何ができるかざっくりとですが、EJSは下記のようなことができます。 ループや条件分岐。共通ファイルの読み込み(インクルード)やパラメータの引き渡し。JavaScriptと同様に、数、文字列、配列、オブジェクトなどを扱える。htmlファイルへの出力。gulp-ejsを導入するEJ

さて、WBCも一応の盛り上がりを見せ、いよいよ明日、日本のプロ野球の開幕ですね。 広島カープファンの僕ですが、今年はAクラスに入れたら上々かなと思ってます。 さて息子の所属少年野球チームのアンオフィシャルサイトの中で、野球の点数つけるスコアボードを入力、表示させるようにしています。 スコアボードをコーディングしていく上で、正しいHTMLでスコアボードをコーディングするとどうなるんだろう？と疑問に思っていろいろ調べてみました。 目次 自分の書き方 MLBとNPBを調べてみた MLBサイトのスコアボード NPBサイトのスコアボード scope属性を利用する まとめ 自分の書き方 僕に限らず、直感でtableタグで実装しようと考える人がほとんどだと思います。 dlで組むこともありっちゃありかもしれませんが、なんか定義してるかっていうと、そうでもないので、違うかなと。 そして書いたコードがこれ。

実のところリモートライフよりも、一緒に住む時間が最近増えてきた。2年近く一緒に過ごしてきた中で初めて共同生活をしているのだ。寂しさを除けば離れて暮らした方が双方楽だろうな、と思うことの代表例が生活スタイルの違いというものだろう。 私のほうがズボラで、夫のほうが几帳面である。そうなると掃除の頻度に対しての「お互いこれくらいだと気にならない」が異なる。往々にしてここでストレスを抱えるのは几帳面な夫の方である……。日中は私が家にいることもあって「ルンバを走らせておいてほしい」と夫に言われたのだけれど、すっかり2週間も走らせるのを忘れてしまい夫をガッカリさせた。 ボタンをぽちっと押す*1ことすら出来ないひどさである……。すみません……。 なんだか申し訳ないな、と思いつつも「なんとなくやる」だといつまでたっても実行できないので、家庭用Slackにリマインダーを飛ばすことにした。 毎週決まった曜日にS

お客さん側で更新しやすいようにということで、WordPressを導入するのはよくあることです。 ただ、間に入っていただくディレクター、もしくは営業の方の力不足だったりもあって、更新が楽になるかどうかは別物。 そんな中で、最近特に好んで使っているカスタマイズです。 お客さんにとっては「更新が簡単 = 更新箇所が明確」ということだと思うので、こちらで「ここ更新したらいいよ」ってのをわかりやすく教えてあげるといいと思うんです。 その一つの方法として、カスタムフィールドを使って、更新できるようにしています。 目次 こういう時に向いてます ショートコードを使う カスタムフィールドの値を取得して表示 まとめ こういう時に向いてます あまり具体例が多いわけではないんですが、例えばASPのカートなんかを使っている場合。 「カートに入れる」の部分だけHTMLコード書き出すから、それを商品ページに貼り付けて下

WordPressこれで学びました WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。 WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。 また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。 人気記事 記事一覧を固定ページに簡単表示／WPプラグイン「What’s New Generator」 76,049 views 多機能なリンク集作成／WPプラグイン「Link Library」 50,443 views 画

先日2.0がリリースされたこともあり、React-Moveを試してみました。 はじめに React-MoveはReactでデータ駆動によるHTMLやSVGのアニメーションを行うツールです。 D3のようにグラフを作ることができて、状態変化のアニメーションが柔軟にカスタマイズできるような感じです。 例えばComponentのstateとSVGの属性などを紐付けて、動的かつスムーズにアニメーションすることができます。 アニメーションにはstart、enter、update、leaveとデータの動きに合わせて処理を行うことができます。 またd3-interpolateの便利機能も利用することが可能です。 上記以外にも軽量とかReact-Nativeでも利用できるなど、詳細はReact-MoveのFeaturesをご確認ください。 ※補足としてReact-Move2.0にてResonance(rea

Supply chain logistics platform Flexport is acquiring the assets of shuttered digital freight network Convoy, according to a memo Flexport CEO Ryan Petersen sent to staff Wednesday. Flexport will rest

.flip-preloader { width: 300px; height: 60px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); perspective: 300px; perspective-origin: 50% 50%; } .flip-preloader.example-1 { top: 25%; height: 100px; width: 400px; } .flip-preloader div { position: absolute; width: 20%; height: 100%; background-color: red; left: 0%; box-sizing: border-box; transform-origin: 0% 5

スマホデザインの幅を確認…って！ iPhone Ⅹ おっかない… iOSアプリデザイナーさんとかUIデザイナーさんとか、胃がキリキリしそう… あ、ひとごとじゃなかった https://t.co/ftPb3YtmvW

ホームWordPressReally Simple CSV ImporterでWordPressのカスタムフィールド（Smart Custom Fields）の繰り返しフィールドにデータをインポートする方法 Really Simple CSV ImporterでWordPressのカスタムフィールド（Smart Custom Fields）の繰り返しフィールドにデータをインポートする方法 2022 2/25 カスタムフィールドのプラグインは Smart Custom Fields を使っています。 CSVをインポートするプラグインは Really Simple CSV Importer を使いました。 Smart Custom Fields は、繰り返しフィールドが使えるので大変重宝しているプラグインです。今回、カスタムフィールドの繰り返しフィールドをCSVで一括登録したく、インポートする

エクセルのシートをテキストファイルで保存するときの文字区切りの設定方法を教えてください。 設定したい エクセルのシートをテキストファイルで保存するときの文字区切りの設定方法を教えてください。 設定したい文字区切りは " "," "," "です。 たとえばエクセルで３セルに abcd efghi 1234 となっているものを "abcd","efghi","1234" としてテキストファイルにしたいのです。 ご教授のほどよろしくお願いします。

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ（仮）」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「AltJS」。少ない記述量でJSが書けるメタ言語です。 それでは行ってきます！ 目次： CoffeeScript CoffeeScriptの主な記法 LiveScript LiveScriptの主な記法 TypeScript TypeScriptの主な記法 Babel Babelの主な記法 まとめ ※参考：JSの基本についてはこちら 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 ※2019/10/20：この記事上にソースコードがあり

標準機能でできそうですが、実はそのままではできません。webviewからsafariの立ち上げ。 解決方法としては、webviewのデリゲートメソッドを使って解決します。 自分で実装する場合は、汎用性を持たせるために ?view=safari のようなパラメータを付けて、それをURLのパターンとして判定させています。 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *checkURL = [request.URL absoluteString]; NSRange existUrl = [checkURL rangeOfString:@