webサイトの1番下にある『著作権表示』色々な表記を見かけるけどどれが正しいのー？って思ったことありませんか？ Copyright(コピーライト：著作権表示)の 正しい書き方を知っていますか？ webサイトでいう『Copyright(コピーライト/著作権表示)』は、サイトの1番下にある Copyright © 2015 sometimes study All Rights Reserved. (c) 2010-2015 sometimes study All Rights Reserved. こんな感じの表記のことです。 このページの所有者は私ですよ！という『著作権の所有を示すおまじない』みたいなものですね。ひとつずつ、一緒に書き方をおさらいしていきましょう！ 『著作権(ちょさくけん)』って何？ まず、著作権とは？ってところからですね。 著書などの　制作物に対して　発生する権利 知的財産権

GPLに対する代表的な誤解・・・というかむしろ謎のひとつに、受託開発（SI）におけるライセンスの扱いがある。この点が明確になっていないため、受託開発において無意味にGPLを回避しようとしたり、GPLに対するFUDを流布することに対する原因になっていたりするように思う。フリーソフトウェアおよびオープンソースソフトウェアを愛する者として、そのような状況は断じて見過ごすことができない！！というわけで、今日はGPLを受託開発（SI）において用いる場合の注意事項を説明しよう。 GPLの使いどころ受託開発においてGPL（とその仲間たち＝LGPL、AGPL）が登場するのは、第三者、つまり発注側でも受託側でもない者が作成したGPLのソフトウェアを利用する場合である。例えばGPLが適用されたライブラリなどだ。周知の通り、GPLのソフトウェアをリンクしたソフトウェアを再配布する場合は、そのソフトウェア全体に対

クライアントの理不尽なフィードバックはどのように回避できるのでしょうか？　プロジェクトの目的が途中ですり替わったり、担当者の気分でデザインがひっくり返るような事態を防ぐにはどうすべきなのでしょうか？　多くの場合、これは製作者側やクライアントの能力の問題ではなく、事前の合意が不足していたことが原因です。 クライアントが初めから自らのニーズを完全に把握していることはありません。そのため、制作過程に気付いたことをその都度、要求してくるのです。ヒアリングを通じて、クライアントニーズをプロジェクト開始時点で正確に割り出すことは、デザインプロセスの最も基本的なステップです。 ステークホルダー まずはウェブサイトを誰に向けて作るべきかを定義します。クライアントのビジネスによっては潜在顧客ではなく、卸先のビジネスパートナーや求職者が最も重要な対象となるかもしれません。重要なステークホルダーを定義する際には

11月に入った後に「10月までで退職ってことにしてもらっていいかな」と言われたのが12年前のちょうど今頃でした。 今考えると、いや考えなくても結構ひどいっすね。 そんな流れでフリーランスになって丸っと12年たったわたしですが、今回13年目を迎えるにあたって一つ大きな転機もついでに迎えることとなりました。 続きを読む フリーランス13年目が会社員をはじめる理由

スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。 JavaScriptなどのプラグインを使用せず、CSSのみでフォームのラジオボタンやチェックボックスを画像で装飾する方法です。 さまざまな方法があると思いますが、1つの方法としてご参考いただければと思います。 まず、例えば以下のような未選択状態と選択状態のものを並べた装飾画像を1つ用意します。 今回は横幅15px、縦幅15pxの画像を縦に並べたもので装飾してみます。 次にHTMLの用意です。 <label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン1</label> <label><input type="radio" name="radio"

スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。

前回の記事で約物合字Webフォント「YakuLiga」を公開しました。全角約物が連続したときのアキを調整するフォントです。このフォントは合字機能の限界から以下の欠点があります。 約物の種類がとても少ない。 約物が連続で並ぶ個数を３個までに制限している。 そして前回の記事では最後に、この欠点を解決した新たなフォントの存在を予告しました。ここで本命の約物Webフォントを公開します！ 約猫明朝／約猫ゴシック https://github.com/monokano/Fonts 公開当初（v1.013）はSafariで表示の崩れがありましたが、v1.014で解決しました。 （全角約物や全角スペースを入力してみましょう） 縦組サンプル　約物を約猫明朝使用｜通常のフォントのみ 句読点や括弧などが連続したときのアキを自動的に調整します。 収録文字一覧 連続で並ぶ個数に制限はありません。 英語名は「Yaku

2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました！ v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

今回はConoHaのロードバランサーを使って、1000req/secをさばけるWordPressのクラスタ構成を作ってみます。WordPressの負荷軽減策やスケールアウトはよく語られるテーマではありますが、今回はロードバランサー、イメージ保存、1Gbpsのローカルネットワークなど、ConoHaならではの機能を使って構築してみます。またその際のチューニングポイントなども解説します。こちらはConoHa以外の環境でもきっと有用だと思います。 このページではあまり限界性能を引き出すチューニングを目指すのではく、実際に皆様がConoHa上でクラスタ構成を構築する際に、どういう構成を作れば良いのか、どんなオプションを使えば良いのか、スケールするにはどういうチューニングを行うのか、などの参考にしていただくのが目的です。WordPressは利用者も多く、PHPで書かれていてMySQLへの接続も必要な、

HTML5, CSS3, jQuery, WordPress, Bootstrap, SublimeTextなど、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 PDFや画像をダウンロードしたり、ブックマークしておいて、すぐに確認できるようにしておくと便利ですね。

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

テキスト入力欄を作るformのinputタグ。入力エリアをクリックしてinputタグがアクティブになっている時の枠の色を変えたいことがよくあります。 サイトのカラーに合わせてそういった細部にまでこだわりたいですよね。 以前にSafariやChromeでは見え方違って思うようにいかないことがありましたので、その対策も含めてご紹介します。

初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j

デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // STYLES - essential for sticky footer html { min-height: 100%; position: relative; } body { margin-bottom: 5em; } footer { bottom: 0; height: 5em; position: absolute; }

CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow

主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの