サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.tipdip.jp
ウェブサイトを作成する際に、コンテンツの内容が少ないページのフッターがウィンドウの途中に来てしまって、下に不自然に余白ができてしまう問題ってありますよね。 ↑こういう状態です。 JQueryを使って、調整する方法もあるのですが… 今回はCSS3のflexboxだけでフッターをウィンドウの最下部に固定する方法を紹介していきます！ まずはデモページを作成したのでご覧ください。 コンテンツ高がウィンドウより低い場合にはフッターが最下部に固定されます。 そして、コンテンツ高がウィンドウサイズを超えると、フッターはその高さに自動的に調整されているのが分かるかと思います。 早速、次項で使い方を説明していきます。 HTMLとCSS を記述する まずはHTMLを記述をしていきます。 と言っても、特別何かを用意する必要はありません。 最低限書くのはこれだけです。 <body> <div id="wrappe
今回はJQueryの「Masonry」を使用して、画像をタイル状に並べる方法を紹介していきたいと思います。 まずはデモページを用意したのでご覧ください。 ウィンドウサイズを切り替えると、自動的に横並びの数を調整してくれるので、レスポンシブサイトにも使用することができます。 では、次項から早速解説していこうと思います。 head内の記述 まずはHTMLファイルのhead部分を記述していきたいと思います。 head内にjQueryとMasonryプラグインを記述 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/masonry.pkgd.min.js"></script> <script src="js/imagesloaded.pkg
今回は切り替えが可能なモーダルウィンドウの作成方法をご紹介します。 まずはデモページを用意したのでご覧ください。 今回はこれを作っていきたいと思います。レスポンシブにも対応していますので使い勝手は良いかと思います！ それでは早速、次項から詳しく説明していきたいと思います。 HTMLを記述 まずはHTMLを記述していきます。 HTMLを記述する <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="js/func.js"></script> </head> <body> <di
追記 この記事で画像をウェブサイト上に表示するのに使用しているInstagram API platformは2018年7月31日から2020年の初めにわたり、順次サービスを終了していく事がアナウンスされています。 詳細はFacebook for developersの開発者向けニュースに記述されているので、そちらを参考にしてみてください。 今回はウェブサイトにInstagram（インスタグラム）の写真をホームページ上に表示する方法を紹介したいと思います！ インスタグラムの埋め込み方法はいくつかあるのですが、今回はInstagram APIを使う方法で解説していきます。 Instagram APIの仕様については次項で詳しく説明していきたいと思います。 Instagram APIの仕様 デベロッパーページで開発者登録すると、「Sandbox Mode」でInstagram APIが利用可能に
今回は軽量で使い勝手のいいレスポンシブ対応スライダー『slick』について解説していきます。 レスポンシブ対応のスライダーは他にも有りますが、slickはブレイクポイントが設定可能な他、マウスドラッグでスワイプにも対応しているなど非常に使い勝手の良いスライダーだと思います。 それではファイルのダウンロードから順番に説明していきます。 必要なファイルを準備する slickはこちらの配布サイトからファイルをダウンロードすることができます。 ファイルをダウンロードすると中に色々ファイルが入っているかと思います。その中から今回必要なファイルを以下にまとめました。 必要なファイルはすべて『 slick』に入っています。 早速、これらを使ってサイトにスライダーを表示させて行きましょう！ HTMLを記述 HTML <head> ・ ・ 中略 ・ ・ <link rel="stylesheet" type
2016年2月に神戸市のウェブサイトがリニューアルされ、検索窓が全面にフィーチャーされたトップページになりました。 参照元：http://www.city.kobe.lg.jp/ 検索窓はユーザーが知りたいキーワードをそのまま情報として収集できるので、WEBマーケティングにおいて非常に重要な役割を担っています。 神戸市のウェブサイトが話題になった事で、注目度は一気に高まったのではないでしょうか。 ということで、今回はGoogleカスタム検索をウェブサイトに設置する方法を紹介します！ 準備 カスタム検索の作成時にはGoogleアカウントが必要です。まだGoogleアカウントを持っていない場合は先に取得してください。 Google アカウントの作成 – Google Accounts カスタム検索を作成する まずはGoogleカスタム検索を作成します。 カスタム検索エンジン – Google
2016年11月1日にW3Cより正式勧告があったHTML5.1。 勧告から３ヶ月以上が経った現在でも、追加された機能のほとんどは主要ブラウザ全てに対応していません。 今後、現場ベースで使えるようになって行くことに期待をこめて、今回はHTML5.1で追加されたものの中から使える機能をピックアップして紹介していきます！ <picture>タグで画像を切り替える 今までJavaScriptやCSSでしか行えなかった画像の切り替えですが、<picture>の記述のみで可能になりました。例として以下の画像を用意してみました。 ウインドウサイズを狭めていき、1000px以下になった時に自動的に画像が切り替わっているのが確認できると思います。そして、これがそのために必要なソースです。 <picture> <source media="(min-width: 1000px;)" srcset="min10
今回はアイコンフォントの使い方について解説していきます！ アイコンフォントは『Font Awesome』も有名ですが、そちらの方は既に解説されている方が多数いらっしゃったので、この記事では『Material Design Iconic Font』を使いたいと思います！ ちなみに使い方はどちらもだいたい同じです。 Material Design Iconic Fontについて こちらがMaterial Design Iconic Fontのサイトです。 Material Design Iconic Font by zavoloklom まずは一番気になるレギュレーションから確認していきましょう。 レギュレーションについてはこちらのLicenseページで確認することができます。 Material Design Iconic Font :: License 詳細は割愛しますが、アイコンを商用利用
Webサイトで画像に動きを付けたい場面、みなさんも何度か経験したことがあると思います。画像に動きがあると、大きなアクセントになりますよね。 今回はレスポンシブなサイトでも使いやすい、SVGとJavascript『Vivus.js』を使用したアニメーションについて書いて行こうと思います！ ちなみに、今回の完成図はこちら。 See the Pen SVGアニメーション by tipdip (@tipdip_blog) on CodePen. 『Vivus.js』はここからダウンロードできますので、始めに取得しておいてください。 SVG画像を用意する まずは画像を用意しましょう。 SVGファイルはAdobe illustratorで作成することができます。 今回はサンプルでチップディップのロゴを用意しました。 画像を作成する際、テキストはアウトラインに変換しておいてください 『ファイル』から『別
このページを最初にブックマークしてみませんか？
『www.tipdip.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
