inline-blockを並べた場合に発生する「隙間」を消去するCSS
IEを含めた最近のブラウザでは珍しくなくなったinline-block。 このinline-blockを利用する場合に発生する「隙間」を改善する方法です。 原因は改行コード 下記のようなHTMLを用意しました。 リストタグを使ったインラインブロックを実現しようとしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block
CMSにもうずっと疑問を持ってますという話 - 業務用iOSアプリのfeedtailor社長ブログ
僕はいわゆるCMSが余り好きではありません。随分前に子会社のSYNCNEL事業のオフィシャルサイト(あるWeb屋がWordpressで制作)で苦い経験をしてからは特に。このブログもWordpressなので余り大きな声で言えたもんじゃないですけど(笑) でも、ホントはもうWordpressやめたい。ってかCMSにそもそも疑問を持ってます。 CMSの「おおげさ」感 サーバにシステム入れちゃうと、plug-inのupdateとか、CMS本体のupdateとか気になるし、ってか相性とかもあって出来なかったりもするし、そもそもシステムの為に必要なphp等の言語やDBやミドルウェアのupdateも気になって、脆弱性気になるけど…と余計な心配をしなくちゃいけません。 運用面でも、サイト全体の世代管理もしにくいし、ビジネス理由で別サーバに移転しようと思っても大変、htmlの構成を読み解こうとしてもテーマや
URLを取得したり書き換えたりする
URLを取得したり、書き換えたりするサンプルです。 サンプルコード(URLを取得) JavaScript // 現在のURL全体を取得 document.getElementById('href').innerHTML = location.href; // https://cly7796.net/blog/sample/location-url/index.html?param=abc#hash // 現在のURLのプロトコル部分(「http:」や「https:」)を取得 document.getElementById('protocol').innerHTML = location.protocol; // http: // 現在のURLのホスト情報を取得 document.getElementById('host').innerHTML = location.host; // cly
jquery href 取得 - Google 検索
jQueryでaタグのURL(href)取得方法 ... この記事は約1分で読めます。 jQueryでaタグのURLを取得する方法はこれ！！ $('a').attr('href');. 実際にここのURLを取得してみると…
bxSliderがInternet Explorerで動かない場合の対処法
jQueryスライドショー bxSlider がInternet Explorerで動かない場合の対処法をご紹介します。 Internet Explorerではjavascriptのコード解釈が他のブラウザと少し違うようで、そこを修正しないとbxSliderが動作しない場合があります。 IEでbxSliderが動かない時は、まずは単純な記載ミスのチェックから始めて、それからjavascriptコードをチェック、それでもダメならjQueryのバージョンを変えてみてください。
日本語も等幅フォントの『Source Han Code JP』をMacにインストールする | com4tis
日本語も等幅フォントの『Source Han Code JP』をMacにインストールし、 SublineTextに反映します。 Source Han Code JPとは 『Source Han Code JP』は日本語にも対応している等幅のフォントになります。 等幅のため、コーディングの際に見やすいのが特徴です。 詳しくは参考サイトを御覧ください。 Source Han Code JPをダウンロード 『Source Han Code JP』は無料で使用でき、Githubに上がっています。 GithubのSource Han Code JPへいき、フォントをダウンロードします。 Source Han Code JPフォントをMacにインストールする ダウンロードしてきた『Source Han Code JP』を解凍し、 Spotlight→fontbookを検索→fontbookを開きます。
無料でIEのマルチバージョンテスト「Modern.IE」開発での利用時の注意点 - ふろしき Blog
Microsoftは、6以降の全てのIEの動作をテストできる手段として、「Modern.IE」というサービスを提供しています。 タイトルでは無料と言っていますが、実際には一部のサービスのみが無料となっています。 本来なら有償のサービスを売り込みたいところなのでしょうが、残念なことに無料のサービスの方が、SI業界の人間であれば待ってましたと言わんばかりの機能性を兼ね備えてしまっています。そのサービスとは「Modern.IE VM」です。 Modern.IE VMとは？ Modern.IE VMとは、90日間無償で利用できる、IEテスト用のVMイメージです。ライセンスが切れても、正規の手順を踏めば再びライセンスされるため、この点で単なる試用版とは異なる特性を持っているように思えます。Windows版の場合、以下の仮想化製品のVMを提供しています。 Hyper-V(Windows Server
タグの入れ子ルール
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
word-breakとword-wrapはややこしい
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
スタイルシート［CSS］/テーブル/セル内で自動改行させない - TAG index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> table { width: 250px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } td.example { white-space: nowrap; } </style> </head> <body> <table> <tr> <td class="example">サンプルテキストサンプル</td> <td>サンプルテキストサンプル</td> </tr> </table> </b
IE 確認用の仮想マシンの構築 (modern.IE) - Qiita
構築した環境(ホストOS) ホスト OS OS：Windows 7 Professional Service Pack 1 32bit| CPU：Intel(R) Core(TM) i5-2520M @ 2.50Ghz Memory: 4.00 GB (3.17 GB使用可能) ゲスト OS Platform：VirtualBox OS：Windows 10 Browser：Internet Explorer 11 Windows XP もやってみたけど、おおむね同じ手順で OK！ IE で日本語表示できない件は後述のメモを参照。 必要な仮想マシンのダウンロード 1. modern.IE にアクセス 2. 仮想マシン を選択 3. [Select Virtual Machine] から必要な仮想マシンを選択 IE11 on Win10 4. [Select Platform] からプラット
【JavaScript】IE9以前でconsole.logを使用しているとハマる - Qiita
##はじめに FirefoxとかChromeなら問題ないがIEだと上手く動作しないとかはよくある話だと思う。その要因の一つであるconsole.log使用時のエラーに、つい最近ハマったのでメモしておく。 ##対処法 そもそもなぜconsole.log使用時にエラーが出るのかといえば、IEがConsoleAPIに対応していないために、window.consoleの時点でundefinedを吐くからである。対処法としては、 // consoleプロパティとlog関数作ってとりあえずエラー回避 if(!window.console) { window.console = { log: function(msg){} }; }
結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari
36,087views／投稿 2015-08-16／更新 2019-02-17 ［この問題はiOS9から解消されてます。］ iOSのSafariで、:hoverに事件が起きています。 CSSでaタグに:hoverで何かの変化を施してある場合は、そのマウスオーバー変化が１クリック換算で止まってしまい、リンク先に飛ばない確率が高い感じです。要は２回クリックしないとハイパーリンク先にページ遷移しないです。iOS 8.4.1のiPhoneやiPadなどタッチデバイスでの話です。 １回タップ（a:hover描画処理のみで止まる） ２回タップ（やっとリンク先に飛ぶ） テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当していそうです。 ［追記］サンプルページを作りました。iOSデバイスで確認してみてください。Chromeもどうやら対象のようです。 :hover事件の
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js | N-LOG
Demoを見る HTML <ul id="btn"> <li data-group="all" class="active alpha">ALL</li> <li data-group="red" class="alpha">RED</li> <li data-group="blue" class="alpha">BLUE</li> <li data-group="green" class="alpha">GREEN</li> <li data-group="yellow" class="alpha">YELLOW</li> </ul> <ul id="animationList"> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["yellow"]'><span class="ye
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queriesの指定について - Qiita
svg 表示されない htaccess - Google 検索
Home | Shuffle.js