box-shadow を使って複数の border を付ける方法 - Qiita
CSS を使って 1 つの要素に複数の border を付ける上手い方法 1 はないものかと調べていたところ CSSで複数のボーダーを付ける方法 | Ri-mode Rainbow | No:1134 という素晴らしい記事を見つけたので実際に試してみました。 こんな感じの枠が作れます。(HTML 内の記述は div 1 つだけです) このテクニックは CSS3 で導入された box-shadow プロパティを使って擬似的に border を実現するというものです。box-shadow には複数の値を指定できるという仕様を応用します。 確認したブラウザは Google Chrome (42.0), Firefox (35.0), Opera (27.0), IE 9 ～ IE 11 です。 box-shadow で枠を付ける方法 以下のように box-shadow : 0 0 0 <幅> <
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
git commitをやり直しする＆取り消しする(「get commit --amend」と「git reset」) - hogehoge foobar Blog Style Beta
git commitを実行あとでコミットをやり直したり、コミット自体を取り消す方法です。 直前にしたコミットをやり直す（git commit --amend） 直前にしたコミットをやり直す場合、「git commit --amend」を使用します。 例えば、直前のコミットログが以下のような状態だったとします。 実は直前のコミットに含めるべきであった「hoge.txt」が含まれていませんでした。 コミットログ(git commit --amend 実行前) $ git log commit cca638b48b4c8be7ad5432f7882497534b04e2b4 Author: mrgoofy <hogehoge@example.com> Date: Wed Sep 8 23:03:57 2010 +0900 2nd Commit.-> New Add File : bar.txtこ
amazonの検索結果からボッタクリ価格業者を消す方法 | N-Styles
ニンテンドーSwitchが発売されて1ヶ月以上経過したが、これほどまでに入手困難な状態が続くとは思わなかった。 先日発表されたSplatoon2の発売日である7月21日までに、解消されるか心配だ。 悲しいことに、こういった品薄商品が現れると「プレミア価格」という名の不当価格を提示した転売業者が湧いて出る。 amazonには、販売業者や古物商がシステムを借りて販売を行う「マーケットプレイス」というシステムがあり、amazon自身が販売する商品と、amazonと提携した別業者が販売する商品が混在する。 2017年4月14日現在、Switch本体はamazon自身が販売する商品は品切れしており、マーケットプレイスにおける価格は4万円近い金額になってしまっている。 本体に関してはある意味しょうがない気はするものの、PROコントローラやJoy-Con充電グリップなどの周辺機器ですら品薄で、ボッタクリ
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
jQueryで下からニョキッと動かす方法
軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
知っておくと便利！CSSの小技・テクニックのまとめ -CSS Protips | コリス
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ
困った時の逆引きGitメモ(コマンドライン編) - MyEnigma
わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉posted with カエレバ湊川 あい シーアンドアール研究所 2017-04-21 Amazonで探す楽天市場で探すYahooショッピングで探す 目次 目次 はじめに コミットメッセージにdiffを表示する 前回コミットした時の状態に戻す 直前のコミットをなかったコトにする 直前のpushをなかったことにしたい。 履歴を残さない 履歴を残す(より安全) 無理やりリモートリポジトリにローカルを合わせる 間違えたgitのaddを取り消す 一つ前のコミットを修正 git pullした時にコンフリクトしたファイルを調べる 更新されたファイルの一覧を表示する ブランチのグラフを見たい gitで管理していないファイルやディレクトリをすべて削除する。(gitinore対象のファイルも含めて) 過去のコミッ
ページ内リンクをjQueryでスムーズスクロールした際のずれを解消する方法
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/pasolavo/pasolavo.com/public_html/web/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/pasolavo/pasolavo.com/public_html/web/wp-content/plugins/crayon-syntax-highlighter/c
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
![[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7854364c5c81764331231720a32437f4c3a3926/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032501.png)
HTML/CSSで簡単な吹き出しの作り方 - Qiita
社内向けに書いたドキュメントが好評だったので公開しちゃいます。 基本編1 本体と三角形を分けて実装します <div class="balloon"> こんにちはこんにちは！ <div class="triangle"></div> </div> .balloon { position: relative; width: 200px; height: 30px; background-color: #ccc; text-align: center; } .balloon .triangle { position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: 10px solid #ccc; border-left: 10px solid transparent
Git pullを使うべきでない３つの理由 · DQNEO日記
git pullは使わなくてもよい 初心者はgit pullを使わない方がよい 我々ソフトウェアエンジニアは勉強が大好きなので、コマンドがあるとそれを勉強して使いこなさなければいけないと考えがちですが、ときには「覚えない、使わない」という発想も大事なのではないでしょうか。 以下にその理由をのべます。 git pullは使う必要がない git pullを使わないとできないこと、というのはありません。 使わなくても全然困りません。 git fetchとgit mergeとgit rebaseだけですべての用は足せます。 私はチーム開発でGitを本格的に使い始めて数か月経ちますが、普段の作業でgit pullを使ったことはないしそれで困ったこともありません。 git pullを使わなければ、余計な落とし穴に落ちない git pullには落とし穴があります。 初心者はたいていその穴に落ちます。 「
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに作成するWebサイトの目的と構造テーマ作成前に用意するものと環境テーマの構造を（触り程度だけでも）理解するHTMLからテー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
Loading...
