jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。 似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think feel ! なお実際の動作は↓で確認ができます http://nekoneko-wanwan.github.io/demo/jquery/dom/ とりあげるメソッド append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() wrap() wrapInner() wrapAll()
【LOCAL】Windows 10にApache2.4 VC11をインストール
6月更新・前月(5月)の人気記事トップ10 06/06/2024 ( 02 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について ( 01 ↓) 【Mac】macOSをHigh SierraからMontereyにアップグレード ( 03 – ) 【Mac】Safariでソースコードを見る方法 ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む ( 05 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法 ( 08 ↑) 【Labs】CSSだけでドロップダウンメニュー ( 09 ↑) 【Labs】PHPのエラー表示をなくす方法 ( 06 ↓) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方
ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ
Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ
CSSで実装する、マウスオーバーで表示される吹き出し ｜ Tips Note by TAM
ちょっとした動きをJavaSciptなしで実装できないかと思い、 CSSのみで吹き出しの表示・非表示を作成しました。 ブラウザはChrome、Firefox、IE9以上で確認しています。 サンプル 罫線で囲まれた「ここをマウスオーバーすると・・・」をマウスオーバーすると右上に吹き出しが表示されます。 See the Pen aNgEOj by yuri nagamatsu (@nagamatsu) on CodePen. マウスオーバーの動きは隣接セレクタで指定する 罫線で囲まれたエリア(p.text)と吹き出し(p.fukidashi)を隣接させます。 隣接クラスタは、同じ階層の要素で直後にあるものにCSSを適用し、プラス記号 (+) で記述します。 ページを読み込んだ時は吹き出しをdisplay: none;で非表示にしており、 罫線内をhoverでdisplay: block;になり
MT Tips - SSIを利用して全体のリビルドを避ける - おれはおまえのパパじゃない
エントリーの数が増えてくるとサーバーへの負荷が激しくなり、全体のリビルドが出来ないケースが出てくる。MT設置直後のエントリーが少ない状態でテンプレートを完全にしておくのが望ましいが、Indivisualエントリーにおける「記事内容以外の部分」で頻繁な変更が予想されるなら、その部分はSSIの#Includeで別ファイルを読み込ませるようにしておくのが無難。MTの思想からは遠ざかるが、リビルドせずに全てのページに変更を反映することができる。
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 ｜ ガジェット通信
（編集部注＊2013年7月1日に公開された記事を再編集したものです。） こんにちは、デザイナーの白浜です。 以前、下記の記事でチャンネルを使って髪の毛を切り抜く方法をご紹介しました。 今回はPhotoshopCS5以降についている便利機能「境界線を調整」を使って髪の毛を切り抜く方法をご紹介します。 結構色んな所で紹介されているとは思いますが、復習がてらお付き合いください。 なかなかのチートツールなので、使わない手はないです。作業が格段に早くなります！ 「境界線の調整」を使って髪の毛を切り抜く方法 パスで大雑把に髪の毛を囲む 今回はなかなかややこしい背景をお持ちのアフロ（ソバージュ？）美女をご用意しました。 このツールのチートっぷりを体感していただきたいのであえて白背景じゃない画像で挑戦します。 まずはペンツールで囲みます。ここはチャンネル使う場合と同じですね。ふわふわしてる部分はおお
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
サーバーの別フォルダにWordPressのテスト環境を作る：おもてなしWEB | フリーランスのWEBデザイン事務所：サカグチデザインオフィス
WordPressのテスト環境をどう作るか、は結構悩みどころだと思います。時間もかかって作業も面倒です。 自分のPCのローカルにテスト環境を作る方もいらっしゃいますが、いざ本番環境にアップしたら、動かない、などのリスクを回避すべく、なるべく環境を同じにしておきたいので、自分は同じサーバー上にテスト環境を作ります。今回はその手順を書いておきます。ご参考になれば。（作業時間の目安およそ60分） ありがちなのは、すでに本番環境でサイトが動いているけど、まだテスト環境が無かった場合です。フォルダは下記にしてみます。 http://*****.jp/test/ また、ごく通常のレンタルサーバーを想定しています。（ちなみにロリポップ、さくらインターネットなどは試しています。） 【その①】本番環境のキャッシュ系プラグインを停止 これをしないとテスト環境なのに本番環境のファイルが出てきたりと大変なことにな
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック
中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな実装です。 <h3>Unordered List</h3> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <h3>Single Digit List</h3> <ol> <li>Lorem ipsum dol
iPhoneの調子が悪くなったときの対処法まとめ
ある日突然、App Storeアプリから始まり、メールアプリ、Safariと、次々と起動不能に陥る(起動直後に落ちる)という状況が広がっていき、明らかに今までとは違う挙動を見せるiPhone。 起動中のタスクがないのにも関わらず、これに加え、バッテリーの消費が明らかにいつも以上に激しかったり、本体がなぜかずっと熱いままだったり、一瞬焦りました。 ここでは、私が行った対処法を交えながら、同じようにiPhoneの調子が悪くなった方に向け、このページを見てささっと対処が行えるように簡単にまとめておきたいと思います。 基本的なことではありますが、基本的であるがゆえに肝心なときにどこかしら忘れてしまっているということもあると思いますから、とりあえずブックマークしておいて損にはならないとは思います。少しでもお役に立てれば幸いです。
【連載1】Fireworksのもやもや解消法｜ふわっとブログ
今年は私がはじめて執筆したFireworksの本が出ます。 多分こんな話は最初で最後だろうと思うので、発売までいろいろ宣伝をしたいなと思っています。宣伝ができることも幸せです。 なので、これからFireworksについても何かしらTipsを連載していきたいと思っています。平によろしくお願いします。 Fireworks もやもや解消法 最初の回ですが、ほんとーに細かいコツのようなものを書きます。 知ってたら、あーそれ知ってるわ〜2年前から知ってるわ〜と流し読みしてください。 アンチエイリアスがもやもやするのを直す パーツ同士を整列させたりしたタイミングで、よくアンチエイリアス（パーツのフチの境目）の部分がもやもやっとすることありませんか？
『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）
初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が
Fireworksで質感のあるイラストを描く - デザイナーのイラストノート
webデザイナーさんにはおなじみのFireworks。IllustratorとPhotoshopのちょうど間のようなアプリケーションですがデフォルトのテクスチャやパターンも豊富で、イラスト制作にも結構使えるのです。 Fireworksでイラストを描くメリット webデザインでFireworksを使用しているならアプリケーションがひとつで完結 用意されたテクスチャを使用すればファイルサイズが軽くすむ ペンツールや長方形ツールで作成できるので修正も楽 逆にデメリットは Illustrator、Photoshopに比べると線の太さなど細かい設定ができない パターンなどは解像度が低く印刷などには不向き？ Illustratorと違いピクセルに吸着して思ったところにアンカーポイントが置けないことがある くらいでしょうか。Fireworksでデフォルトのテクスチャはたくさんあります。ほんの一例ですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
完全放置で月9万円稼ぐ、Adsenseサイト構築術 - とある浪速の調査雑記
Photoshopでほそ〜い髪の毛を1分で綺麗に切り抜く方法｜フォトショップの参考書 [sitebook]![Photoshopでほそ〜い髪の毛を1分で綺麗に切り抜く方法｜フォトショップの参考書 [sitebook]](https://cdn-ak-scissors.b.st-hatena.com/image/square/98da957ee01fe3c133f94a65080ddc6ea5785bd7/height=288;version=1;width=512/https%3A%2F%2Fsitebk.com%2Fwp-content%2Fuploads%2FeyeCT.png)
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ