日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと
900ライセンスApache License 2.0Noto Sans CJK の配信サービス(余談)Google Fonts : Early Accessでウェブフォントとして配信されている。 Noto Sans Japanese (Japanese) ただフルサイズなので 16MB ぐらいある。さすがに、このサイズは現実的ではない（動作確認には良いかも）。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); Noto Sans CJK JP を入手するGoogle Noto Fonts からダウンロードする。 言語ごとにフォントが分けられているので「Noto Sans CJK JP」を選択してダウンロード。 zip 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入
どんなページでもテキストサイズを全体的に大きくするCSS、Javascriptの書き方は？…
どんなページでもテキストサイズを全体的に大きくするCSS、Javascriptの書き方は？ ブラウザの機能でフォントサイズを全体的に大きくしたり、小さくしたりするようなJavascriptやCSSはどう書けばいいのでしょうか？ Javascriptでページ全体を評価してフォントサイズを振りなおすのも考えましたが、既にcssがかかっていることも解釈することがとても大変そうです。 イメージとしては全体のフォントサイズを1,2倍にするとか、そういうことがしたいです。 画像やテーブルなどの幅はそのままでフォントサイズだけが大きくなるようにしたいと思っています。 body{font-size:1.2em} で比較的近い感じにはなるのですが、ヤフーのトップページで見ても、 もともと全体のフォントサイズが0.7emくらいになっているようで、1emでもだいぶ大きくなってしまいます。 Javascriptで
【小ネタ】theme-colorタグでAndroidのChromeのタブ色を変える
ここ最近、いろんなWebサイトを見ています。いつにも増して見ています。手元にiPhoneとNexus6を置いているので、それらも駆使して見ています。 そんな中、AndroidのChromeで閲覧していると、アドレスバーが通常と異なる色になるサイトがいくつかありました。どうしても試してみたくなったので、実際にやってみたのが以下の画像です。 タブ選択する時はアイコン周りにも色とアイコンが付きます。 今回は、小ネタとして、この設定方法を紹介します。 Google Developpersに設定方法が記載されており、これを参考にさせていただきました。 参考サイト: Support for theme-color in Chrome 39 for Android 対応環境Android用 Chromeのバージョン 39以降Android バージョン5(Lolipop)以降※iOSのsafariとChr
圧縮・難読化したCSSファイルを再整形してくれるツール「PROCSSOR」
先日ご紹介したCSSやJavascriptを圧縮するためのWebサービス「YUI Compressor」。 「後々編集することを考えるなら圧縮前のデータもとっておきましょう」と記しておきながらバックアップデータを白ヤギさんにむしゃむしゃいかれてしまった私。んもう…おっちょこちょいさんなんだからぁ…// で、どうにか復元しなければと思っていたところ、色々ある難読化されたCSSファイルの整形ツールの中から使いやすかった「PROCSSOR」をご紹介。 ProCSSor – Advanced CSS Prettifier なかなかしゃれたUIの「PROCSSOR」。プロセッサーと読ませるのでしょうか。しゃれてますね。 使い方は簡単。まずは難読化されたCSSを一番上のテキストボックスにコピペします。（Fileの読み込みやURLからの整形もできる様子） 次に、整形をどのように行うか、各種オプションを選
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介 | 独学Webデザイナーの覚書
最新の記事 レスポンシブWebデザインでリニューアルいたしました 2016年12月27日その他 「独学Webデザイナーの覚書」をリニューアルいたしました。ありがたいことにかなりの間更新が滞っているサイトではありますが、毎日多くのユーザーに閲覧していただきたき大変感謝しております。 今回のリニューアルについて本記事にまとめさせていただきました。 続きを読む 設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 2014年11月15日CSS フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 続きを読む 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 2013年7月31日jQuery 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 続きを読む 超便利
DOMAIN ERROR
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
Kickstrap: Enhancements for Bootstrap
Kickstrap A full version of Twitter's Bootstrap with themes, enhancements, and other goodies. Issues · · Follow @yourwebsitesUX Tweet Release Candidate due April 15th Kickstrap v. 0.9 RC will be released April 15th. Until v. 1.0, I recommend only using Kickstrap in development environments. There will be several modifications made to the overall logic of Kickstrap's implementation and workflow dur
連載インデックス「HTML5アプリ作ろうぜ！」 - ＠IT
連載インデックス HTML5アプリ作ろうぜ！ “HTML5アプリ作ろうぜ！”では、デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 Android 5.0のMaterial DesginをWebに持ち込むPolymer HTML5アプリ作ろうぜ！（13） Material DesginでWeb ComponentsでOSSでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するための方法を紹介
<DIV>ボックスをヨコとタテに段組する -2step脱テーブルスタイルシートCSSレイアウト講座-
.box1{ width: 200px; height: 100px; background-color: #FFCCCC; float: left; } .box2{ width: 100px; height: 100px; background-color: #66CCFF; float: left; } .kaijyo{ clear: left; } 段組するボックス１、２は、特別な変化はありませんが、 タテヨコの段組をするための必需品、段組解除用のボックスを新しく定義してあげる必要があります。 上の、.kaijyoのことです。 ここで、使ってるclear属性は、float属性で定義された回りこみ指定を解除する働きをもってます。 くわしくは、<DIV>をタテヨコに段組していこうで解説しております。 そして、気になるHTMLソース部分はというと、
第3回 トラバーシング編
連載目次 要素セット（jQueryオブジェクト）から、指定されたインデックス番号に対応する要素だけを取り出すには、eqメソッドを利用します。インデックス番号は0スタートです。不正なインデックス番号が渡された場合には、空の要素セットが返されます。 まずは、サンプルから見てみましょう。以下は、すべての<div>要素に対して背景色を黄色に設定し、その後、2番目の<div>要素に対してのみ枠線を適用するサンプルです。 <style type="text/css"> .box { height:50px; width:50px; float:left; margin-left:10px; } </style> ……中略…… <script type="text/javascript"> $(function() { $('div'). css('background-color', 'Yellow'
開発/html仕様 - ニンテンドーDSブラウザーWiki
html,javascript,css等の仕様いろいろ癖がある、htmlやjavascriptの仕様をまとめましょう PC版Operaの[表示]->[スモールスクリーン表示]モードが、縦長モードにかなり近い。 フォントサイズ等の違いをのぞけばレイアウト法則はほぼ同じと思われる。デバッグはまずPCでやるのが吉。 html,javascript,css等の仕様 関連リンク html 縦長モード時の特殊な挙動 縦長モード向けCSS関連について。 2画面モードで大きな画像を表示する際の注意 フォント table 表示領域 CSS width,height,margin,padding仕様 縦長モード時に無視されるっぽいプロパティ javascript(DOM) Ajax 関連リンク Opera > スモール・スクリーン・レンダリング（SSR）技術向けオーサリング http://jp.oper
float段組の基本
簡単なfloatの段組練習です。慣れて来たら、いろいろ応用してみて下さい。 注）floatを指定する場合はwidth指定で幅を指定するように心掛けましょう！ ボックスを並べる boxAとboxBを左右に並べます。形式上boxの幅と高さを指定しています。（本来の段組では、高さを指定する事はあまりありません。） パターン１ float:left;を指定してboxBを回り込ませます。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;height:100px;float:left; } パターン２ boxAにfloat:left;を指定、boxBにfloat:right;を指定。 #boxA { width:200px;height:100px;float:left; } #boxB { width:200px;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Twitter Bootstrap テキストエリアの横幅指定 - Dlog 隔離館
CSSデザインサンプル
40分で覚える！jQuery速習講座 (2/6)
media=”handheld”という視点 : ウェビンブログ
CSSデザインサンプル