モダンCSSによる絶対配置（position: absolute;）の削減 | コリス

2021/09/28 260 users コリス position モダンCSS 削減 配置

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 posi... 続きを読む

CSSのみでアコーディオン・2パターン | かちびと.net

2019/06/15 28 users CSS net result position checked

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます css input {/*input要素自体は非表示にしておく*/ position: absolute; opacit... 続きを読む

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス

2019/03/19 194 users コリス position Disney ハンバーガーメニュー

スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む

CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 CSSスニペット net 境界線 要素

Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net

2018/10/04 17 users CSSスニペット fff net position Left

Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css /* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size:... 続きを読む

position:absoluteでタイトル横にSNSフォローボタンなどを並べる - Minimal Green

2017/08/03 13 users position 右横 ヘッダー Minimal Green

2017 - 08 - 04 position:absoluteでタイトル横にSNSフォローボタンなどを並べる ブログカスタマイズ CSS ブログのタイトルロゴの右横にSNSフォローボタンが並んでいるレイアウトをWordPressなどではよく見かけますよね。無料テーマなのに超優秀な人気テーマ「simplicity」などもそうですよね。 WordPressの場合は自由にHTMLでヘッダーの構造をいじ... 続きを読む

position: absolute; + display: table;の謎を解きたい - エンジニアをリングする

2015/10/22 13 users hEi position table display 挙動

2015-10-22 position: absolute; + display: table;の謎を解きたい CSS CSSでちょっと前から悩んでいる挙動があります。 heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある しかし、絶対配置（positionがabsoluteかfixed）されている要素は包含ブロックにheightの値がなくてもhei... 続きを読む

KOMPLETEに対抗!?　Steinbergから音源10種類パック、Absolute発売 : 藤本健の“DTMステーション”

2015/09/06 22 users Steinberg DTMステーション アマチュア 藤本健

ソフトウェア音源がいっぱい詰まったパックというと、Native InstrumentsのKOMPLETEを思い浮かべる人は多いと思います。結構なお値段ではありますが、プロからアマチュアまで、いろいろな人が使ってますからね。そのKOMPLETEに対抗するような形で、Steinbergからも計10種類のソフトウェア音源をセットにした製品、Absoluteが発表され、ダウンロード販売が開始されるとともに... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2015/06/14 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス

2015/01/26 104 users コリス fixed static スタティック アニメーション

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

2014/08/06 433 users CSS バシャログ いまどき block要素 上下左右中央

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例え... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2014/08/06 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

Subime Textのテキスト選択Tips2つ | Program | position: absolute;

2014/06/16 44 users position Program

Sublime Textといえば拡張選択機能が大きな特徴の1つですが、実は設定やパッケージ等でカスタマイズが可能です。このエントリーでは日本語に関わるものとスコープに関わるTipsを紹介します。 『Web制作者のためのSublime Textの教科書』の内容補足的なエントリーですが、読んでなくても使えるTipsです。 日本語選択の分割文字の指定 日本語の文章部分をダブルクリックしたり、[Shift... 続きを読む

ブラウザのtextareaでもSublime Textを利用する | Program | position: absolute;

2014/03/26 38 users textarea position Program CMS

このエントリーはWeb制作者のためのSublime Textの教科書のアウトテイク的なエントリーです。 CMSなどを用いて制作や運用をしていると、どうしてもtextareaとの付き合いが多くなります。チャチャッと終わる場合はいいのですが、テキストが多い場合や、HTMLやマークダウンで入力するときはエディターでやりたくなります。コピーペーストでも良いといえば良いのですけど、そういうひと手間は減らすに... 続きを読む

とりあえずjQueryのプラグイン作ってみる | Web | position: absolute;

2013/12/18 81 users jQuery position エントリー 範囲 導入

2013年12月18日 ｜ Web とりあえずjQueryのプラグイン作ってみる このエントリーはjQuery Advent Calendar 2013の18日目になります。 jQueryのプラグインといえば何かしらお世話になっている人がほとんどだと思いますが、自分で作成するというのもできるのでとりあえずサクッと作ることができる範囲で紹介します。 という導入ですので、比較的軽い内容になりますー。 ... 続きを読む

CSS だけで作るタブ切替ユーザインタフェース （float 使用版） | WWW WATCH

2013/05/23 42 users CSS WWW WATCH position float 下記

1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float ... 続きを読む

フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20 | Web | position: absolute;

2012/11/26 418 users デスクトップブラウザ position 表題 パク web

2012年11月26日 ｜ Web フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20 斉藤さん（@cssradar）が紹介していた20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should knowがおさらい的に参考になったので各項目の表題だけ訳して... 続きを読む

「Sublime Text 2はじめました！」に贈る日本語での情報のリンク集 | Program | position: absolute;

2012/11/16 152 users メンション Twitter position Program

隣の席の人が「Sublime Text 2はじめます！」って言って来たのでTwitterでメンションつけてURLを投げたら有用と思う人がおられるみたいですのでまとめておきます。（2012年11月17日現在） こういうの「ねいばーまとめ」にでもしておけばいいのかなあ。まあ、いいや。 紹介記事 【コラム】イマドキのIDE事情 (143) 今話題の高機能テキストエディタ「Sublime Text 2」そ... 続きを読む

[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション | コリス

2011/08/26 72 users コリス CSS deco position Left

キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。 CSS 1枚目の葉っぱのスタイルシート。 ※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。 .deco { position: absolute; } .leaf-1 { left: 670px; -webkit-animation: leaf1 2s ease infinite alternate 0... 続きを読む

CSSレイアウトの肝！ 表示・配置のプロパティ、14選 - ＠IT

2010/11/25 428 users プロパティ CSSレイアウト 配置 relative 表示

positionプロパティ positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。 値には、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない「static」、スクロールしても位置が固定される「fixed」があります。 詳しくはコチラ　position ボックスのレイアウト方法を指定するpositionプ... 続きを読む

Windchase - Javascript で幅に合わせて文字列を切りつめる

2007/05/25 176 users visibility ruler ListView span

デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。まず、文字列の幅を測定するには、 span id="ruler" style="visibility:hidden;position:absolute;"> span> ... 続きを読む

[を] CSSで半透明

2005/03/30 66 users 半透明 CSS opacity moz padding

CSSで半透明 2005-03-27-3 [Tips] CSSで指定した箇所を半透明にするには、 IE なら alpha フィルター、FF なら -moz-opacity。 <style> #sukesuke1 { position:absolute; padding:5px; background-color:red; filter:alpha(opacity=75); /*IE*/ -moz-... 続きを読む