「CSS」タグアーカイブ

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなもの

“A”キーと”D”キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients – no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。

via TheNextWeb

ブログでチャット風の会話を表示するCSS

先日の記事「電話番号間違ってますよ」がどうしても信じてもらえない! 内で、チャットのやりとりを表現したかったので、フキダシ会話っぽく見える CSS を書きました。

WordPress の場合は、[外観]-[カスタマイズ]-[追加CSS]に貼りつけてください。特定のポストでだけ使いたい場合は .post-9067 とかを全部の前につけます。

アイコンの画像はこのCSSの中に URL を書き込んであります。別のアイコンにしたければそこを変えてください。


.akky_conv {
padding-top: 1em;
}
.akky_conv li {
display: flex;
flex-direction: row;
max-width: 95%;
}
.akky_conv li div {
width: 32px;
height: 32px;
box-shadow: 2px 2px 0px #aaa;
flex-shrink: 0;
flex-grow: 0;
z-index: 1;
}
.akky_conv li:not(.me) div {
background:url('/akky/wp-content/uploads/2017/04/user-alt-1_0.png') center no-repeat;
background-color: #fcf;
}
.akky_conv li.me {
justify-content: flex-end;
}
.akky_conv li.me div {
background:url('/akky/wp-content/uploads/2017/04/user-alt-2.png') center no-repeat;
background-color: #cff;
order: 2;

position: relative;
bottom: -3em;
}
.akky_conv li p {
background-color: #ddd;
margin: 1em;
padding: 1em;
position: relative;
text-align: center;
}
.akky_conv li.me p{
order: 1;
}
/* 吹き出し */
.akky_conv li p:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
}
.akky_conv li:not(.me) p:before {
border-right: 12px solid #ddd;
border-bottom: 12px solid transparent;
top: 0px;
left: -12px;
}
.akky_conv li.me p:before {
border-left: 12px solid #ddd;
border-top: 12px solid transparent;
bottom: 0px;
right: -12px;
}

会話の方はこんなかんじ。右の発言の人には、li 要素に me クラスをつけます。


<ul class="akky_conv">
<li>
<div></div>
<p>左の人の発言</p>
</li>
<li class="me">
<div></div>
<p>右の人の発言と思いねえ</p>
</li>
</ul>

その結果

  • 左の人の発言

  • 右の人の発言と思いねえ

WordPress Admin Style – ワードプレス管理画面で使えるCSSスタイルを列挙するプラグイン

WordPress Admin Style は、ワードプレスのプラグイン開発者のためのサポートツールです。

プラグインは公式レポジトリにはなく、GitHubで公開されています。

cloneするなりzipでダウンロードするなりして、WordPressの開発環境、plugins以下へコピーします。

wordpress-admin-style-enable

プラグインを有効化すると、サイドメニューに”Admin Style”というメニューが増え、クリックすると、管理画面で最初から使えるスタイルが列挙されたページが開きます。

wordpress-admin-style-screenshot

Admin画面のデザインをする際に、どんな要素にどんなデザインが当たっているのかを把握しやすくて便利かなと思いました。

ウェブページ制作のたいへんさを見せるページ

英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのをブラウザ上で見せてくれるページです。

reddit-designing-1

画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。

redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。

このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。

このデモで生成される掲示板のやりとり自身が指しているように、Jake Albaughさん脈打つハートを作る様子を再現するコードを見て、それに触発されて作られたということです。

同じコードを参考に、CSSで描くダースベイダーデモ化したページも作られています。

darth-vadar-web-building

via TheNextWeb