CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
NxWorldをリニューアルしました − 2017 - NxWorld
普段からブログを見てくれている方やTwitter・FacebookといったSNSでフォローしてくれている方は気付いてくれた方も多いですが、先日NxWorldをリニューアルしたので、簡単にではありますが自分用の備忘録も兼ねて変更点などを紹介しようと思います。 これまでの感じが特別嫌になったわけでもないのでデザインや全体な雰囲気などはそこまで大幅に変更しているわけではないですが、いろいろと細かい部分で変えたいところが増えてきたので、それらを一度に変更する流れでリニューアルをすることにしました。 ロゴデザイン まず、わかりやすい変更点としてロゴデザインを変更しました。 これまで通り鳥をモチーフにしたデザインなのは変わりませんが、見た目をより羽ばたいているイメージに変更し、カラーはこのブログのテーマカラーであるグリーンをベースにしたグラデーションを採用しました。 ちなみに、今回のロゴデザインですが
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
gulp：タスク一覧表示に説明文も表示させる方法 - NxWorld
gulpではあるコマンドでどのようなタスクが定義されているかを一覧表示して確認することができますが、その際にタスク名だけでなくそのタスクの説明文も一緒に表示させる方法です。 「gulp：タスクやインストール済みプラグイン・モジュールの一覧を表示する方法」で紹介しているように、gulpは$ gulp --tasks または $ gulp -Tのコマンドを実行することでタスクの一覧表示ができ、その際は下記のような感じのツリー形式で表示され、現在どのようなタスク定義されているかやどのようなタスクが組み合わさっているかなどを確認することができるようになっています。 [00:00:00] Tasks for ~\path\gulpfile.js [00:00:00] ├─┬ default [00:00:00] │ ├── task1 [00:00:00] │ └── task2 [00:00:00
Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
Pure CSSで実装するコーナーリボン - NxWorld
要素や画像の角などに配置するコーナーリボンを、画像は使用せずにCSSのみで実装してみたものです。 HTMLとCSSで実装する場合は幅や位置の指定が若干面倒に感じることはありますが、その分カラー変更等も容易で角度なども自由に変更できます。 イメージにあるように、作成するのは「左上」「右上」「左下」「右下」の4パターンのコーナーリボンとなります。 「左下」「右下」に表示しているものは意図的にテキストを逆さに表示させていますが、通常の見栄えで良いのであれば後述するコードのtransform: rotate();の値を変更してください。 ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 HTMLと共通CSS 紹介しているものは下記のようなHTMLを使用しており、共通のclassとして.ribbonを記述しています。 また、それに加えて例えば「左上」の場
gulp：タスクをファイル分割する方法 - NxWorld
gulpは実行したいタスクをgulpfile.jsに記述していくというのをよく見かけると思いますが、タスクが増えれば増えるほど記述内容は増えていきます。 もちろん特に気にならないという人もいるとは思いますが、できれば各タスクがどのような処理を行っているのか把握しやすくしたり管理しやすくしたいという場合は、以下で紹介する方法で各タスクをファイル分割することができます。 今回はサンプルとして下記のようなよく見るファイル構成のものがあり、gulpfile.jsには既に幾つかのタスクが記述されているものをファイル分割していく想定で分割化の手順を紹介していきます。 構成の中身はそれぞれgulpfile.jsとpackage.jsonがファイル、srcはいわゆる開発環境のディレクトリとなります。 var gulp = require( 'gulp' ), sass = require( 'gulp-s
Monthly Bookmarks 2016/04 - 2016/06 - NxWorld
2016年4月〜2016年6月の個人的ブックマークです。 2016/04 Development Almost complete guide to flexbox (without flexbox) | Kenan Yusuf CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver Modaal is a WCAG 2.0 Level AA accessible modal plugin Popper.js 360 Degrees Product Viewer in CSS and jQuery | CodyHouse Turntable.js : A Resp
CSSで実装するボタンホバー時のボーダーアニメーションエフェクト - NxWorld
ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
jQuery Snippets #7 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第7弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 画像のアスペクト比を割り出して、値によって処理を加える 例えば複数の画像を並べて表示したいという時に、同じサイズや同じ縦横比であればCSSなどで容易に調整可能ですが、それが横長や縦長など異なるサイズ（アスペクト比）で且つどのようなものが入ってくるのかを限定できない時などに利用できます。 jQueryを下記のように記述することでアスペクト比によってそれぞれ別の処理を実装することができ、例えばCSSのposition: absolute;とネガティブマージンを組み合わせることで、ど
CSSで子要素の表示を維持しつつ、要素を回転させる方法 - NxWorld
なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。 CSSのtransform: rotate();とanimationを使って要素が常に回転するような動きを実装する際、単純に親要素にそれらを指定するだけだと中にある子要素の見栄えも回転します。 それを、子要素の見栄えは回転せずにそのままの表示が維持されているように見せる方法です。 イメージだけでは伝わりづらいかもですが、以下ではこのように5つの要素があり、それらが時計回りにくるくると回転する動きをCSSで実装していくものになります。 基本的なHTML・CSS 基本的なHTMLとCSSは下記のようなものを使用し、CSSで各li要素をposition: absolute;を使って先ほどのイメージのようになるようにそれぞれ指定していきます。 <i class="fa fa-xxx"></i>やpのHTMLやCSSに関して
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
CSS：角丸のテーブルを作成する方法 - NxWorld
テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて
data属性を利用したナビゲーションの実装サンプル - NxWorld
テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。 いずれもカスタマイズといっても簡易的なものばかりでほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。 また、あまりdata属性を使ったことがないという人はこういう使い方もあるということで参考にしてみてください。 ここで紹介している内容はdata属性を利用した実装サンプルのひとつとして紹介しており、擬似要素で表示させているテキストはあくまで装飾目的で表示している想定になります。 SEOやスクリーンリーダー対応などに影響があると考えられる場合は、しっかりとマークアップしたもので実装してください。 補足テキストを表示 #1 見かけることが多いと思う、ナビゲーシ
CSSの:nth-childと:nth-last-child擬似クラスの使用例 - NxWorld
今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。
CSSでリストの最初と最後のボーダー（border）を非表示にする方法 - NxWorld
リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。 最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。 以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。 HTMLは下記のようにul, liを利用した単純なものとします。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
