Web開発を爆速にする！Sublime Text 用のすごい拡張プラグイン厳選15個まとめ
Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの
4行でページトップまでスルスルスクロールを実装するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
4行でページトップまでスルスルスクロールを実装するjQuery 「ページトップへ」ボタンをクリックするとトップまでスクロールするjQueryをご紹介します。 ひとまずページの上までするスルッとスクロールさせたいんだよって時の選択肢の一つにいかがでしょうか。 説明 下記のJSを使用することで「btn_top」というクラス内のaタグ付きボタンをクリックすると作動します。 JS $(function(){ $(".btn_top").click(function () { $('html,body').animate({ scrollTop: 0 }, 'fast'); return false; }); }); jquery本体と、 上記スクリプトをコピーして「pagetop.js」などというファイルを作成して読み込ませて下さい。 （head内に書く場合は<script type=”text/
HTMLとCSSで東京2020年オリンピック+パラリンピックエンブレムを作った
2020年の東京オリンピックエンブレムが最終候補の４作品の中から市松模様の「作品Ａ」に決定したと聞いたので、早速HTMLとCSSで再現してみました。 東京2020大会エンブレム｜東京オリンピック・パラリンピック競技大会組織委員会 デモ・ダウンロード まずはデモをご覧ください。別ページで開く場合、下のデモやダウンロードからも見ることが可能です。 Demo zipファイルをDownload 画像を一切使わずにCSSの擬似要素:before:afterとbox-shadowを多用して作っています。スマホは考慮していないので横幅が狭いスマホだと見きれてしまうかも。 参考までに本物のエンブレムはこっち。細かいところを見るとフォントが違ったり微妙に配置が異なっていますが、HTMLとCSSだけでほぼ同じような物が作れます。 新エンブレムのある法則 エンブレムは正方形と長方形の3パーツで出来ています。分か
CSSだけで矢印を作ってみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
ワーキングマザーの池島です。 年度末に差し掛かり、保護者会や学校説明会、卒園対策委員などで忙しくしております。 現在、自社のコーポレートサイトの制作をしており、初めてやってみることがあったり、試してみたかったことをやってみたりと、スキルアップにも良い機会となっています。 そんな中、画像を使わずにCSSを使って矢印を作る機会がありましたので、備忘録も兼ねて、いくつかご紹介したいと思います。 サポートブラウザは、基本的に最新のバージョンを想定しています。 ::before や ::after を使わず、別のオブジェクトとして扱えば、もっと古いバージョンでも使えると思います。 今回は、HTMLがシンプルにできる方法で考えました。 左から右のグラデーション矢印 まずは、スタンダードな矢印です。グラデーションを付けてみました。 ［IE8〜（グラデーションはIE10〜）］ HTML <div clas
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック
デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // STYLES - essential for sticky footer html { min-height: 100%; position: relative; } body { margin-bottom: 5em; } footer { bottom: 0; height: 5em; position: absolute; }
![[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e55a7967f77bbcc88ed8e9e24c73a34c021f77e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051101.png)
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
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
スクリーンサイズに合わせてフォントサイズを変更 | 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
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
Googleの検索のアルゴリズムにおける検索結果の順位に影響を与える200+個の要因、コンプリートリストを紹介します。 量が多く翻訳するのに一週間かかりましたが、興味深いことが多々あり、とても面白かったです。 Google's 200 Ranking Factors: The Complete List 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 毎日のように海外のまとめ記事を無断転載してアクセスを稼いでいるあのブログの注意喚起を海外のブロガーから聞きます。問い合わせや削除依頼しても対応無しっていうから、たちが悪い。 ドメインによる要因 ページレベルによる要因 サイトレベルによる要因 バックリンクによる要因 ユーザーのインタラクションによる要因 アルゴリズムによる要因 ソーシャル シグナル ブランド シグナル サイト内部のスパム
Refills - Patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
2/2 リンク文字の直後にアイコンを加える [ホームページ作成] All About![2/2 リンク文字の直後にアイコンを加える [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
Sites Of The Day - Awwwards
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
