Microsoftが1998年に発売した「Windows 98」のデザインをウェブサイトで利用できるCSS「98.css」をエンジニアのJordan Scales氏が開発し、GitHub上で公開しています。 98.css - A design system for building faithful recreations of old UIs https://jdan.github.io/98.css/ 98.cssを使うと、ウェブサイトにWindows 98ライクなデザインを適用することができます。ボタンのデザインはこんな感じ。 チェックボックスや…… ラジオボタン。 ウィンドウの要素もあります。 98.cssを手軽に利用するには、HTMLのlinkタグを用いて98.cssをインポートします。試しに98.cssをインポートしたHTMLを記述してみます。 <!DOCTYPE html>
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
商品画像の実装をマネルと書いたが実際にはライブラリを使って表現してみたッて感じです！ そのとき調べたことを議事録的にまとめたもの。 Maginifierについて 使用するライブラリ mark-rolich/Magnifier.js 公式のサンプルサイト Magnifier.js demo 他にも同じようなライブラリがあったが 一番使いやすそうだった Amazonの動きと一番近かった サンプルがわかりやすく充実をしていた ので、Magnifierを採用。 簡単なサンプル サンプルサイトに記述してあることの反復である。 使用するのはファイルは3つで、githubからDownloadしてくる。 Magnifier.js Event.js magnifier.css 一番単純な使い方 <html> <head> <title>Magnifier Sample</title> <script typ
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
#PCDATA #PCDATA（parsed character data）は解析の対象になるので、「<」, 「>」はそれぞれタグの開始, 終了と解釈されてしまいます。よって、直接記すのではなく文字を参照しなければならなりません。&は文字実体参照の開始記号として使われるので、それ以外の用途なら文字を参照します。HTML 4では1114111までISO 10646の文字コード位置で参照可能ですが、HTML 3.2は255までです。一覧表 ※HTML 4では10進数だけでなく16進数でも良いことになってはいますが、10進数の方が無難です。実体参照では大文字小文字が区別されます。 < → < (<) > → > (>) & → & (&) Å → Å (Å) å → å (å) CDATA CDATA(character data) は、文字データの終りを示す区切り子「</」の他にはマーク
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
pタグやdivタグのclass要素を指定できるのでHTMLでそのまま記述する。 いつくかはてなダイアリーでの使用可能なはてな記法は無効になっており、例えばキーワードリンク無効記法が使えないためフォントカラーが キーワードリンクの黒に潰されちゃうかんじ。 以下サンプル。アルファベットはクラス名(自動アンカーついていててコピペしにくい。ソースみたほうがいいかも)。 アイコンicon-arrow :: 矢印 icon-tag :: タグ icon-folder :: フォルダ icon-keyword :: キーワード icon-linlink :: インリンク icon-page :: ページ icon-user :: ユーザー icon-download :: ダウンロード out :: アウト フォントhatena-asin-detail-title :: 太字 synStatement
██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ██████████████████████████████████████████████████ ███████████████████████████████████████████
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
