サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
fr-br.com
「pushState」を使って切れ目のないページ遷移を実現するための技術メモです。うちのブログは記事を更新するよりもガワ部分を更新するのがメインになっていますが、今回はすべてのページ移動に非同期遷移を採用してみました。 ※現在はリニューアルしたため廃止しています。 具体的やっていることは、①jQueryの .load(); でリンク先のコンテンツを読み込み、②HTML5の pushState でブラウザの履歴を追加する、といった内容です。 .load(); だけだと同ページ内にただコンテンツを読む込むだけですが、 pushState という技術を使って履歴の追加とURLの書き換えを行うことで、ページ移動を行っているかのように見せかけるんですね。 メリットはページ移動時に「切れ目」が生まれないことで表現の幅が広がる。魅力的だけどデメリットもたくさんあって、それを解決していったまとめを書き殴
最近はデザイナー間でも「CSSはSCSSで書く」というの当たり前になってきていますね。もう最前線から退いて、最新技術にはついていけなくなった身近のおばちゃんデザイナーも、普通にSCSSで書いててびっくりしました。これからのWeb制作スタンダードについていけるよう、きっちり導入していきましょう。2016/8/18 最近環境を入れ直したのですが情報が足りていなかったので書き足しました。 最近はデザイナー間でも「CSSはSCSSで書く」というの当たり前になってきていますね。もう最前線から退いて、最新技術にはついていけなくなった身近のおばちゃんデザイナーも、普通にSCSSで書いててびっくりしました。これからのWeb制作スタンダードについていけるよう、きっちり導入していきましょう。 「SCSSとはどんなものか」というのは割愛しますが、仕様を理解してきたらもう通常のCSSには戻れない能率的な作業を行う
CSS3.0の仕様はいつの間にやら安定し、今や新しい技術でも何でもなく「使って当たり前のもの」になってきました。気付けばベンダープレフィックスもいらなくなってきているので、よく使うもので不要になったものをまとめてみました。 border-radius 角丸。 boxCSS3.0の仕様はいつの間にやら安定し、今や新しい技術でも何でもなく「使って当たり前のもの」になってきました。気付けばベンダープレフィックスもいらなくなってきているので、よく使うもので不要になったものをまとめてみました。 border-radius 角丸。 box-shadow ボックス影。 text-shadow【IE9非対応】 テキスト影。 box-sizing paddingやborderも含めて幅を計算してくれるやつ。 background-size 背景画像の大きさ。 transition 要素に動きをつけるやつ。
アイカツのブランドロゴやユニットロゴに使われているフォントを探してみました。以前小分けに出してた記事をリニューアルに伴いひとまとめにした。この記事はユニットロゴ編です。 ソレイユ アドビの「Cooper Black」。このフォントは他にもハッピーレインボーのロゴやアイカツ8のロゴに使われています。 Cooper Black https://typekit.com/fonts/cooper-black-std トライスター “T”に使われているのはアドビの「Adobe Caslon Bold Italic Swash」。“ristar”に使われているのは同じくアドビの「Adobe Caslon Pro Bold Italic」です。丸みがついて一体感のあるロゴに仕上げられていますね。 Adobe Caslon https://www.myfonts.com/fonts/linotype/ad
アイカツのブランドロゴやユニットロゴに使われているフォントを探してみました。以前小分けに出してた記事をリニューアルに伴いひとまとめにした。この記事はブランドロゴ編です。 エンジェリーシュガー Macの標準フォント「Apple Chancery」が使われています。“l”と“y”が合体して翼の形になっているのが特徴的ですね。Aとnの下にある曲線はなんだろう?口か?顔になってるのか!? Apple Chancery https://www.myfonts.com/fonts/apple/chancery/ フューチャリングガール 斜めっているせいか完全に一致するフォントは見つけられませんでした。同タイプのフォントをいくつかピックアップします。 Orbitronが一番近いように感じますが、第71話「キラめきはアクエリアス」で行われた『FUTURING GIRL COLLECTION LIVE』のロ
当ブログの記事リストページを少し変更しました。 他にも色々テコ入れすべき点はあるけれどそこは置いといて。 1カラムにして無限スクロールを実装してみました。 無限スクロール系のScriptは以前から色々とありましたが、 今回はjQueryプラグインの『infinite scroll』を試してみた。 似たような名前で『Infinite Ajax Scroll』ってのもあるけどこれとは別。 導入 Facebook風の無限スクロールが作れるinfinite scroll ASCII.jp こちらの記事を参考に。 というかこの記事を見れば使い方はわかるので、 ここではMovableTypeのPageButeプラグインを組み合わせたサンプルを置いておきます。 <div class="content"><!--コンテンツとナビゲーションを囲む--> <!--コンテンツ--> <div cla
「そういえばInstagramに登録してたけど全然使ってないなぁ。最近上げた画像をブログに載せたりして露出を増やせるなら使い道が増えるかも...」と、ある日考えた。 Instagram APIの登録から利用までの流れをまとめておきます。 1. アプリケーションの登録 まずはhttp://instagram.com/developer/にアクセス。 自分のInstagramアカウントでログインし、アプリケーションの利用登録をする。 ウェブ上で利用する場合は、自分のサイト情報を入力していく。 OAuth redirect_uriは、のちにアクセストークンを取得する際にリダイレクトされるURLになる。適当でも大丈夫そうだが、自分のサイトURLを入れておく。 利用登録をしてクライアントIDを取得しました。 次に、このクライアントIDを使ってアクセストークンを取得します。 2. アクセストーク
そういえばInstagramに登録してたけど全然使ってないなぁ 最近上げた画像をブログとかに載せたりして露出を増やせるなら 使い道が増えるかも・・・と、ある日考えた。 Instagram APIの登録から利用までの流れをまとめておきます。 1. アプリケーションの登録 まずはhttp://instagram.com/developer/にアクセス。 アプリケーションの利用登録をします。 ウェブで利用する場合はサイト名とか入力します。 Description: 適当でOK OAuth redirect_uri: ここも適当に自分のサイトURL入れときましょう アプリケーション登録して、クライアントIDを取得しました。 次はこのIDを使ってアクセストークンを取得します。 2. アクセストークンの取得 https://instagram.com/oauth/authorize/?cli
このページを最初にブックマークしてみませんか?
『Frozen Brownie|フローズンブラウニー』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く