[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/50a0d9447618854c675e06f178427723b9417482/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
GitHubで自動生成コードをDiffに表示しない方法 - Qiita
結論 ここに書いてある 注意事項 だいぶ懐かしい記事ですが…突然、「Diffに表示しないなんてGitHubの価値を損なうものだから記事を非公開にするべきだ」というご指摘をいただいたので、念のため追記。 Diffに表示しない、ってことは当然PRにも見えません。 レビューされない怪しいコードが紛れ込むリスクを抱えることになります。 せいぜい自動生成分だけを非表示にして、CIの中で再生成、差分が出ないチェックを入れるなど、ガードの手は考えておいたほうが良いでしょうね。はい。ご利用は計画的に。 背景 mockeryだったり、swagger-codegenだったり、go-bindataだったり… GitHub上に自動生成されたコードを載せている場合、PRやcommitの詳細画面でDiffが邪魔になることがあります。 .gitignoreでそもそも自動生成コードをリポジトリに載せない generate
WindowsでUnicode文字を簡単に入力したり、Unicodeの文字コード番号を調べたりする方法
この記事で分かること Windowsではリッチエディットコントロール対応アプリでUnicodeの文字コード直後に［Alt］＋［X］を押すと、そのコードに対応するUnicode文字に変換できる 逆に、文字の直後で［Alt］＋［X］を押せば、そのUnicodeコードに変換も可能 「文字コード表」アプリや［Alt］＋テンキー入力でも文字コードを調べたり入力したりできる 解説 Unicodeは、従来のシフトJISコードでは表現できなかった異体字やめったに使わないような文字も利用できるなど、利便性が高く、最近ではUnicodeを使った文書の作成が一般的になっている。 Windows OSでUnicode文字を入力するには、OSに標準で付属している［アクセサリ］－［システムツール］－［文字コード表］アプリ（Windows 8.1以降なら［Windowsアクセサリ］－［文字コード表］）を使うか、IMEの
「GitHubのPull Requestを簡単にチェックアウトするたった1つの方法」のaliasを作った - くりにっき
元ネタ .gitconfig 使い方 使った図 【おまけ】.gitconfig の aliasで登録したコマンドから引数を取得する方法 元ネタ sinsoku.hatenablog.com 便利なんですがコマンド長すぎて覚えられないのでaliasにしました .gitconfig [alias] fpr = "!f() { git fetch origin pull/$1/head:pr/$1; }; f" コマンド名が気になる人は適宜変えてください 使い方 git fpr <PullRequest ID> で pr/<PullRequest ID> にbranchが作られます 使った図 [sueyoshi_go@YG41-08546.local] ✓ ~/workspace/github.com/sue445/chrome-gitlab-notifier (master) [sueyosh
検索神として紹介されてしまいました（汗 | とまじぃさんち
現代人にとって、GoogleやYahooなどで調べ物をするという行為は生活の一部のような存在となっています。 そして、その能力には、個人差があるのではないかな？という話です。 検索能力は高いと言われることが多い自分ではあまり自覚ないんですが、誰かに質問とかされて、検索してあげると 「えぇ？？わたしさがしても見つからなかったのに～？ どこに載ってたんですかぁ？？」的な事を言われることは多々あります。 って事で今回の記事はMikinoteさんの件で検索かけた時の過程を例に俺的検索を説明しようと思います。 だいたいはググれば出てくる今回のMikinoteさんのipod用のHDDの件。 これも俺個人的にはまったく知識がなかったので、情報源はMikinoteさんの記事のみです。 キーワードとしては 東芝製160Gbyte1.8インチこの3つ。 って事でとりあえず「160G 1.8」でググってみたわけ
第2回 アコーディオンメニューのアニメーション | gihyo.jp
今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。 サンプル1 CSS3：Accordion menu by rollover メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として、サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で、メニ
GitHubのPull Requestを簡単にチェックアウトするたった1つの方法 - アジャイルSEの憂鬱
みんな知ってるものだと思ったけど、あまり周りで知ってる人がいなかったのでブログに書いた。 こういう釣りタイトルっぽいブログ、一度書いてみたかった。 参考 Checking out pull requests locally - User Documentation 参考というか、そのままだけど。 方法 Pull Requestの ID を BRANCHNAME にfetchします。 *1 $ git fetch origin pull/ID/head:BRANCHNAME ブランチをcheckoutします。 git checkout BRANCHNAME これだけです。forkした人のリポジトリを remote add する必要はないです。 おまけ マージ後のsha1 ちなみに、Pull Requestのマージ前だと、 pull/ID/merge を使うこともできます。 $ git fet
Google Docsのスプレッドシートで多言語対訳表が簡単に作れるよ - 太陽がまぶしかったから
対訳表を作るのが面倒 システム設計をする時に、データベース名や変数名や表示名などを決めるのが面倒だ。一般的には英字文字列で作るのだけど、ローマ字で「kokyaku」とか付けるのはダサいし、いちいち辞書を引いていくのは億劫。 多言語対応のために表示名をフランス語にするみたいな要件もでてくるが、これらの作業の下準備を実現する手段として、Google Docsのスプレッドシート（表計算ソフト）の翻訳関数を利用する方法が考えられる。 =IF($A2<>"", GOOGLETRANSLATE($A2,"ja","en"),"") 指定セルの内容を翻訳するには「GOOGLETRANSLATE(値,ソース言語,ターゲット言語)」関数を入力する。例えばセルの計算式に上記式を入力すると「A2セルの内容がある場合にA2セルの値を日本語から英語に翻訳する」という意味になる。 スプレッドシートで多言語対訳表を作る
JavaScriptでbaseを指定して相対URLを絶対URLに変換する - 葉っぱ日記
メモがわり。 baseとなるURLを指定して相対URLを絶対URLに変換するには、ChromeやFireofxではURLUtilsを用いて以下のように書くことで簡単に実現できる。 var absolute = (new URL( "foo", "http://example.jp/bar/baz" ) ).href; // http://example.jp/bar/foo IEではURLコンストラクタはサポートされていないが、IE9以上ではDOMParserやcreateHTMLDocumentを使って現在のDOMとは分離したdocumentを生成し、その中に<base>要素を用いてbase URLを指定し、そのdocument内で<a>要素を用いて相対URLを絶対URLに変換するという手段によって相対URLを絶対URLに変換可能である。 function getAbsoluteUrl(
Disabling android's chrome pull-down-to-refresh feature
I've created a small HTML5 web application for my company. This application displays a list of items and everything works fine. The application is mainly used on android phones and Chrome as browser. Also, the site is saved on the home screen so Android manage the whole thing as an app (using a WebView I guess). Chrome Beta (and I think also the Android System WebView) has introduced a "pull down
脱jQuery Tips Advent Calendar 2015 - Adventar
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
npmのあまり知られてない機能 10選 - from scratch
なんか最近Twitterとか職場でも「npmの機能でそんなのあったんだ」って言われること多いので、説明していきます。 ちなみにタイトルにとりあえず10選って書いたけど、あんまりたくさん思いついてないのに、10選って書いてしまったので最後の方は微妙かもしれません。 1. npm installは npm i でも同じことができる まぁ単純なショートカットですね。isntallとかtypoしてても空気読んでくれるんですが、短いほうがいいよねってことで。 # npm installって書くのも $ npm install socket.io #npm i って書くのも同じ $ npm i socket.io # ちなみに --saveは -S, --save-devは -D にできる $ npm i socket.io -S $ npm i mocha -Dショートカット小ネタ。 2. npm
Redis 本番障害から学んだコードレビューの勘所
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Redis不適切利用による問題は本番運用が始まってから顕在化することが多く、時限爆弾みたいな存在です。事前に防ぐにはコードレビュー段階で叩くしかありません。 Redisはスクリプト言語と相性が良く、適切に利用するとRDBと比較し驚くほど高速なプログラムを組むことができます。昨年尊敬する先輩にコードレビューで斧100本くらい(レビューコメント)投げられて血まみれになりつつ学んだことを、まとめて書いてます。概要は『消えても良いデータならRedis』 Redisのメモリが溢れたら... （この話は事実ではなくファンタジーです。） 深夜電話で叩
git commit --fixup とは何か - 詩と創作・思索のひろば
git commit --fixup というオプションの存在を最近知って調べた。 ヘルプとリリースノートより "git commit" learned the --fixup and --squash options to help later invocation of interactive rebase. Git v1.7.4 Release Notes --fixup=<commit> Construct a commit message for use with rebase --autosquash. The commit message will be the subject line from the specified commit with a prefix of "fixup! ". See git-rebase(1) for details. 1.7.4 から入って
最強のSSH踏み台設定 - Qiita
追記：openssh-7.3 以降なら ProxyJump や -J が使えます ホスト名を + で繋げることで多段Proxy接続も簡単に、がコンセプトだった本エントリの設定ですが、OpenSSH 7.3 から ProxyJump という設定が使えるようになったので、使えるなら ProxyJump を使う方が健全だし柔軟で使い勝手も良いのでそちらを覚えて帰ることをオススメします。 使い方は簡単で以下のような感じです。多段も行けるし、踏み台ホスト毎にユーザ名やポート番号を変えることも出来ます。 # 1. bastion.example.jp -> internal.example.jp ssh -J bastion.example.jp internal.example.jp # 2. bastion.example.jp -> internal.example.jp -> super-de
地震や火事など緊急時に使うgit-fireのススメ - Qiita
全国のGit使いの皆様はこんなことを考えたことはありませんでしょうか？ 「もし今火事や地震が起こった時にすぐ作業中のものを何とかできるだろうか・・・？」と。 そんな時にはこれ、 git-fire 使い方 使い方は簡単。 まずはgit-fireをインストール $ git-fire "やばい" Switched to a new branch 'fire-master-[メールアドレス]-1444060029' [fire-master-[メールアドレス]-1444060029 bc88227] @a 1 file changed, 13 insertions(+) create mode 100644 index.html Counting objects: 3, done. Delta compression using up to 4 threads. Compressing objec
8 Useful and Interesting Bash Prompts - Make Tech Easier
Many people don’t think of the command line prompt as a useful element, or even pay it much attention. However, a useful prompt can change the way you use the command line, and by extension, your system. This article shows you a number of useful and interesting Bash prompts with examples. Note that we begin with the prompts themselves, then offer some further instructions on how to work with them.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeの複数タブを新しいウィンドウに切り出したり別ウィンドウに移動したり閉じたりする方法 - Qiita
Qiitaの記事が.mdで取得できることを知った - Qiita
elm-platform/installers/BuildFromSource.hs at master · elm-lang/elm-platform