finefinefine.jpThis domain may be for sale!
下記リストの並び順をランダムに切り替えて表示させるには、どうしたら良いでしょうか?私の知識は、HTMLが少しできる程度です。... - Yahoo!知恵袋
下記リストの並び順をランダムに切り替えて表示させるには、どうしたら良いでしょうか? 私の知識は、HTMLが少しできる程度です。 できるだけ簡単な方法を教えて下さい。 何卒、宜しくお願いします。 下記リストの並び順をランダムに切り替えて表示させるには、どうしたら良いでしょうか? 私の知識は、HTMLが少しできる程度です。 できるだけ簡単な方法を教えて下さい。 何卒、宜しくお願いします。 <html> <body> <!--PICKUP ITEMList--> <div class="Item_box690 clearfix"> <div class="box141 left"><img src="images/sample_img.gif" width="112" height="150" alt="" /></div> <div class="box517 right section">
領域に収まらない文字数を「...」にしたい - bi_naの日記
1行とのき 行が1行のときなら、以下のCSSで、超えた部分を「...」に変えてくれる。 overflow:hidden; text-overflow:ellipsis; ちなみにこれはIEが先進的に取り入れたものであり、他のブラウザでは使えなかったというのを 多く読んだが、使いたい最近のブラウザで使用可能なことを確認した。 参考 http://www6.plala.or.jp/go_west/nextcss/ref/prp/ext_msie/txt_ofl.htm しかし複数行になるところは しかし複数行になるところは、「...」に置き換わらない。 JSで対応 参考 javascript - Insert ellipsis (...) into HTML tag if content too wide - Stack Overflow すこし改良 ちなみにCSSが 引用： .ellipsi
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
lightBox系プラグイン「ColorBox」の超初歩的な設置方法を備忘録する « Tototo
ColorBoxは、所謂lightBox系のjQueryプラグインです。 先日使ったので、まず解説されない超初歩的な使い方をまとめます。主に私のためです。 但し今回は、ただの自分用備忘録だけというのもなんなので、「HTMLとCSSの知識は自分でサイトを作れる程度にはあり」「jQueryがとりあえずどんなものなのか漠然とは分かっている」くらいの初学者がとりあえず設置できるまで、というのを目指し解説仕立てにしてみました。応用編的な内容はありませんのでご容赦ください。 1：本体の入手 まず、ColorBox本体と、加えてjQuery本体を用意します。 1-1：jQueryのダウンロード jQueryの配布元はこちらです。 Downloadと書いてある大きいバナーをクリック、入手してください。 上部メニューの方の「Download」から辿ると過去バージョンもあります。 ちなみに「Minif
画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「imgLiquid」 | NAKAZI LAB.（ナカジラボ）
デモページ JavaScript (function($){ $(function(){ $('.thumbnail a').imgLiquid({ fill:true, fadeInTime:300 }); }); })(jQuery); HTML <div class="type"> <div class="img"> <a href="#"><img src="img01.png" alt="220x356（元画像）" /></a> <span class="caption">220x356（元画像）</span> </div> <div class="img thumbnail"> <a href="#" class="trimming200x200"><img src="img01.png" alt="200x200" /></a> <span class="caption">2
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
web creators×DeNA連動企画 Web制作現場で使える最新実用テクニック集 - MdN Design Interactive
スマートフォンユーザがますます増加する中、従来PCブラウザや携帯電話向けに公開していたWebコンテンツをスマートフォン向けに展開するケースも増加傾向にある。 スマートフォン向けにどこまで対応するかはコンテンツよりさまざまであるが、プロモーションやブランディングコンテンツに限らず、SNSやEコマースなどのサービスサイトでも、今後はビジュアル・機能ともに最適化したいというニーズは高まるだろう。 そこで、携帯向けWebサービスのスマートフォン展開を果たしたDeNAのディレクター、デザイナー、フロントエンド、エンジニアに制作現場ならではのTIPSを紹介していただこう。 DeNAにおけるソーシャルゲームなどのフロントエンド実装においては、リッチかつユーザビリティを考慮したインターフェイス開発を行っている。本連載では、モーダルウィンドウを事例としてHTML/CSS/JavaScriptの記述に際する効
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた jpgやpngはビットマップなため拡大すると画像が荒れてしまいますが、SVGはベクターデータなため拡大しても荒れることはなく単純な図形のような画像なら容量も抑えられるといった特徴があり注目されています。 この記事ではJavaScriptからSVGを描画できるRaphael.jsというライブラリをご紹介します。 投稿日2012年07月06日 更新日2012年07月06日 ライブラリのダウンロード 下記公式サイトからダウンロードしてください。 Raphael_JavaScript Library 解凍したフォルダの中にある「raphael-min.js」を読み込みます。 簡単な図形を描いてみる 最初に簡単な丸を描いてみます。 SVGを描画するための「div」を用意します。 html <div id="svg"></div> cs
JavaScript 言語概要 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
【jQuery】画像・テキストが切り替わるアニメーション
Wir erschaffen digitale Relevanz. Wir sind die Medienfreunde, eine smarte inhabergeführte Design- und Digitalagentur im Süden von Leipzig. Seit 2004 konzipieren, gestalten und entwickeln wir nutzerzentrierte Websites sowie webbasierte Anwendungen für das digitale Heute und Morgen – optimiert für Suchmaschinen, Performance und einen geringen CO₂-Fußabdruck. So entstehen zeitgemäße, bedarfsgerechte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
Dart programming language
finefinefine.jp
PC
IDEA * IDEA
