サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
tukumemo.com
雪を降らすjQueryのプラグインでは、JQuery-Snowfallが有名みたいですが、ここは自分でやってみたいと思います。 loktar00/JQuery-Snowfall · GitHub 本当にちゃんと作ると、パーティクルエンジンになってしまい、さすがに大変なので、簡単に考えます。 こんな感じでいきましょう。 設定できるプロパティ 設定できるプロパティはこんな感じにします。 wrap:'*',//配置する場所 targetClass: '*',//オブジェクトのクラス size: {max: *, min:*},//オブジェクトのサイズ objectMax: *,//オブジェクトの数 speed: *,//オブジェクトの速度 swing: {max: *, min:*, speed:*},//オブジェクトの揺れ幅 imgpath: '*'//オブジェクトの画像パス function
現在、Sublime Text 3を使っていますが、使い勝手によっては、乗り換えを検討したいと考えていました。 結論から言うと、まだ、Sublime Text 3をメインで使用しています。 こんな感じで比べてみました 特徴的な機能 操作について Linterについて デメリット 特徴的な機能 まず前提として、これらのエディタには、以下のような機能が求められたのだと考えます。 Eclipseなどの統合開発環境よりも、気軽にコーディングしたい。 Dreamweaverよりも軽く動作し、カスタマイズしやすいものが良い。 普通のテキストエディタよりもコーディングしやすい。 環境が変わっても扱えるものが良い(マルチプラットフォーム) これらは当たり前なので、それ以外の特徴的な機能を書き出してみます。
モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass(SCSS)は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass(SCSS)をまとめてみます。 Sass(SCSS)とは Sassとは、Syntactically Awesome Style Sheetsの略です。 CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、{}や;が必要がない書き方。 拡
メディアクエリ(Media Queries)の罠 – $(window).width()とスクロールバー 2015-05-26 JavaScript スクロールバーが表示される場合その幅を含んでしまうということです。 メディアクエリだけで、レスポンシブWebデザインを行うのであれば、ブレークポイントのずれがないので、問題ありません。 しかし、JavaScriptを一緒に使う場合は、注意が必要です。 jQueryでWindowサイズを取得する場合、このように書くことが多いと思います。 これだと、スクロールバーの幅が含まれていないので、15~20pxくらいメディアクエリと差が出てしまいます。 jQuery if ( $(window).width() < 768 ){ ... } レスポンシブで、メディアクエリとともにJavaScriptを併用するとき、メディアクエリ側でスクロールバーを含むの
どうも、もりさんです。 すっかり月一更新となってしまいました。 以前、CSSの命名規則について考えるという記事を書きましたが、実際にBEMを使用してみて、すごく良かったので、まとめてみます。 CSSの命名規則について考える BEM(ベム)について CSSの命名規則の一つで、Block(ブロック)、Element(エレメント)、Modifier(モディファイア)の略です。 Elementの前には_(アンダーバー)二つ、Modifierの前には-(ハイフン)二つで区切って、class名をつけます。 .block__element--modifier{ ... } これらの区切り(セパレータ)は、必ずしも二つである必要はありません。 しかし、class名を見るだけで、BEMを利用していると分かるので、二つにした方が良いと、考えています。 それ以外、名前のつけ方には、特に難しいことはありません。
みなさんは、構造化データというものを聞いたことがありますか? 簡単に言えば、検索エンジンにサイトの情報を分かりやすく伝える方法です。 Googleで検索してみると、こんな感じで表示されるものが、それに当たります。 拡張された検索結果を、リッチ スニペットと言います。 どうしたら、このように表示させることができるのでしょうか? データ ハイライターとマークアップ リッチ スニペットを表示させるためには、以下の方法があります。 マークアップを追加して、構造化データを認識させるデータ ハイライターを使用する マークアップを追加して、構造化データを認識させる サイトのHTMLを編集できれば、構造化データのマークアップを追加することで、リッチ スニペットを利用することができます。 マークアップの形式は、3つあります。 Googleが、microdataを推奨しているので、新しくマークアップするのであ
いつものNode.jsのインストール Windowsは、公式サイトから実行ファイルをダウンロードしてインストールしましょう。 Macも同じようにインストールできますが、Homebrewというパッケージ管理ツールを使用しても良いです。 node.js Homebrew Gulpをインストール Node.jsが用意できたらGulpをインストールしましょう。 WindowsならDOSコマンドプロンプト、Macならターミナルからコマンドを実行していきます。 > npm install -g gulp Gulpを使うディレクトリを作成しましょう。 > mkdir project > cd project package.jsonを作成します。基本的には、全てEnterで大丈夫です。 > npm init This utility will walk you through creating a pa
こんにちは、もりさんです。 すでにもう有名ですが、Sublime Textについて書きます。 少し前にたまたまcssが3000行くらいになった時、DreamWeaverが遅い、と思ってしまいました。 というわけで、いろいろ検索して調べたり、良さそうなエディタをピックアップし、Sublime Textに決定しました。 Sublime Textの良いところ Sublime Textの良いところをいくつか上げてみます。 とにかく軽い 他にも軽いエディタがありますが、これもかなりの軽さです。 クロスプラットフォーム WindowsとMac、さらにLinuxにもあります。 自宅や会社でPCが変わっても違和感はでません。 プラグインが多い 実は、そのまま使うと、あまり良さが出ません。 自分にあったプラグインを見つけて、入れましょう。 カスタマイズ テーマが豊富で、各種設定が細かくできます。 前の状態で
ほぼ Internet Explorer のサポートが終わったことで、気兼ねなく CSS Grid レイアウトが使えるようになりました。 Bootstrap のような擬似的なものではなく、display: grid / display: inline-grid をつかうことで、自在にレイアウトできるようになります。
※2014.09.12一部修正しました。 こんにちは、もりさんです。 今回は、動画で学べるコンテンツを体験してみました。 以前から使っていたサービスはありますが、改めて調べたり実際に授業を受けてみました。 (2014.09.12追記) @yukiimadaさんより間違いをご指摘いただき、アオイゼミさん部分を一部修正しました。ありがとうございます。 ほかにも間違いなどを見つけたご覧の方、@it_morisanまで気軽に連絡ください。 よろしくお願いいたします! schoo(スクー) https://schoo.jp/ 大学の講義のように、決まった時間に教室に集まって受講します。 独自のタイムライン機能で、先生・学生同士の対話が可能です。 概要 ■内容 授業内容は複数ありますが、大きなカテゴリとして、以下のようになっています。 WEBデザイナー学部 スタートアップ学部 グローバルビジネスパーソ
このページを最初にブックマークしてみませんか?
『ツクメモ - ウェブやアプリをツクるヒトのメモ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く