サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
logic-a.com
【参考サイト】 Emmetでより良いコーディングライフを送ろう | Stocker.jp / diary でもほとんどの人が「HTMLとCSSを素早く打つ」しか使ってない web制作でコーディングをする人で使っていない人はいないのではないかというくらい便利で作業高速化になるので、ほとんどのひとはEmmetを使って作業していると思います。 ですが、Emmetを使っている人の8割はさっき説明したHTMLとCSSを素早く書く機能しかつかっていませんでした。 （自分の体感調べです。少なくとも自分はこの機能を使いこなしている人に会ったことがないです） 実はそれ以外でもEmmetってすさまじく便利な機能がたくさん隠れているんです！ 今回はその中でも、特に便利な機能1点に絞ってご紹介します。 開始タグから終了タグまで全て選択しよう コーディング中によくあるのが、開始タグから閉じタグまで選択して「複製」や
スプレッドシートで表を作る 当サイトで今回、「代理店・制作会社さま向け 価格一覧」をスプレッドシートで管理できるように仕様変更しました。 ページ上に表記された見出し、項目名、参考価格、説明文をそれぞれスプレッドシートのデータからリアルタイムに取得して表示しています。 なので今後は価格帯や項目の増減、説明文の修正などが発生した際はスプレッドシートの修正をするだけで自動で反映されるようになります。 今回使用しているスプレッドシート 今回はこのスプレッドシートからデータを取得しています。 （閲覧のみ権限で開きます） ※今回のJSON化はdataシートを使用しています ルールは最上段の行を見出しとして使用しています。 そうすると後述するデータの取得のループが組みやすくなります。 「ウェブに公開…」を忘れずに シートのデータをWEBページで参照できるように、公開設定をします。 ファイル ウェブに公開
ほんとうに初めての方向け。「HTMLってなに？」からWEB制作に興味を持った人はまずこのへんから手を付けてみるのが良いと思います。 価格も安いので、「自分はWEB制作ができるようになるのか」試すにはローリスクです。 内容も写真（スクリーンショット）が多く、字も大きめなのでサクサクすすめられますよ。 ちなみに僕はこれの2010年発行版を使いました。なるべく最新版のものを使いましょう。 ※ もしこの本をクリアしてWEBに興味が出たなら「HTMLとCSSで基礎から学ぶWebデザイン」がオススメです。WEB制作の根本的な基礎の考え方がまとめられていて、かつ読みやすい口調で書かれている本です。
経緯 jQueryでは特定の動作をした時に 指定した要素をクリックしたことにするイベント があります。 ですがaタグのリンクをjQueryのイベントクリックさせたことにしてページ変移をさせたかったのですが、普通にやってもうまくいきませんでした。。 そのままaタグにクリックイベントを付けただけではページ移動が起こらず、解決するまで少しハマったのでやり方を共有します。 クリックしたことにするイベント jQueryを使ってクリックイベントを発火させるには、以下の方法があります。 [javascript] $(“#hoge”).trigger(“click”); //もしくは $(“#hoge”).click(); [/javascript] ただ、これはあくまでクリック時のイベントを発動させるだけで、実際にクリックするわけでは無いようです。 今回困ったのが、特定の動作に対して aタグのリンクをク
blog 去年からパワーアップ！iOS6！無料Tips！ 去年、MacもiPhoneもiPadだって ユーザー辞書も顔文字もサックサク同期させる方法！ という記事を書きました。当時、iPhoneはiOS5の頃。ヘビーiPhoneユーザーだった自分が一番困ったのが顔文字でした。 → (＾・ω・＾) ← ｺﾝﾅﾉ iPhoneで顔文字を登録する場合、【☻】という記号で辞書登録すると、フリックキーボードの【＾_＾】っていうボタンで一発で顔文字一覧が出ます。 これが凄まじく使い勝手がよく、また 絵文字<<<顔文字だった自分としては iPhoneなしでは息できなくなってました。 顔文字ラヴ！ しかし！この顔文字ラヴな状況に 待った が！それが去年購入した【MacBook Air 】です！Airを買った一番の衝撃が、 このiPhoneで登録した顔文字が使えないという事態。なんとか無理クリやりくりしてみ
HTMLと要素追加時のサンプル 今回は空の【ul要素】にjQueryで後から【li要素】を追加していったんです。が．．． [html] <p>茶トラ</p> <p>ミケ</p> <p>サバ</p> <ul></ul> [/html] こんなHTMLで、もとから存在した p要素 のテキストをjQueryで後から ul の中にリスト可をしてみました。 [javascript] var lists; //リスト可したpのテキスト入れ for (var i=0; i<jQuery("p").length; i++) { var t = jQuery("p").eq(i).text(); lists += "<li>" + t + "</li>"; } jQuery("ul").append(lists); [/javascript] このコードで、もともと空白だった【ul要素】にリストが作成されま
テキストボックスが３つあります。 それら全てに文字が入力されていないと送信ボタンがグレーアウトして作動しなくなっています。 逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。 サンプルコード サンプルコード HTML <form> <label for="input01">入力欄1つめ</label> <input required id="input01" type="text" /> <label for="input02">入力欄2つめ</label> <input type="text" id="input02"/> <label for="input03">入力欄3つめ</label> <input required type="text" id="input03"/> <button type="submit" class="send">送信</b
jQuery メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。 ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！ また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。 この記事はJQuery UI – SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。 指定要素にドラッグ&ドロップさせる系 ドロップ先を限定する場合に使うメソッドです。 紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。 connectToSortable
jQuery カンタンなToDoリストです。左のリスト項目をドラッグして右のエリアにドロップしてみてください。色が変わって、チェックマーク（✓）も付きます。チェックマークをクリックすると登録したToDoリストが消えます。 今回はこのドラッグとドロップをどうやって実装するか、を説明します！ 【要素をドラッグさせる】のは超簡単！ まずはjQueryUI！ 素のjQueryだけでは難しいので、jQueryUIというものを適用します。といってもやり方はhead内に以下を記述するだけです。 [html] <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"> <script src="//ajax.googleapis
2019.3.29 更新 この記事を書いてから数年経ち、今ではもっとカンタンに実装できる方法がたくさん出ています。 今回はＪＳとCSSをCDN（ファイルをサーバーにアップしなくても、コードを書くだけでプラグインを実装できる方法）で読み込むだけでカンタンにこんなものも実装できます！というご紹介を追加します。 サンプル PACE.js プラグインを読み込む PACE — Automatic page load progress bars このプラグインを使ってカンタンなページローディングを実装してみます。 CDN一覧のページから、JSのコードをコピーします。 pace – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites! 「https://〜〜pace.min.js」と書かれてい
．．． はい。こういうことです。 ようは、スライドするアニメーションが終わり切らないうちに 次のスライドの命令が来るもんで、とりあえずスライドの命令が来たものを全部オラオラってスライドさせてしまうからスライドが間に合わずスライドにスライドが重なって．．．もうよく分かりません。 そこであっちこっち探しまわって助けて頂いた記事がコチラでした！ [jQuery]クリック連打予防 : クリエイター気取り なるほど！目からうろこであります。(°̥̥̥̥̥̥̥̥Д°̥̥̥̥̥̥̥̥ ) 早速、実践します！ フラグを使う！という考え方 [javascript] var clickFlug = true; // ※最重要!!※ クリック連打でのバグ防止のフラグを立てる var buttonClick = function(){ // ボタンをクリックしたときのイベント if (clickFlug){ //
jQuery 例）1行の場合 テキストが一行、と決まっていたらカンタンです。 [html] <div> <span>例）一行の場合</span> </div> [/html] [css] div { height: 100px; } div span { line-height: 100px; } [/css] これで対応できます。ただし、複数行になる可能性がある場合、2行以上になると対応できなくなります。もともと【line-height】とは 行の高さを指定するプロパティです。一行なら親要素（div）の高さ（100px）とテキスト（span）の行の高さ（100px）が一致するため、こうなります。 サンプル１ 【1行】
シェアしてもらうとうれしい ので、記事の頭にこんなかんじで記事合計を表示してます。 これがあると この記事がイケてる記事かどうかがパッとみてわかりやすかったりしますし、他の人がシェアしてるんなら自分もシェアしてあげよう！と思ってくれる方も出てくるかもしれませんよね。もちろん自己満足も多々ありますが。 参考サイト こちらの記事のコードをほぼそのまま使わせてもらってますｱｻﾞｰｽ サンプルコード functions.php [php] function counter($url, $comments){ //ツイート数取得 $get_twitter = ‘http://urls.api.twitter.com/1/urls/count.json?url=’ . $url; $json = file_get_contents($get_twitter); $json = json_decode(
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.ver. 3.5.9 ブログ記事を書くことに特化しており、Macでブログを書く方から多く支持されているアプリです。僕もこのブログ記事は ほぼこれで書いてます。 僕はiPhoneなどでブログを書く、いわゆる【モブログ】をすることはほとんどありません。このブログの性質上サンプルコードなんかが多く、モブログにあまりむいてない部分はありますが、それよりも あまりにもMarsEditの使い心地がよすぎて、もうMacBook Air以外でブログを書ける気がしません。 なので、僕仕様の快適ショートカット生活をご紹介します。 デフォルトのショートカット 初期設定状態に設定されているショートカットから ブログを書く上でよく使用するであろうショートカットを選びました。これらだけ
blog jQueryって何？なところからスタートしたときにお世話になったもの まずはjQuery入門から入門 もともと僕は【jQuery】は、「そのうち出来るようになろ」くらいにしか考えてなかったんですが、Webデザインレシピさんの記事で「あれ、俺でも出来そう」になりました。 そのくらい、分かりやすくて入門の入門としては最高の教材になります。まず一読をおすすめします！
blog 「自称」JavaScript中級者 とは 「はじめてのJavaScriptなんちゃら…」的な 初心者が学ぶような段階の参考書は 見てもだいたい内容がわかってるし、だけど上級者が作ったライブラリとかコードを見ても何のこっちゃら、という宙ぶらりんで かつ “初心者ではない！” という変なプライドまで持っちゃってる人のことです。 私ですね。 JavaScript系だとWebに情報が溢れているご時世です。 関連書籍も多々多々でてます。 こんな私のような中途半端なとこまでは独学でもできてるお仲間はけっこういるだろ、と妄信してます。 そして独学だと、初心者が学ぶような段階の参考書 には載っていない (もしくはあまり重要な感じで載っていないので深く学ばずにスルーしているような) 応用的なものが欠けがちになります。 コードを見てくれる(共有してくれる)人が近くにいるのはまれなはずです。どうしても
Logic-A(ロジカ)といいます。Webのデザインやテクニックを効率よく使うためのTipsを理論的に検証してみます。
blog サンプルです。こんなイメージで それぞれのテキストボックスに文字を入力してから リセット！ボタンを押すと、入力した文字が全てクリアされて、最初の文字（お名前、電話番号、ご住所）に戻ります。 コードです。 HTML [html] <input type="text" value="お名前" /> <input type="text" value="電話番号" /> <input type="text" value="ご住所" /> <input type="button" class="resetB" value="リセット！" /> [/html] [javascript] jQuery(document).ready(function(){ /*—————————– リセットボタン ——————————*/ // テキストボックスの総数 var inputLength = $(
jQuery 記事ページのアイキャッチやらタイトルやらの配置などなど変えました！ 見づらさバツグンだったので。 新しい配置はどうでしょうか？ 敢えて前までのデザインは見せません。残さないことにします。 ※（2013/05/21追記）高さが都度変動がある要素の場合、今回の記事が有用ですが、もし親要素の高さが決まっている場合は CSSだけで対応できます。詳細は新しく記事を書きました！ CSSでテキストを指定要素へ縦中央揃えにする（複数行対応版） | LogicA ので参照願います。 また、サンプルのテキストボックスの表示がおかしかったので修正しました。修正前にご覧頂いた方々ごめんなさい m(__)m 高さが変動する要素をピッタリ真ん中にしたい ということで、このブログのタイトルです。タイトルは最近はがんばってロングテール的なものを考慮して、少し長めにしてました。 ですが、長くするとハミ出します
jQuery 完成サンプルです 試しにクリックしたり、文字を入れてみてください。入力しようとすると、ちゃんと文字が消えて空っぽになります。 また、元々の文字は薄いグレーなのに、入力するときには濃い色の文字になってます。 何をどうしているのか まずはテキストボックスの初期値です。初めからテキストボックスに文字を入れておくには value を使います。 [html] <ul> <li><input type="text" value="ユーザー名" /></li> <li><input type="text" value="メールアドレス" /></li> </ul> [/html] そしてこのままだと、他の文字と同じように 濃い色の文字色のままです。とりあえずCSSでうすくしておきます。 [css] input[type="text"] { color: #ccc; } [/css] これで
jQueryって 慣れてくるとCSSよりも信頼して使えると思ってます。 CSSだと 例えば ” first-child” とかで指定すると IE8なんかでは無視されてレイアウト グチャったりしますが、jQueryだとちゃんとfirst-childしてくれます。クロスブラウザってやつですね。 他にも子要素に span とか em とか blockquote とか strong とか何やかんやあると、CSSだと接頭に親要素を毎回記述するのがめんどうです。 でもjQueryなら子要素を色々と指定する場合なんかも変数でサクサクできます。 なんでもかんでもCSSでできることをjQueryにやらせるのは読み込み速度なんかに影響しそうでアレですが、ちょっとCSSで困ったり、本来要らない要素をHTMLに無駄に組み込んだりするくらいなら 最近は潔くjQueryにおまかせしております。 しかし、そんな便利jQ
フォームってWebページに動的な仕掛けを作る 一番初歩的なものだと思います。最初にフォームからいろいろと動かせるようになると、その後にいろいろと応用も効いてくると思います。経験上。 フォームから値を取得したり、取得した値を表示したり、選択項目に合わせて 見た目をガラっと変えてみたりするのは jQueryなどのプログラミング初心者だと 結果がすぐに目に見えるので非常に楽しいです。 そこで まずはフォームのなかでも扱いやすい、テキストボックスの値を取得して表示させてみたいと思います。 ただ、そのままテキストの値を取得しても面白くないので、打ち込んだ文字を打ち込んだそばからリアルタイムで取得して表示させてみたいと思います。 2013/07/10追記 プラグイン作りました！ この記事の内容を、サクッと反映させられるプラグインです。 ﾃｷｽﾄﾎﾞｯｸｽに打ち込んだ文字をﾘｱﾙﾀｲﾑで取得できるjQu
blog 前回までの記事 でお伝えしたように、このブログでは ” アイキャッチ ” というものに並々ならぬ想いを込めています。いるのです。 このブログでは全ての記事でアイキャッチを設定しています。もし設定していない場合は、ダミー画像が入って 必ず何かしらのアイキャッチが表示されるようにしています。 なんでMarsEditはアイキャッチだけできないん？ しかし、MarsEditからは直にアイキャッチを投稿する項目というものがないのですよ。カスタムフィールドやらカテゴリーやら何やらは記事とまとめて一気に投稿できてしまうスーパーアプリなのに、結局 一度Draft(下書き)にしてからブラウザで最終設定をしてからの投稿になってしまうわけです。 ですが！こちらの記事を参考にさせていただいて閃きました！ので書き記します。 新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post
このページを最初にブックマークしてみませんか？
『Logic+A design』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
