これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

2023/04/17 163 users CSS 三角関数 レイアウト ヘッダ テクニック

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です... 続きを読む

CSS flexboxで実装する、レスポンシブ対応のステップのコンポーネントを解説 | コリス

2021/09/16 11 users Building コリス CSS コンポーネント サークル

Webページで使用されるステップのコンポーネント、サークルに囲まれた1,2,3と各ステップを繋ぐ中央のラインを実装するCSSのテクニックを紹介します。 レスポンシブ対応、そしてライト・ダークモード対応、水平・垂直に配置されたステップだけでなく、数字ではなく日時を繋いだタイムラインにも応用できます。 Building A... 続きを読む

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス

2021/06/16 22 users コリス Flex Row Flexbox display

Flexboxのチートシートの一部 displayプロパティ Flexboxを使用するには親要素にdisplay: flex;（または、display: inline-flex;）を適用すると、その子要素がFlexアイテムになります。 flex-directionプロパティ FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列（row）の水平、縦... 続きを読む

VRの研究をしたい人へ　〜VRの研究分野マップ〜｜yunoLv3｜note

2019/01/22 51 users 研究 Twitter 一助 ゆう 大学生

どうも、ゆうのLv3（Twitter）です。自己紹介は記事末尾に書いてあります。 センター試験お疲れ様でした。VRに興味のある高校生、大学生に向けて、進路選択の一助となればと思って筆をとった次第。この記事では、日本のVR技術の水平を押し広げてくれるあなたへ、VRの研究分野のマップをお届けします。あ、本記事ではVRを... 続きを読む

クルマのハンドル「10時10分」は過去の話　教習所ではいま何時何分？ （乗りものニュース） - Yahoo!ニュース

2017/09/10 11 users 乗りものニュース ハンドル クルマ Yahoo 教習所

クルマのハンドルは水平よりもやや上、時計の針でたとえると「10時10分」の位置で握るというのは、もはや古いお話かもしれません。昨今、この位置よりももっと下の「9時15分」、あるいは「8時20分」くらいの方がよいという声も聞こえます。現在、自動車教習所ではどのように教えているのでしょうか。 【図】「10時10分」とは？　ハンドルの握る位置おさらい 　平和橋自動車教習所（東京都葛飾区）では、「9時15... 続きを読む

[iOS 11][ARKit] 物理衝突を実装して、キューブを落として見る #WWDC2017 ｜ Developers.IO

2017/08/27 11 users YouTube ARKit キューブ 平面 ドキュメント

1 はじめに iOS 11で追加された ARKit を利用して、映像の中に検出した平面に、キューブを落下させている動画が、Youtubeに公開されています。 既に、 ARKit で平面（水平）を検出できることは、先の記事で確かめて見ました。 今回は、物理衝突の動きを実装した四角いノードを追加して、動作を確認して見たいと思います。 本記事は Apple からベータ版として公開されているドキュメントを... 続きを読む

消費者物価指数（コアCPI、コアコアCPI、新指数）は「ほぼ水平」が「客観的説明」ではなく、アベノミクス以降上昇反転が「客観的説明」

2015/11/08 10 users コアCPI コアコアＣＰＩ 消費者物価指数 新指数 説明

昨日の経済学史学会関東部会での僕の質問。平井俊顕さんが「GDPデフレーターが下落している」という指摘について。90年代から下落してマイナス域だった。これは「デフレーション」のひとつの指標である。これを言うのは正しい。しかしその下落があたかも安倍政権のアベノミクス以降も継続しているような印象を持たせるのはまずい。　きちんとアベノミクス以降はGDPデフレーターがプラス域に反転していることをきちんと言う... 続きを読む

まるで水平な虹？　大阪などで「環水平アーク」観測：朝日新聞デジタル

2015/05/22 30 users 環水平アーク 観測 朝日新聞デジタル かんすい 大阪

太陽の下に、水平の虹のような帯が見える気象現象「環水平（かんすいへい）アーク」が２２日の昼ごろ、大阪や名古屋、東京など広い範囲で観測された。大阪管区気象台によると、大阪市内では正午ごろ南の空で見られたという。　同気象台によると、環水平アークは、太陽の光が大気上層の氷の粒で屈折し、起きる現象。薄い雲が上空にかかる晴れた日に見られるという。雨粒に太陽光が反射し、太陽とは反対方向の空で見られる虹とは異な... 続きを読む

[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ | コリス

2013/10/01 760 users コリス jQuery スクリプト エフェクト スライド

最近よく見かけるかっこいいコンテンツやエフェクトを実装できるjQueryのプラグインを紹介します。 fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォ... 続きを読む

デルから水平まで倒せる液晶一体型デスクトップ Inspiron 23、23型10点タッチ画面採用 - Engadget Japanese

2013/09/26 12 users デル Engadget Japanese インターフェー

米デルがディスプレイ一体型PCの新モデル Inspiron 23 を発表しました。特徴は水平になるまで画面を倒してタブレットのように使えるところ。23型の10点タッチパネルを採用しており、状況によって使いやすい角度に画面を調節できます。 オールインワンデスクトップといえば、たとえば iMac のようにディスプレイ部にコンピューターとしての機能をすべて搭載するタイプでは、USB などのインターフェー... 続きを読む

[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards | コリス

2013/05/16 207 users アニメーション コリス テキスト 全部 デモ デモ

パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 CSS Flip Boards CSS Flip Boardsのデモ CSS Flip Boardsの実装 CSS Flip Boardsのデモ デモは全部で、4種類のくるっがあります。 前半2つはテキストを配置したパネルで、上：垂直、下：水平にくるっ... 続きを読む

[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS | コリス

2013/03/31 65 users アニメーションgif アニメーション マウス デモ 回転

デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め 見えない人用に、デモをアニメーションGIFでどうぞ。 続きを読む

27インチの『IdeaCentre Horizon Table PC』レノボが発表：CES2013

2013/01/07 12 users レノボ CES2013 HORIZON 27インチ 発表

レノボはCES2013にあわせて、27インチの一体型PC『IdeaCentre Horizon Table PC』を発表しました。その名のとおり、スタンドを倒してディスプレーを水平（horizon）にできる、ボードPCならぬ“テーブルPC”です。 日本でもこういった一体型のWindows PCは販売されていますが、これほど大きいサイズのものはまだありません。 大きいとイイのは、何と言ってもゲームで... 続きを読む

[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly | コリス

2012/10/30 276 users Sly FRAM コリス jQuery スクリプト

水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAM... 続きを読む

[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery | コリス

2012/10/21 82 users コリス イージング jQuery スクリプト mootools

水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。 Kwicks for jQuery Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。 Kwicksのデモ Kwicksの使い... 続きを読む

速報：ソニー VAIO Duo 11、VAIO Tap 20 発表。Windows 8 対応変形ノート とテーブルトップ - Engadget Japanese

2012/10/01 16 users Engadget Japanese VAIO Tap 速報

CEATEC 2012 を翌日に控えて、ソニーが VAIO 秋冬モデル6シリーズ22機種を発表しました。目玉はディスプレイがスライドして立ち上がる" Surf Slide " 方式採用の スライダーハイブリッド VAIO Duo 11、ディスプレイが水平まで倒れるテーブルトップ VAIO Tap 20 のタッチ対応PC 2モデル。いずれも海外では約一か月前に発表された製品です。 店頭仕様モデルの国... 続きを読む

リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

2012/03/12 1325 users Fireworks エッチング フェンリル テクスチャ くら

iCloud 風アイコン iCloud 風アイコン2 こんにちは、イメージ担当の長谷川です。 今回は iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラ... 続きを読む

CSSのナビゲーションメニューサンプル５５:phpspot開発日誌

2011/09/09 48 users CSS phpspot開発日誌 ナビゲーションメニュー 参考

55 Wonderful CSS Navigation Menu Designs | inspirationfeed.com CSSのナビゲーションメニューサンプル５５。 ページトップに置くような水平のナビゲーションメニューのデザインカタログみたいな感じで使えそうなまとめです。 水平ナビゲーションをちょっと変わったものにしたいけどなんとなく煮詰まったみたいな時に参考にしてみてもよさそう。 色々なデ... 続きを読む

27インチ Apple Thunderbolt Display 発表、8万4800円

2011/07/20 21 users Apple Thunderbolt Display 発表

Filed under: ディスプレイ アップル公式からの流出もあった同社の新ディスプレイが発表されました。Thunderbolt対応にあわせて、名前は Apple Thunderbolt Display と一新されています。サイズは LED Cinema Display と同じ27インチで、解像度も変わらず2560x1440。視野角は水平・垂直とも178度。輝度375cd/m2、コントラスト比1... 続きを読む