The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.
ペルソナ5 の UI かっこいいですよね。 今は ペルソナ5S が出ていますが、今回は ペルソナ5 のメッセージウィンドウを、 もしかしたら CSS で作れるんじゃないか、と思って作ってみました。 画像としてはこんな感じ これがゆらゆらアニメーションします。 特徴 自由変形した四角形。 白と黒で重なったウィンドウ 吹き出しの矢印の部分の複雑な形 不規則にそれぞれの枠が別々で動くアニメーション 動作サンプル( Codepen ) See the Pen Persona5 Message Window by ばりとん📛フルスタックエンジニア兼ITコンサル (@dd0125) on CodePen. ソースコード <link rel="stylesheet" href="persona5.css"> <body> <h1>ペルソナ5 メッセージウィンドウ</h1> <div class="me
初期値は端末によって異なるため、除いてあります。 それぞれpxや乗数で入力して調整できますが、ほとんどの端末にもれなく対応するためには、以下のように記述するのがベターかと思います。 <!-- ▼ユーザーの拡大、縮小あり --> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- ▼ユーザーの拡大、縮小なし --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> user-scalable、つまりユーザーの拡大と縮小の可否で分けてあります。ユーザーはデフォルトで拡大できると認識していることがほとんどだと思うので、基本的には拡大縮小
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用（-webkit-border-radius） 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
個人的な話ですが、ほんのちょっと前までは Adobe Flash Builder や eclipse といった IDE（統合開発環境）を使って開発の全てを行なっていました。というのもデスクトップ上が沢山のウィンドウで埋め尽くされるというのがどうにも苦手で、単一のアプリケーションで完結できるというというのを最重要視していた節があります。（※そういえば Adobe Dreamweaver も一時期使ってたっけなぁ…） 半年ほど前に Sublime Text に出会ったことで、コーディングはテキストエディタで行いつつ、リポジトリ環境へのコミットは専用ツールやコマンドラインツール等を用いるなど、複数のツールを組み合わせて開発するというスタイルに少しずつ移行していっている最中です。 そんな訳で Sublime Text で全く不自由していない今日この頃ですが、タダより安いものはないということで、Ad
2013-04-07 僕はtext-overflowを使いこなせない。 CSS はてなブログのテーマを作っている時に、サイドバーの最近のエントリー(New)が長すぎた場合に改行されてスッキリしなかったので、CSSで省略すれば良いことに気づき、以下のようなコードを追加しました。 #hogehoge { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 適用するとモダンブラウザではこのような感じに。 上記のコードでChrome、Safari、FireFox、Operaでは正常に省略されることを確認したのですが、IEだけ省略されず、「IEかわいいよIE」と半分諦めていたのですが、スッキリしなかったので調査しました。原因ははてなブログの共通CSSで指定している以下のコードでした。 チェックを解除すると省略されまし
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
はじめまして。ファイ部新卒のしんちゃんです。中国の上海から来ました。 日本に来て、やっと本場のとんこつラーメンを食べることができて、感動ですっ！ さて、Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 新しい楽器をテーマにしたコンテストが開催されています。 楽器経験者の方はたくさんいらっしゃると思いますが、 ブラウザ上で動く楽器を演奏すると聞いたら、一体どんな楽器をどんな方法で演奏するかには、 実に興味津々ですね。 発想力に富んだコードが次々と投稿されています！ さっそくそのなかの幾つかを紹介しようと思います！ HTML5で作られた楽器のコード集！ ping pong arpeggio ※「▶Play」ボタンをクリック！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
