つまみ食いが横行するCSSを正しく理解する――『はじめてのCSS設計』著者インタビュー
手軽で自由度の高いCSS、しかし、それゆえにチーム開発や中～大規模プロジェクトで思わぬ「事件」が起きるのもCSSです。翔泳社が3月13日に刊行した『はじめてのCSS設計』の著者の一人、田辺丈士（アイ・エム・ジェイ）さんは「CSSのつまみ食い」が横行していると危惧。CSSをきちんと設計するための本書についてうかがいました。 最初は大丈夫でものちのち大変なことになる ――『はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法』は、CSSをかじったことがあってもゼロからは設計したことのない方のための解説書です。田辺さん始め著者陣の経験が詰め込まれた1冊だと思いますが、最初に田辺さんの経歴を教えてください。 田辺：僕は元々営業をやっていたんですが、Web 2.0と騒がれていたときに勉強し始め、海外でWebデザインの仕事をするようになりました。テーブルレイアウトだったも
数なのに法律違反、「違法な素数」とは？ DVDと素数の奇妙な関係 | JBpress(日本ビジネスプレス)
DVDのコピーガード CSS IT世界におけるネットセキュリティを支える暗号技術。例えば、ウエブ上のSSL通信は共通鍵暗号と公開鍵暗号を組み合わせて行われています。 暗号技術を支えるのが、素因数分解問題や離散対数問題といった数学的な難問であり、そこに関わるのが素数です。 ここで紹介する素数は同じセキュリティでもちょっと様相が異なるお話です。 DVDには無断複製を防止するためにコピーガードがかけられています。 多くのDVDソフトに採用されているのがCSS（Content Scramble System）と呼ばれるコンテンツ暗号システムです。 その仕組みのポイントは、映像コンテンツを暗号化し、その暗号鍵を複製できないエリアに記録することです。そのためDVDをパソコンなどで単純にコピーしても暗号鍵自体は複製できません。したがってDVDの再生ができない仕組みです。 DVDの暗号を解読せよ DeCS
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
Compassの実践と、オイシックスでの導入事例
対象読者 CSSの基礎知識がある方 SassおよびCompassの導入を検討している方 Compassの主な機能 初めにCompassの機能を紹介します。CompassにはSassを効率よく記載するために、以下の機能が用意されています。 独自のmixin CSSを部品のように扱えるのがmixin（ミックスイン）です。Compassには多彩なmixinが用意されています。使い方はSassと同様で「@include mixin名」と記載することで利用できます。後述する今回のサンプルでは、CSSのbackground-clipをmixinを使用して記載する方法を紹介します。 Compassのmixin一覧 独自の関数 Compassには独自の関数が用意されています。「関数名(引数);」と記載して実行させます。後述するサンプルでは、splite-urlやsplite-positionといったCSS
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
HTML/CSS/JavaScript初歩の初歩
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
ただの地下鉄マップだと思った？ ブー、100％コードで書かれている地下鉄マップでしたー
ただの地下鉄マップだと思った？ ブー、100％コードで書かれている地下鉄マップでしたー2013.05.24 19:00 そうこ いや、上の画像は画像なんですけどね。 ただのロンドン地下鉄マップだと思うでしょ、なんの変哲もない。この上の画像はそうですよ、ただのマップの画像です。が、この画像の元の地下鉄マップは画じゃないんです。HTML/ CSS/ JavaScriptを駆使してコードで描かれた地下鉄マップなのです。聞くより見るが早いですね、ネタ元のこのページを見れば、なるほど合点がいくでしょう。 コード地下鉄マップを制作したのは、ウェブ開発者のジョン・ガランティーニ（John Galantini）さん。地図上にあるライン、アイコン、シンボル、その全てをHTMLとCSSを使って描いたのです。制作にかかった時間は120時間、5週間以上もコードを書く日々が続きました。 ついこの間まで｢CSS使うと
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。 私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
I love software!: CSS2.1 がW3C勧告に。 個別 アーカイブ
W3Cは、6月7日（現地時間）、Cascading Style Sheets （CSS）の新しいレベルがW3C勧告になったことを発表しました。CSS3ではなく、CSS2.1です。 ○ニュースリリース（英文） Cascading Style Sheets Standard Boasts Unprecedented Interoperability え！いまさらCSS2.1という感想をもたれる方も多いと思います。CSS2.0が1998年5月に勧告になってから、すでに13年を経過していますので、確かに、その通りです。この間、W3CのCSSワーキング・グループは、CSS3の開発を進めると同時に、CSS2.0の仕様の大幅な見直しを行なってきました。CSS2.1では、CSS2.0で実際に使われなかったプロパティの削除や、既に広く実装されている機能の追加などが行なわれています。 CSS誕生から今年が15
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML、CSS、JavaScriptでデスクトップアプリを開発できるElectron 1.0、Devtron 1.0、Spectron 3.0が提供開始
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
UIフレームワークの正式版「Semantic UI 1.0」がリリース
Fries: ネイティブのAndroidインターフェイスをHTML、JavaScript、CSSで構築する
Editr - HTML, CSS, JavaScript playground
JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」 | キャリア | マイナビニュース