git/index.lockを解除し無事にadd/commitできました。 | ハイパー猫背
なんかよく分からないが怒られた。 .git/index.lockとは エラーの文言的には，index.lockってファイルが存在しているからエラーになってるっぽい。 なんや，index.lockって。。 git/index.lockとは 同じgitのリポジトリ内で同時に複数の処理を行わないための排他制御を行うもの。 つまり，index.lockが存在するということは，裏で他のgit操作が行われている。 ならば，他のgit操作が終了するのを待てばいい。 もちろん，時間をおけばgit操作できるようになるのだが，「そんなの待ちきれないよ」って方は別の解決法で。 git/index.lockを削除 index.lockを削除してしまっても構わない。
Snow Monkey v11.3.2 をリリースしました
こちらの環境でいろいろ試してみたのですが全く再現できず、どうしようもなくなったのでトピックを作成してくださった NEPPIE さんに「NEPPIE さんの環境でテストさせてもらえませんか？」と訪ねたところご快諾いただけまして、なんとか解決することができました。NEPPIE さん、ありがとうございました！！ で、結局なにが原因だったのかを解説。 Snow Monkey のブログカードは、URL が埋め込まれたときにそのページを解析しにいって、取得した情報をキャッシュし、そのキャッシュをもとにブログカードを表示する仕組みになっています。 で、フロントでキャッシュが切れているページが表示されたときは js でregister_rest_route で登録したルートにアクセス同じようにページを解析しにいってキャッシュを生成キャッシュをもとに生成されたブログカードの HTML を取得ブログカードを表
z-indexの使い方：CSSで重なり順を指定する
今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。
【CSS】メディアクエリとブレイクポイントの書き方 2017年版 レスポンシブデザインの基本
【CSS】メディアクエリとブレイクポイントの書き方 2018年版 レスポンシブデザインの基本 by shirushiru · 公開 2017年4月7日 · 更新済み 2018年1月19日 レスポンシブデザインの基本 メディアクエリとはメディアクエリとは、CSS2で可能だった「media」タイプを発展させた、CSS3の新しい要素です。 mediaタイプの主なものは、 screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて) などが挙げられます。 CSS2は上記のように、端末のタイプごとにスタイルを切り分けられることができましたが、それが限界でした。 たとえば、「ディスプレイ」といっても、今やスマホ、タブレット、PCと様々なデバイスが存在しており、それを一括りにしていては（端末毎にサイトを作る場合は別ですが）、見づらい
【YouTube】動画埋め込みサイズ・早見表【最適なピクセル数はこちら】
この記事を読むと、以下の問題が解決できます。 YouTubeの動画埋め込み画面で、動画のサイズが指定出来なくなってしまった。 手動で数値を入れ替えればサイズが変えられるので、適切なサイズをサクッと知りたい YouTubeでWebページやブログに動画の埋め込みをしたことがある人ならお気づきだと思いますが、動画サイズが固定になっており、カスタマイズすることが出来ません。 以前のYouTubeの動画埋め込みは、この画面で自由にサイズを指定できたのですが、2019年1月時点で、そのようなカスタマイズは出来なくなっています。 対策としては、HTMLタグの数値を手動で書き換えることでサイズを変更出来ます。 しかし、それでサイズを変えることが出来るのになぜこのカスタマイズ画面からサイズの指定項目を消したのでしょうね？ 謎です。 というわけで、動画のアスペクト比ごとに、どのサイズが最も適切なサイズとなるか
アイコン型WebフォントをCSSでデザインしたボタン10個
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
JavaScriptでvideoを操作する
videoタグをJavaScriptで色々操作してみます。 対応ブラウザ videoが対応しているブラウザはこちら。 IE8以下が非対応なので、対応が必要な場合はIE8以下ではFlashにするなどの処理が必要です。 あと、スマホでは自動再生が不可だったり、再生時の挙動が機種によって違ったりなど色々と問題が多いので、対応する場合は注意が必要です。 サンプルコード HTML <video id="video" width="480" height="270" controls> <source src="./movie.mp4" type="video/mp4" /> </video> <div id="time"> <span id="currentTime">0</span> / <span id="totalTime">0</span> </div> <div id="control">
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
【jQuery入門】offset()で要素の位置を取得・設定する方法！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
こんにちは、ライターのマサトです！ 今回は、jQueryで対象要素の位置座標を取得することができる「offset()」メソッドについて学習をしていきいましょう！ この記事では、 「offset()」とは？ offset()の使い方 「offset()」「position()」の違い スクロール量をoffset()で取得する方法 offset()の注意点 「offset()」とは？ それでは、まず最初に「offset()」メソッドについて基本的な知識から学習していきましょう！ 「offset()」は、画面上（document内）に配置したHTML要素の表示位置を座標で取得できるメソッドになります。 次のような位置座標をイメージすると分かりやすいでしょう！ このように「offset()」では、対象となるHTML要素の左上を原点としたX・Y座標を取得することができます。 これにより、jQuery
要素の表示位置を取得／設定するには？（offset）
offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得／設定する基本的な方法を説明する。 ← 前回 連載 INDEX 次回 → 要素のドキュメント上の表示位置を取得／設定するには、offsetメソッドを利用します（ただし、不可視の要素に対しては動作しません）。なお、類似のメソッドにpositionメソッドがありますが、これは現在の要素の親要素からの相対位置を取得するためのもので、機能が異なります（次回のTIPSで詳しく説明します）。 要素の表示位置を取得する まずは、位置情報を取得する方法からです。以下は、指定された要素（＝<div id="child">要素）の位置情報を表示するサンプルです。
ヘッダ固定時のアンカーリンクずれ解消法｜assassin@Web屋
position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する例えば、以下のようなソースに実装すると <div class="header"> ヘッダー </div> <div class="content"> <a href="#link01">コンテンツ</a> </div> <div class="content" name="link01" id="link01">リンク先</div>ヘッダの高さが80pxとした場合 .header { width: 100%; min-width: 960px; height: 80px; position: fixed; lef
Webページの背景に動画ファイルを埋め込む方法
動画は静止画と異なり、backgroundプロパティに動画ファイルを指定することはできないため、ちょっとした工夫が必要になります。 今回は3つの例をサンプルとしてあげていきます。 1.Video要素のwidthを100％にしてブラウザ幅で伸縮する HTML <div class="video-container"> <video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video> <div class="video-sidebar"> <h1>Title</h1> <p>This video is sample.</p> </div> </div> CSS .video-container { position: relative;
JavaScript：連続クリック対応方法 - 覚え書き.com
画面上に設置したボタンを連続でクリックされた場合に予期しない挙動を引き起こす事が良くあります。 そういう場合の対応方法についてメモしておきます。 基本的に対応する方法としては以下の様な方法があります。 ボタンのdisabled属性をtrueにする フラグを設置してクリックされたらフラグをfalseに設定してイベント処理されないようにバイパスする 以下はjQueryベースで連続クリックされた場合にフラグを使用して判定する方法です。 jQueryサンプル // 連続クリック防止フラグ var clickFlg = true; jQuery(function($) { $(".button").on("click", function() { if(clickFlg) { // イベント処理中はフラグをoffにします。 clickFlg = false; // クリック処理を実施 } else
【CSS】Webアプリ化するときに有効！テキストや画像を選択不可するCSS Tips | unitopi - ユニトピ -
こんにちは。 本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。 最近ではネイティブアプリ（それぞれの言語でストアでダウンロードするアプリです）ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。 さっそくコード -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and
webmanab.html
ファイルを納品するとき、「差分ファイルのみをください」と言われて断れない人のためのGitで差分抽出するtipsです。 git archive と git diff を使った差分抽出 コマンドはgit archiveとgit diffが組み合わせることで実現します。 git archive [to_commitID] `git diff --name-only [from_commitID] [to_commitID] --diff-filter=ACMR` -o diff.zip ファイルをアーカイブする git archive git archive は、指定したブランチをまるっとアーカイブするコマンドです。オプション-o archive.zip で、ファイル名を指定します。 git archive [commit_ID] -o diff.zip commit ID は git log
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XMedia RecodeでMOVからmp4へ変換する時のおすすめ設定5パターン
colorbox.jsのモーダルウィンドウでiOSの背景を固定することができた！ | ホームページ制作、Webサイト制作、Web制作｜新潟デザイン制作会社スリー、THREE
【制作Tips】画面解像度一覧表 | Webデザインラボ
游書体を加えたCSS font-family
flexibility.jsとカラム落ち – Qroon