サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
参議院選挙2025
code-plus.jp
gitで「SSL certificate problem: self signed certificate」と表示された時の対処法 Dec 3, 2013 SSLの証明書に問題がある場合(このWebサイトのセキュリティ証明書には問題がありますと表示されると思います。)、「SSL certificate problem: self signed certificate」といったメッセージが表示され、リモートリポジトリからcloneできません。 対処法として以下のように入力します。 git config --global http.sslVerify false これで.git/configに証明書をチェックしないように設定されるので、git cloneなどした際にエラーメッセージが表示されなくなり、通常のようにできるようになります。 参考URL git でオレオレ証明書のサーバを使う GIT
Feb 12, 2013 wbrは「word break」の略です。文章中で改行してもいい位置を示します。あくまで改行する位置ではないので、改行する位置を指定する場合は<br>を使用しましょう。 領域内に収まりきらないときに、wbr要素で改行位置を指定していると、テキストがその位置で折り返されます。 wbr要素の使い方 <p>abcdefg<wbr>hijklmn<wbr>opqrstu<wbr>vwxyz<wbr>abcdefg<wbr>hijklmn<wbr>opqrstu<wbr>vwxyz<wbr>abcdefg<wbr>hijklmn<wbr>opqrstu<wbr>vwxyz<wbr>abcdefg<wbr>hijklmn<wbr>opqrstu<wbr>vwxyz<wbr>abcdefg<wbr>hijklmn<wbr>opqrstu<wbr>vwxyz</p> abcdef
Jan 28, 2013 SVG形式の画像の表示はInternet Explorerの場合、IE9以上でしか表示できません。IE6、IE7、IE8は基本的にはPNGやGIF形式の画像を表示することになります。次に書いていく方法で、JavaScriptを使わずにCSSのみで、IE9はSVG、IE6、IE7、IE8はPNGといった表示方法が可能です。 ※但し背景画像に限ります。 参考サイト Cross-Browser CSS Technique for SVG Sprites with PNG Fallback CSS3のrgba()を使ってIE6、IE7、IE8に代替画像を表示させる。 .svg-or-png { background: url(img/hoge.png) no-repeat; /* for IE7 IE8 */ background: rgba(0,0,0,0) url(i
Oct 3, 2013 スマートフォンやタブレット端末の高解像度化によりSVGを使用するサイトも段々と増えてきました。 ※SVGの説明については省略します。 ただ、Modernizrなど、何らかの対策をしない限り、PCブラウザではIE8以下、スマートフォンではAndroid3.0未満で表示ができないのが現状です。 IllustratorなどでアイコンなどをSVG形式で書き出せますが、そのまま使用するには無駄な記述があり容量が少し多めです。そこでsvgoを使用して軽量化します。 svgoの使い方 GUIのツールもありますが、 そんなに難しくないので今回は黒い画面を使用します。 svgoのインストール ターミナルを開いて下記のコマンドを入力すればインストールは完了します。 sudo npm install -g svgo SVGの圧縮 cdコマンドでSVGファイルがあるディレクトリまで移動しま
Jan 30, 2014 バグなのか仕様なのかよく分かりませんが、Androidでlabel要素とinput要素を紐付け、入力フィールドにフォーカスした際にlabel内のテキストが入力フィールド反映されてしまうという事象が起きました。 なお、簡略的にinput要素と説明していますが、実際にはテキストを入力できる要素全てにあたります(textarea、input type=”tel”など)。 説明だけでは分かりづらいので具体的な画像とともに説明していきます。 具体例 最初の状態です。プレースホルダーを指定していますが、特にあってもなくても変わりません。なお、端末は【GALAXY SⅡ WiMAX ISW11SC】を使用しています。 HTMLは下のようなものとなります。 <label for="test">テスト</label> <input type="text" id="test" pla
Aug 15, 2013 基本的には今使ってるもの中心ですが、僕のメインエディタであるSublime Text 2のプラグインをまとめてみました。 ※細かい設定は省いています。 コーディング関連 Emmet Zen Codingの次期バージョン。主にHTMLを書く際に Hayaku Emmet(Zen-Coding)を上回るCSSの展開 例)bdrds→border-radiusなど Dummy Image Generator [Dynamic Dummy Image Generator](http://dummyimage.com/ "Dynamic Dummy Image Generator")で使えるダミー画像の埋め込み BracketHighlighter タグやクォーテーションマークなどのハイライト表示 SCSS SCSSの補完 Compass Compassの補完 jQuery
Jan 20, 2014 昨年末にMac Book Pro Retina 15inch を購入しました。色々とアプリをインストールしたので、その中からおすすめのアプリを紹介したいと思います。 KeynoteやXcode(iOS simulator)などデフォルトに近い形のアプリの紹介は省きます。 なお、どちらかというとフロントエンドの人向けです。 Sublime Text エディタです。主にHTMLやCSSを書くのに使ってます。Web(PHP) Stormなどもたまに使ったりしますが、慣れてないこともあり、Sublime Text 2に落ち着いています。⌘(ctrl)+Dによるmultiple selectionが便利です。 Sublime Text Alfred 高機能ランチャーソフトです。最近はAlfred Workflowを使用して、よりいっそう便利に使えてます。 Alfred Ap
Mar 19, 2013 HTMLの文章中にて<br>で改行位置を指定していると、Media Query等でスタイルが切り替わった際に改行が残ってしまい、デバイスによっては見た目上いいとは言いがたい状態になってしまいます。 CSSを使用しての2つの対策方法を紹介します。 参考サイト:“Responsive Line Breaks,” an article by Dan Mall br要素にdisplay:noneを指定 まず、1つ目はbr要素にスタイルを充てる方法です。「display:none」を指定することで改行をなくします。例文では、スクリーンのwidthが480px以下になると改行がなくなるイメージです。 HTML <p>これはbr要素を使用した際の例文です。<br class="br-sp">まず一つ目の改行位置の変更方法を紹介しています。</p> CSS @media scre
基本的には今使ってるもの中心ですが、僕のメインエディタであるSublime Text 2のプラグインをまとめてみました。 ※細かい設定は省いています。 コーディング関連 Emmet Zen Codingの次期バージョン。主にHTMLを書く際に Hayaku Emmet(Zen-Coding)を上回るCSSの展開 例)bdrds→border-radiusなど Dummy Image Generator Dynamic Dummy Image Generatorで使えるダミー画像の埋め込み BracketHighlighter タグやクォーテーションマークなどのハイライト表示 SCSS SCSSの補完 Compass Compassの補完 jQuery jQueryの補完 CSScomb CSSのプロパティの自動整列 WordPress WordPressの補完 SublimeLinter
通常、data URI Schemeを作成しようとすると、「画像を作成→base64エンコード→CSSに記述」という流れになり、結構手間がかかります。またCSSには元の画像名などが記載されないため、元ファイルが何なのか分かりづらく、管理もしづらくなりがちです。 しかし、Sass+Compassを使用することで、簡単にdata URI Schemeを作成し、管理もしやすくすることができるようになります。 参考:CompassでデータURI スキーム scssファイルへの記述方法 以下のように、CSSでは「url」となる部分を「inline-image」に変更するだけです。 (※クォーテーションも必要です。) //サンプルアイコン .icn-sample { background-image: inline-image("img/sample.png"); } 何故、管理しやすくなるかとい
HTMLの文章中にて<br>で改行位置を指定していると、Media Query等でスタイルが切り替わった際に改行が残ってしまい、デバイスによっては見た目上いいとは言いがたい状態になってしまいます。 CSSを使用しての2つの対策方法を紹介します。 参考サイト:“Responsive Line Breaks,” an article by Dan Mall br要素にdisplay:noneを指定 まず、1つ目はbr要素にスタイルを充てる方法です。「display:none」を指定することで改行をなくします。例文では、スクリーンのwidthが480px以下になると改行がなくなるイメージです。 HTML <p>これはbr要素を使用した際の例文です。<br class="br-sp">まず一つ目の改行位置の変更方法を紹介しています。</p> CSS @media screen and (max-w
愛用エディタSublime Text2の記事です。何番煎じか分からないですが、これから導入を考えている人などいたら、参考になれば幸いです。Mac限定のエディタなどが多い中、Windows,Mac,Linuxで動くように用意されているのは嬉しい限りですね。 余談ですが、使い始めた当初私は、Windowsをメインマシンとして使っておりエディタ難民と化していたので、Sublime Text2を使用した時は使いやすさに感動したとともに、Windows用も作ってくれてありがとうと感謝しましたw インストール まず、公式サイトからダウンロードをしましょう。 Sublime Text – Download ダウンロードが完了したら、他のアプリケーションと同じようにインストールを開始しましょう。この段階では特に変わった操作などは必要としません。 Package Controlのインストール Subli
ul li:first-childとかでよく使用すると思われる、first-child擬似クラスですが、親要素の中の特定の最初の要素にかかるわけではありません。あくまで子要素の最初の要素です。dlを例に見て行きましょう。 first-childが効くのは最初の子要素 HTML <dl> <dt>タイトル</dd> <dd>説明</dd> </dl> CSS dl dd:first-child { font-weight:bold; } 上記のような例では、first-childは効きません。親であるdlの中のfirst-childはdtだからです。ddは最初の子要素ではないので、対象から外れます。 このようなパターンでCSSのみで完結させたいのであれば、隣接セレクタやCSS3のnth-childあたりを使って対応しましょう。
SVG形式の画像の表示はInternet Explorerの場合、IE9以上でしか表示できません。IE7、IE8は基本的にはPNGやGIF形式の画像を表示することになります。次に書いていく方法で、JavaScriptを使わずにCSSのみで、IE9はSVG、IE7・IE8はPNGといった表示方法が可能です。 ※但し背景画像に限ります。 参考サイト Cross-Browser CSS Technique for SVG Sprites with PNG Fallback CSS3のrgba()を使ってIE7・IE8に代替画像を表示させる。 .svg-or-png { background: url(img/hoge.png) no-repeat; /* for IE7 IE8 */ background: rgba(0,0,0,0) url(img/hoge.svg) no-repeat;
ファイルを編集した際にした際にブラウザをリロードしてくれるツールではCodeKItが有名ですが、Mac専用の上に、有料なので、SassやLESSなどを使用していない限りは使用している人はそんなに多くはないのかなと思ってます。 Tincrは無料で利用できるChromeの拡張機能です。Tincrもブラウザの更新を行ってくれるツールの一つです。 Tincrの使い方 まずTincrをChrome Storeからインストールしましょう。 Tincr|Chormeウェブストア 確認ができたら、Googleのディベロッパーツールを開いて下さい。以下のようにTincrという項目が追加されているはずです。もし、項目がなければChromeの設定から拡張機能を選択し、Tincrを有効にしてあげてください。 Tincrの項目を選択すると、次のような画面が表示されます。 以下、設定手順です。画像を参考に設定してみて
このページを最初にブックマークしてみませんか？
『https://code-plus.jp/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
