タグ Body
人気順 5 users 10 users 50 users 500 users 1000 users令和の怪物うしろシティ金子、「第1回ヘヴィメタル編み物世界選手権」で優勝 - お笑いナタリー
2019/07/11
138 users
令和
優勝
Facebook
お笑いナタリー
METAL
「第1回ヘヴィメタル編み物世界選手権」で優勝したGIGA BODY, METAL, from JAPAN。芸者の格好をしているのがうしろシティ金子。（@heavymetalknittingのFacebookより。） うしろシティ金子率いるGIGA BODY, METAL, from JAPANが、7月11日にフィンランド・ヨエンスーにて行われた「第1回ヘヴィメタル編み物世界選手権」で... 続きを読む
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？ - Qiita
2019/05/11
116 users
jQuery
Qiita
head
初歩
きっかけ
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？ 調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこし... 続きを読む
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス
2019/01/28
149 users
コリス
class
stylesheet
スクリプト
Libs
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む
GraphQLはRESTの置き換えではない｜こんぴゅ｜note
2018/05/07
129 users
method
RESTful
GraphQL
REST
API
GraphQLは最近注目されているWeb APIのための問い合わせ言語だ。 現在主流の RESTful なAPIはURLとmethodでリソースを表現するわけだが、GraphQLは単一エンドポイント（ex: "POST /graphql"）だけ存在し、欲しいリソースをHTTP POSTのbodyに明示的に記載してリクエストする。 ↑JSON APIをGraphQLの形式でコールする（引用: ho... 続きを読む
W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開 － Publickey
2017/12/14
226 users
Publickey
バグフィクス
勧告
dialog
HTML
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、 勧告としました 。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- ... 続きを読む
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
2016/03/23
277 users
$shibayu36
Blog
参考
gzip
tech
2016 - 03 - 23 フロントエンド速度改善をしようとして参考にしたもの tech 最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、 gzip 圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあ... 続きを読む
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height | コリス
2015/09/10
179 users
コリス
script
Step
スクリプト
レスポンシブ対応
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init();... 続きを読む
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス
2015/08/03
338 users
jQuery
コリス
Step
スクリプト
デモ
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む
たぶんみんな間違えてる golang の HTTP Respose Body の閉じ方 - 押してダメならふて寝しろ
2015/06/04
140 users
golang
Traps
ふて寝しろ
Gotchas
閉じ方
2015-06-04 たぶんみんな間違えてる golang の HTTP Respose Body の閉じ方 元ネタはこちらのブログ． 50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs あまりにも衝撃的でした．HTTP Response の Body を閉じるとき，たぶん，みんなこう書いてると思うんだけ... 続きを読む
CSSのみでフルスクリーンの動画背景を実装する方法 | NxWorld
2015/05/25
134 users
NxWorld
Poster
CSS
jpg
スクリプト
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずにCSSのみで実装する方法です。古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ以下のように記述します。 HTML <body> <video autoplay loop poster="img.jpg">... 続きを読む
[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック | コリス
2015/05/11
131 users
ブッダ
footer
コリス
マージン
CSS
デモページ（コンテンツ量が多い時） 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // ST... 続きを読む
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ | コリス
2015/03/30
413 users
コリス
GitHub
BOD
class
スクリプト
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bod... 続きを読む
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
2014/11/14
121 users
コリス
Demo
canvas
Step
アニメーション
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid | コリス
2014/11/10
110 users
WebM
コリス
jquery.js
Step
セクション
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む
<html>,<body>は要らない？Googleが推奨するHTMLファイルの記法
2014/04/30
380 users
head
title
お決まり
HTMLファイル
Google
Googleが公開していたGoogle HTML/CSS Style Guideによると、よく使われる下のようなHTMLのお決まりの記法は非推奨らしい。 <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html> これはフ... 続きを読む
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス
2014/01/30
215 users
jQuery
コリス
head
jquery.js
Step
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link r... 続きを読む
[CSS]背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
2013/11/10
418 users
article
コリス
article要素
半透明
デモ
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰で... 続きを読む
<html>,<body>は要らない？Googleが推奨するHTMLファイルの記法 - Qiita
2013/08/28
559 users
Qiita
knowledge sharing
HTML
Qiita - A technical knowledge sharing platform for programmers. 続きを読む
IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA
2013/07/03
427 users
IDEA
Helvetica
Helvetica Neue
ドットインストールのお問合せでご指摘いただいたのですが、IE9、IE10で次のようなバグがあるそうです。知らなかった・・・爆発してくれ。 ■ 発動条件 次のような条件で発動します。 bodyのfont-family指定で、最初にHelvetica（Helvetica Neue）が記述されている。 閲覧しているPCにHelvetica（Helvetica Neue）がインストールされている。 ■ 現... 続きを読む
[CSS]ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
2013/02/19
213 users
コリス
Depth
fixed
奥行き
position
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 [css] body:befo... 続きを読む
MVC is dead, it's time to MOVE on.
2012/07/02
464 users
MVC is dead
background
pre
MVC is dead, it's time to MOVE on. body{ font-family: 'Liberation Serif', 'Georgia'; background: #FFE; } code { white-space: pre; } article{ -moz-column-width: 60ex; -moz-column-gap: 4em; -moz-column-... 続きを読む
【デカ顔も小顔も】デカ顔化防止のための生活方法【見とけ】 | ライフハックちゃんねる弐式
2012/05/03
120 users
ライフハックちゃん
小顔
弐式
read.cgi
test
http://uni.2ch.net/test/read.cgi/body/1260378710/ 1 ：病弱名無しさん：2009/12/10(木) 02:11:50 ID:j2yO0aGxO やっぱり顔は小顔の方がいいよな デカいと間抜けに見える だが、40歳くらいまで顔はデカくなり続けてるらしいんだ だから今小顔の人もデカくなるかもしれない そこで顔がデカくならないように普段の生活で気をつける... 続きを読む
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide | コリス
2012/03/12
135 users
PageSlide
コリス
stylesheet
スクリプト
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleap... 続きを読む
チームラボボディ－TEAMLAB BODY
2011/06/14
239 users
TEAMLAB BODY
チームラボボディ
骨格
精度
形態
チームラボボディ（TEAM LAB BODY）は、世界初、生きた人間の動きに基づく骨格・筋肉の高精度な形態、モーションが搭載された、インタラクティブな解剖学書です。世界初、生きた人間の動きに基づく骨格・筋肉の高精度な形態、モーションが搭載された、インタラクティブな解剖学書。 About TEAMLAB BODY Help 続きを読む
CSS のみで吹き出し - terkel.jp
2009/12/06
485 users
terkel
Demo
div
Weblog
CSS
hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む