タグ

htmlとwebに関するta-nblのブックマーク (7)

  • Web開発を爆速にする!Sublime Text 用のすごい拡張プラグイン厳選15個まとめ

    Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの

    Web開発を爆速にする!Sublime Text 用のすごい拡張プラグイン厳選15個まとめ
  • Sites Of The Day - Awwwards

    Best selection of Sites Of The Day for your inspiration... Read more Sites Of The Day on Awwwards, the awards that recognize the talent and effort of the best web designers, developers and agencies in the world.

    ta-nbl
    ta-nbl 2014/12/08
    beautiful web sites is here
  • floatで並べた li 要素の中央寄せ | Web Design Leaves

    いつも忘れてしまうのでメモ。詳細は以下のサイトで。 参考にさせていただいたサイト:hail2u.net「floatで並べたリストのセンタリング」 以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。 <div class="materials"> <ul> <li>gold</li> <li>silver</li> <li>copper</li> </ul> </div> /* CSS */ li { float: left; } .materials { position: relative; overflow: hidden; } .materials ul { position: relative; left: 50%; float: left; } .materia

    ta-nbl
    ta-nbl 2014/08/13
    これいつも悩む。そう、これです!!
  • スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves

    <section> <h1 class="title">Media Queries</h1> <p class="main-text">Animi sint corrupti ipsum sunt...</p> <section> <h2 class="title">Break Point</h2> <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p> <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p> </section> <section> <h2 class="title">Grid System</h2> <p class="main-text">Sapiente dolorum impedit commo

    ta-nbl
    ta-nbl 2014/08/13
    レスポンシブのフォントサイズ指定
  • Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ

    Googleの検索のアルゴリズムにおける検索結果の順位に影響を与える200+個の要因、コンプリートリストを紹介します。 量が多く翻訳するのに一週間かかりましたが、興味深いことが多々あり、とても面白かったです。 Google's 200 Ranking Factors: The Complete List 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 毎日のように海外のまとめ記事を無断転載してアクセスを稼いでいるあのブログの注意喚起を海外のブロガーから聞きます。問い合わせや削除依頼しても対応無しっていうから、たちが悪い。 ドメインによる要因 ページレベルによる要因 サイトレベルによる要因 バックリンクによる要因 ユーザーのインタラクションによる要因 アルゴリズムによる要因 ソーシャル シグナル ブランド シグナル サイト内部のスパム

    ta-nbl
    ta-nbl 2014/07/23
    自分にも活かせるところを見つけて取り入れよう!
  • インチキなし、正統SEOテクニック完全攻略ガイド基本編

    SEOの基テクニックを網羅的にまとめてみました。 24個の技を紹介しています。 titleタグにキーワードを入れる お役立ち度:★★★★★★★★☆☆ HTMLの<title>タグの中に上位表示させたいキーワードを入れましよう。 SEO効果があります。それも相当大きな効果があります。 以下、タイトルの決め方について考えていきましょう。 たくさんキーワードを詰め込みたいところですが、それは避けるべきです。 SEOは昔話と同じで、欲目を出すと罰を喰らいます。1~3個のキーワードが妥当でしょう。 タイトルの中でも、より前にある単語が重視されると言われています。 つまり、『新宿ラーメン山田堂』というタイトルにすれば、 「新宿 ラーメン」で検索したとき順位が上がり、 『ラーメンなら新宿山田堂』というタイトルなら、「ラーメン 新宿」で検索したときに強い、と。 もっとも、私はその辺りあまり気にし

    ta-nbl
    ta-nbl 2014/01/14
    とても役立つ!!やはりこれだよな。地道に基礎を徹底していくことだと僕も思っています。
  • CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld

    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ

    CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld
    ta-nbl
    ta-nbl 2014/01/11
    使えるボタンエフェクト!
  • 1