【CSS3】文字の色を半分だけ変えるテクニック
画像を使用せずに CSS のテクニックだけで文字の色を半分だけ変える方法を紹介します。 言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。 CSS3 Black & White : https://on-ze.com/demo/css3-black-white/ 上記のサンプルではレスポンシヴにも対応。 すべてのデバイスで同じように表示させることに成功しています。 HTML の記述同じテキストを２回記述するのではなく、カスタムデータ属性を追加しただけの非常にシンプルなコードです。 <p data-inverted="Black and White">Black and White</p> ここではカスタムデータ属性は『data-inverted』と名付けています。 CSS の記述続いてキモとなるスタイルシートの記述です。 p:before { conten
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方
ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。 これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。 そこで、同様のことを jQuery で実現したのが［jQuery IntroTzikas］です。 IntroTzikas：サンプル ファイルサイズも小さく、導入方法も簡単なので初心者の方にもお勧めできる jQuery プラグインです。 jQueryプラグイン［IntroTzikas］の実装方法 まずは公式の配布サイトよりプラグインの本体をダウンロードしてきましょう。 →IntroTzikas 単体では動かないので、jQuery の本体ファイルもダウンロードしてくる必要があります。 →jQuery 続いて HTML の <head>〜</head>内で、ダウンロードしてきた［introtzikas
【jQuery】可変グリッド・レイアウトの超有名プラグイン［Masonry］を紹介します。
ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する［Masonry］は、言わずと知れた超有名 jQuery プラグインです。 「Masonry」とは直訳すると「石造建築」の意味。レンガ造りの壁をイメージすると、その特性が理解しやすいかもしれません。 ちなみに読み方は「メーソンリー」です。「フリーメーソン」の語源にもなっていますね。 百聞は一見に如かず、というワケで、まずはデモをご覧ください。 jQuery Masonry : サンプル・デモ jQuery Masonryの使い方 まずは jQuery 本体のライブラリと jQuery Masonry をダウンロードしてきます。 jQuery Masonry 当然ですが jQuery の本体ライブラリがないと動きませんので、Masonry プラグイン単体では意味がありません。 ダウンロードしてきた２つのファイルは head
【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。
今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。 まずはサンプルをご覧ください。 jQuery bxSlider：サンプル・デモ 特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の１つです。 実装方法は以下のとおり。 ［bxSlider］の設置方法 最初に［bxSlider］の本体ファイルをダウンロードします。 リンクは以下より。 bxSlider：ダウンロード フォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの［jquery.bxs
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
