今日からはじめるGitHub ～ 初心者がGitをインストールして、プルリクできるようになるまでを解説 エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ソースコードの管理はできていますか？ ファイルを修正するときに、修正前のソースコードをhoge.php.bakのようなバックアップファイルとして残し、開発環境をゴミだらけにしていませんか？ エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ここではGitの詳細な仕組みには触れません。GitやGitHubを利用したことのない人が、Gitを

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he

2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU

[レベル: 中〜上級] タブ切り替え型のデザインで、タブを選択したときに初めてコンテンツが生成される場合、Googleはそのコンテンツをインデックスしないかもしれません。 「タブ+動的生成」コンテンツをGooglebotは見ない Bootstrapを利用したタブ切り替え型UIに関するStack Overflowでの質問にGoogleのGary Illyes（ゲイリー・イリーズ）氏は次のようにコメントしています。 No, we (Google) won’t see the content behind tabs iff the content under the tab is dynamically generated (i.e. not just hidden). タブの裏にあるコンテンツが（ただ隠れているだけではなくて）動的に生成されるとしたら、私たち（Google）はそのコンテンツを見

みなさん、positionは使っていますか？ 使えるようになるととても便利、だけど理解せずに使ってしまうと酷い目に合うのがposition。 特にプレーンテキストと組み合わせる事が難しいので、敬遠している人が多いかも。 今回はそのpositionの使い方と、ちょっとしたテクニックを紹介します。 まずはpositionの基本から positionに指定できるのは下記の4つ。 static 初期値です。指定する事が無いかと言えばそうでもなく、指定したpositionを打ち消す時に使います。レスポンシブでは必須。 relative 相対位置への配置です。開始位置はstaticと同じです。実用の際にはabsoluteの開始位置として使用する場合が多くなります。 absolute 絶対位置への配置です。static以外が指定された親要素を基準とした配置です（ほとんどの場合relativeになります）

人気カーアクションシリーズの第4作目として2015年に公開された『マッドマックス 怒りのデスロード』。本作はシリーズのファンだけでなく幅広い層の観客に熱狂的に支持され、大ヒットを記録しました。 この作品で強烈な印象を残したキャラクターとして、火を吹くギターをかき鳴らす男が挙げられるでしょう。しかし彼について詳しいことはほとんど知られていません。今回は、そんな“ギター男”の裏話を紹介します。

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

@JUNP_Nです。ロゴを作成するのは想像以上に大変です。ざっくりとイメージだけ伝えて、デザイナーさんにお願いするというのも良いと思いますが、ざっくりとイメージだけ入力してロゴを作成してくれるWebサービスもあります。「Design Rails」はまさにそんなサービスです。 ざっくりとイメージを入力すると自動でロゴを作成してくれるWebサービスLogo Design - Design Rails 今回紹介するのは「イメージをざっくりと入力するとロゴを自動作成してくれる」というWebサービス「Design Rails」です。 「Logo Design - Design Rails」にアクセスし、まずは「SIMPLE」か「COMPLEX」かイメージを選択します。 続いて「CLASSIC」か「MODERN」かを選択。以下、このうようにイメージを選択していくことで、最終的にロゴを自動で作成してくれ

01 CONCEPT 百年の昔日、百年の向日 長楽館は明治42(1909)年に、実業家・村井吉兵衛によって建てられて以来、 京の迎賓館として国内外の様々なお客様をお迎えしてきました。 これまでの百年、そしてこれからの百年。 この館には華麗なる歴史の面影が今も残り、当時と変わらぬ満ち足りた時間に包まれることでしょう。

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

HOMEブログウェブ制作HTMLメールのレスポンシブ化。 | ネクストページブログ こんにちは、藤中です。 最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。 パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。 最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。 今回は制作者向けの情報です。 HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。

こんにちは。 先日、東京観光をしていた祖母は、『新神戸を寝過ごして、気がついたらは博多に居たらどうしよう！？』と怯えながらも、無事自宅まで帰ることが出来たようです。めでたしめでたし。 さて、またぼけっとネットサーフィンをしていると『お年寄り』について気になる記事を見つけました。 nbitokyo.com ざっくりまとめると、 老人は皆貧乏でケチである。 故に、老人比率上昇すると、市場が低所得者層に占められ『共産主義化』する。 というような内容でした。ただ、記事を読んでいて『はてな』と思うことが何点か有ります。 そもそも、所得を『家計』ベースで計算したら、独居率の高い高齢者は、所得が下がる可能性が高いのでは？ 例え収入が少なくとも、住宅ローンの支払が終わっていることなど、家計に余裕はあるのでは？ などなど疑問が浮かんできました。というわけで、調べてみました(ﾟДﾟ) 高齢者はその他の世代より

High Quality Printing for professionalsアイデアを最高品質でかたちにする。すべてのプロフェッショナルのために。 株式会社シルクマスターはグラフィックデザインとアパレルプロダクトのちょうど間に立ってデザインをかたちあるモノにしてゆくプロセスを担っています。詳しくは、シルクスクリーンをはじめとした印刷技術を使ってグラフィックTシャツを中心にアパレルプロダクトの印刷・加工を行っています。現在まで、様々なブランドやクリエーターとパートナーシップを結びアイデアの実現をお手伝いしてきました。その中で培われてきたファッション性と高度な印刷技術という視点の異なる二つをバランス良く相乗させ完成度の高い製品づくりを行っています。アパレルブランドはもとよりグラフィックデザイナーやイラストレーターの皆様により広く当社の印刷技術を知っていただきたく、プロフェッショナルな現場で働