SSSSLIDE
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
2016年9月17日に開催されたWordCamp Tokyo 2016でのセッションスライドです。Read less
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト | Web Mugen
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても
ColorboxでjQueryのモーダルウィンドウを実装する方法｜Gimmick log
TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました！素晴らしいです！ デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので（これがいい場合もあるのですが）こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ポップアップ拡大画像 - プラグインツールを使わずに作成
マウスクリックで拡大画像をポップアップ表示。ステップごとにわかりやすく解説。
『ドロップダウンリストの中にチェックボックスを入れる。』
駆け出しWebエンジニア（２年目）の備忘録です。 興味のない人にはまったくよく分からない内容だと思いますが…。 EC-CUBEのカスタマイズとかやってます。 チェックボックスのリストが大量になるアンケートフォームを作成していると、それを並べるだけでページが長くなってしまうことが多いので、チェックボックスをプルダウンメニューにしておきたい。 で、jQueryを使うことに。 DROPDOWN CHECK LIST (jQuery) 使い方は、簡単。 <script type="text/javascript" src="./js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script> <link rel="styleshee
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ) | UNORTHODOX WORKBOOK | Blog
jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ
css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルにも対応！完璧なLIGHTBOX「PHOTOSWIPE」をJQUERYプラグイン化しました。
天気予報ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]![天気予報ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/269ef1a105bc47d2fe199da80270f4427e0bdae6/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1437481965767s.png)
iHover CSS3 hover effects pack