わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス

はじめに 複数のjpegをなるべく高画質・少サイズでエンコードするGUIアプリ（フリーソフト）を紹介。 アプリ立ち上げから完了まで１分も掛かりません（6000x4000程度の画像１枚なら）。 可逆圧縮もOK。 経緯 ホームページの通信量削減・表示高速化に画像圧縮が有効とは、最早語るまでもない話。 で、既に設置されているページの画像（しかも解像度も圧縮率も全く考慮されてないデブ）を一括変換する良い手段はないものかと考えてた時に出会ったのがjpegライブラリ、その名もmozjpeg。 mozilla/mozjpeg - GitHub mozilla.jp 新しい JPEG エンコーダ「mozjpeg」プロジェクトを開始します そいやニュースサイトでMozjpegの記事やってたなーと思い出す。 JPEGをさらに高圧縮する「mozjpeg 2.0」で2GB超の画像ファイルを圧縮 当方では複数のファ

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro

（↑：イメージ画像） 歴史の資料集にある年表や、企業パンフレットの「○○グループの歩み」のような年表をブログ等に貼り付けられたら便利だと思いませんか？ 例えば、 好きな作家や画家の作品を年代順に並べる（「モネの作品集」など） ある国際問題に関するここ数年の状況をまとめる（「イスラム国の概要」など） 話題になったニュースの流れを時系列で紹介する（「STAP細胞問題の推移」など） などなど様々な利用例が考えられます。 そんな年表を簡単に作れないかな、と探していたところ”Timeline JS”という便利なものを見つけました。 Timeline JSとは？ だれでもオシャレでインタラクティブな年表をつくれるオープンソースのツールです。 このページの一番下に実際にTimeline JSでつくったサンプルを貼り付けています。 文字だけでなく画像や動画・地図・Wikipediaを載せることができ、年表

年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。 レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型（垂直）タイプだけでなく横型（水平）で見せるタイプもあります。 jQuery Timelinr 縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーのような見栄えでタイムラインを実装できます。 スライドのオート機能や各アニメーション速度の設定、「prev」「next」のナビ機能などの設定もいろいろと用意されています。 Dynamic Timeline レスポンシブ対応もされているjQueryプラグインで、こちらも縦型・横型の両タイプが用意されており、ビューサイズ指定で通常は横型のものをスマートフォンでは縦型に見せるなども可能です。 他にもコン

世の中はIT社会、インターネットを含むIT機器によるネットワーク構築はすでに常識となっています。 社内ネットワークを構築している企業も珍しくありません。 一般の方でも、インターネットへ繋ぐ際にはモデムやルーターを駆使していることでしょう。 使うだけなら最近の機器は難しくないので利用できますが、折角利用しているのですから簡単な仕組みくらいは理解して使いたいものです。知識があれば問題の解決も早くなるでしょう。 今回は、以前紹介した「モデムとルーター」の話も混ぜながら『IPアドレス』について解説し、ネットワークの仕組みの一端を見ていきましょう。 ※「第13回　インターネットとその関連知識」の一部内容を単独化し、内容をプラスした記事です。 ネットワーク上の住所 – IPアドレス IPアドレス【アイピーアドレス：Internet Protocol address】とは、ネットワーク上に接続された通信

「インターネットに繋がらない」 このトラブルは定番中の定番でありながら非常に困るトラブルのひとつです。インターネットに繋がらないと全く作業ができなくなる方もいるかと思います。急にこの症状がでることも珍しくなく、厄介なものです。 また、このトラブルは問題箇所が多岐にわたり解決が非常に難しくなる場合もあります。とても面倒なことになっていて原因がわからない状態に陥ることも少なくありません。 そこまで難しい問題になっている場合は詳しい人に相談したりサポートなどに電話するしかないですが、実はこのトラブルは簡単な方法で解決することがほとんどで、最初に見るべきポイントがある程度決まっています。「まずはこれをやってから色々考えよう」という ” テンプレート ” があるのです。 それを知っておけば余計に時間を浪費することもなくなります。いざというときのために覚えておきましょう。 確認すべきポイントは「4つ」

Buffer Blog：この記事のタイトルを見ると、すごいことを言っているように感じられるでしょう（私としてはそう思っていただきたいのですが！） でもこの話の良いところは、そんなすごい成果が誰にでも出せ、一見大変なことのように思えても、実はぜんぜんそうではない、という点なのです。 実を言うと、これらの成果はすべて、毎日小さなことをコツコツと長期間やり続けることによって達成したものです。 私は、ハードなやり方よりもスマートなやり方を好み、効率的に物事をこなすための細かな工夫を考えるのが好きなのです。Bufferの初代コンテンツクラフターである私は、年中この手のトピックを掘り下げる機会を与えられました。 今回またここで、私が2015年の成果をどうやって獲得したかを紹介できることをうれしく思います。 フランス語を1日5分練習する習慣によって、基礎的なフランス語の読み書きと会話ができるようになった

kandeza.com 2023 著作権. 不許複製 プライバシーポリシー

「MacBook Pro Retina」の15インチモデルの魅力は何と言ってもその大きなディスプレイ。13インチでは不十分だと感じていた作業スペースも大幅に広くなり、とにかく作業が快適になった。特に、僕はRetinaに最適化された解像度ではなく、15インチのディスプレイにあるピクセル数を最大限活用する最高解像度モードを利用しているから尚更画面上に表示できる情報量が多い。 15インチディスプレイなのに表示領域は1920×1200ピクセルという広さ。この快適さは是非とも知ってもらいたい！以前も「MacBook Pro Retina」13インチモデルを購入した際にも同様に各擬似解像度による表示の違いを紹介したが、今回は15インチモデルということで13インチをさらに上回る高解像度モードを紹介したいと思う！ 「MacBook Pro Retina」15インチモデルの各種解像度を比較 まず前提として「

「なんかあのくるくる横にスライドしていく機能を付けたい！」という要望は制作案件には頻出です。 さて、カルーセルを実装するjQueryプラグインはいくつもありますが、今回はJavaScriptに特化した検索サイトJavascripting.comから評価が高いものを紹介します。 参考：【入門】jQueryの導入方法から使い方まで！わかりやすく解説します カルーセルとは カルーセルとは、遊園地の回転木馬や回転式コンベアなどの意味を持つ英語の名詞です。（cf.carousel）Webのくるくる回転するような動きをするパーツに対しても使われます。 ただ、Web技術に詳しくない人にはカルーセルと呼ぶよりもスライダーと呼んだ方が通じます。実際、カルーセル系のjQueryプラグインにはsliderと名前が付くものもたくさんあり、呼び方はどっちでもいいのかもしれません。 評価が高いカルーセルjQueryプ

HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル

Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。

コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。 すこし前までは実現が難しかったエフェクトも、CSS3をつかったテクニックを利用することでより手軽に実現できるようになっています。世界中のデザイナーが作成したボタンデザインを確認しながら、マイクロインタラクションなど最先端のデザイントレンドを、プロジェクトに取り入れてみてはいかがでしょう。 詳細は以下から。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きま

パスワードを忘れた方はパスワードの再設定を行ってください。 初めての方ははてなID登録 (無料) してください。 うまくログインできない方はお問い合わせをご覧いただき、Cookieの設定をご確認ください。

多くの科学者は言います。「私たちは、高い確率で赤色を異なる風に認識している」と。しかし、その正確な理由を知るのは困難です。 さらに「Little Things」に掲載されていたRebecca Endicott氏の記事によれば、人は心理状態にもとづいて色を認識している可能性があるとのこと。逆を言うと、色の認識からあなたの性格が分析できるのです。ここでピックアップした2つの色で、ぜひ試してみませんか？ この曖昧な暗い色を見つめてください。そして、何色と呼ぶべきかよく考えてください。 ガンメタルやオリーブ、ティールと呼ぶ人がいるかも知れませんが、基本にあるのは何色だと思いますか？恐らく、緑か青、灰色のどれかでしょう。 この答えは、あなたの隠れた性格を明らかにします。