hrの使いやすそうなスタイリングいろいろ | かちびと.net

2019/07/01 39 users ＨＲ margin result net border

Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%;... 続きを読む

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スニペット：SVGで作る非長方形なヘッダ画像いろいろ | かちびと.net

2018/07/07 13 users SVG CSSスニペット DDD margin result

Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css .card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wr... 続きを読む

CSSを使ってテキストカラーを半々に表示させる方法 | NxWorld

2017/10/02 91 users NxWorld 半々 CSS inline-block 見栄え

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 ※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、 position: relative; と display: inline-block; の部分は使用する... 続きを読む

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

2015/01/26 104 users コリス fixed absolute static 配置

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

CSSで作る見出しデザイン | Web’Notes

2014/02/14 413 users CSS 見出しデザイン bold SOLID CCC

見出しはサイトの見た目を決める上で重要な箇所です。 印象的な見出しは、それだけでサイトを引き立ててくれます。 今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。 .heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; ... 続きを読む

[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス

2012/05/20 304 users コリス CSS overflow Hidden height

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む

[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please! | コリス

2012/04/12 122 users コリス CSS background border div

HTML 使用するHTMLは、下記のような感じでokです。 <div class="arrow_box">ふきだし</div> CSS 生成されるスタイルシートはアローやボーダーのみなので、吹き出しのサイズなどは別に指定して利用してください。 .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f... 続きを読む

rsync -Rで中間ディレクトリがシンボリックリンクな場合の注意点 - (ひ)メモ

2011/04/28 44 users rsync オペレーションミス メモ ディレクトリ 注意点

ohamari複数サーバを管理する場合、管理コストの増加やオペレーションミスを避けるための施策として、「すべてのサーバの内容を同一に保つ」という管理方法があります。サーバの内容を同一に保つには、小中規模ならrsyncと、パス指定の簡便化とミスを防ぐために-a -R (--relative)オプションを使うのがベストでしょう。ただ、-Rを指定しているときに、同期コピー対象のパスにディレクトリへのシン... 続きを読む

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

2010/11/25 428 users プロパティ CSSレイアウト 配置 fixed static

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

小粋空間: CSS で table に斜線を引く方法

2009/10/25 287 users table 斜線 CSS position span

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に... 続きを読む

[CSS]背景が透けるカラムを実装するスタイルシート | コリス

2008/03/05 232 users コリス カラム CSS Pixels Overlay

Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。 CSS箇所 #column-1{ position:relative; float:left; width:500px; /* remember to set a width */ } .overlay{ position:ab... 続きを読む

はてなブックマークで検索フォームを右上に持ってくる

2005/06/10 73 users はてなブックマーク 右上 検索フォーム naoya auto

昨日よりはてなブックマークのデザインを変更できるようになりました。それで、b:id:finalvent を見ていて、おっと思ったので僕もフォームを右上に出るようにしてみました。(b:id:naoya)やり方は結構簡単です。 div.body { position: relative; width: auto; _width: 100%; top: 0; left: 0; } form.hatena... 続きを読む