５・６年生にもわかるやさしいJavaScriptは下記URLに移転しました。 お気に入りやブックマーク、リンクをしていただいている方は変更をお願いします。 新URL http://clap96.web.fc2.com/masapine/java_top.html ※10秒後に自動的に移動します。
５・６年生にもわかるやさしいJavaScript
５・６年生にもわかるやさしいJavaScriptは下記URLに移転しました。 お気に入りやブックマーク、リンクをしていただいている方は変更をお願いします。 新URL http://clap96.web.fc2.com/masapine/java_top.html ※10秒後に自動的に移動します。
| サイドメニューが下まで行ったらそこで固定するJS（jQuery）神戸ホームページ制作センター
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
JavaScript書けない人間が1年間でフロントエンドエンジニアになった話 - DMM.comラボ デザイナーズブログ
こんにちは、デザイン部所属の石橋です。 今はデザイナーをやりつつフロントエンドエンジニアをさせてもらってます。 そんな自分は2014年の5月にDMM.comラボへ来たんですが、入社時のスペックを以下に記します。 入社時のぼく HTML出来ます！（ただし<section>の使い方はぼんやり） CSS出来ます！（ただしスタイリングだけで設計は出来ない） jQuery出来ます！（ただし既存プラグイン実装に限る） おや…？ 「（フロントエンドってなんだろう…）」 「（JavaScriptとjQueryって何が違うんだろう…）」 やばい。 当時はいわゆる「コーディングがちょっとだけ得意なWebデザイナー」でした。 シンデレラストーリー プロローグ 弊社では一部のデザイナーも結構ガリガリとコーディングをするのですが、 入社時にまわりの能力の高さにちょっと本気で「ヤベェ所に来てしまった…」感がありました
PHP & JavaScript Room
Windows OS に PHPとApacheサーバーのインストール ～ php.iniの設定まで、 パソコンでPHPを使えるようになるまでの手順を図解。 .htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。 Tipsでは実用的な自作関数を紹介。 JavaScriptの基本～実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック（正規表現含む）など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM（Document Object Model）のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。 Ajax ブログやサイトで使える実用的なAjaxをサンプル付きで解説。 HTML5 次世代HTML標準となるHTML5を使ってみよう！HTML5のタグリフ
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
JavaScript入門
HOME JavaScript入門 ここでは、ビギナーの方を対象としたJavaScriptの解説を行っています。 JavaScriptは、Webページに組み込んでいろいろなアクションを起こすことができます。 是非JavaScriptを覚えて、一ランク上のWebページ作りに励んでみて下さい。 当サイトでは主に「初めてJavaScriptを触る人」、特にプログラム自体初めての方を対象にしています。 初めての方は様々な専門用語が出て来ると非常に難しく感じることがあるので、ここでは極力専門用語を使わないようにしています。 ここで書かれてあることをマスターしたなら、 後は色々なサイトでレベルを磨いていってください。 なお最初に断っておきますが、JavaScriptを理解するにはHTMLをある程度使える必要があります。 HTMLを十分使えない方は、まずそちらを勉強なさって下さい。 HTMLを理解してい
SMACSSによるCSSの設計 | 前編 ベースとレイアウト
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース：要素そのもののデフォルトスタイル レイアウト：ページをエリアごとに分割 モジュール：再利用可能なパーツ 状態（ステート）：レイアウトやモジュールの特定の状態を示す テーマ：サイトのルック＆フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS（日
知っておきたいCSS設計法 | 第1回 OOCSSの基本
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS（オーオーシーエスエス）、BEM（ベム）、SMACSS（スマックス）という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
テキストの横に並ぶ画像の位置合わせ その２
こんにちは 馬場です。 前回（前々回？）は、 テキストの横に並ぶ画像の位置調整について vertical-alignを使用した対応をご紹介しました。 今回は、 vertical-alignとは別の方法、 positionやmarginを使った対応方法を ご紹介します。 vertical-alignを使用した場合と それほど表示が変わるわけではないので、 こんな方法もあるという程度で ご覧ください。 テキストの横に並ぶ画像の位置合わせ その１へ ・positionを使った対応 ・marginを使った対応 ・vertical-alignとposition(margin)を使った対応 ▼positionを使った対応 positionを使って調整する場合は、 position:relativeを指定し、 topやbottomで調整します。 その１でご紹介した、 vertical-alignの数値指
Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築 - Qiita
これから AngularJS でアプリケーションを作るぜ！という方向けの、環境構築メモです。 モダンな開発をするために総合開発環境として Yeoman を利用 おすすめとされる AngularJS アプリケーション構成も適用 最低限のUIライブラリはいるだろうということで UI Bootstrap(AngularJS用のBootstrap)を導入 IDEとして WebStorm を利用 ただこれは私がたまたま使ってるだけなので、使わなくてもOK ちなみに私が試した環境は、つぎのとおりです。 Mac OS X 10.9.1 node v0.10.25 npm 1.3.24 YeomanとAngularJS雛形ジェネレータをインストール もしお使いの環境にまだ導入されてなければ npm でインストールします。
jqueryでロールオーバー（マウスで触ったときに画像が変わる）する方法
ボタンを触ったときに画像を変更させるロールオーバーは良く使いますよね。 jqueryを使っての簡単ロールオーバーする方法を紹介します。 $(function(){ $("img[src=’img/button.gif’]").mouseover(function(){ $(this).attr("src","img/button_on.gif"); }).mouseout(function(){ $(this).attr("src","img/button.gif"); }); }); 解説 $("img[src='img/button.gif']").mouseover 画像を$(“img[src=’img/button.gif’]”)で選択して、 mouseoverでマウスが画像の上にのったときに下記のイベントが実行されます。 (function(){ $(this).attr("sr
WordPressで日付を表示するテンプレートタグ「the_time」と「the_date」の違い
こんにちは。株式会社コミュニティコムの星野邦敏です。 WordPressで日付を表示したい場合があると思います。 そのような時、WordPressテーマへの書き方として、「the_time」と「the_date」という、テンプレートタグがあります。 テンプレートタグ/the time – WordPress Codex 日本語版 テンプレートタグ/the date – WordPress Codex 日本語版 具体的な大きな違いは、 「the_date」テンプレートの時は、同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される、という点です。 ということで、運営上は、何だかんだで、「the_time」を使った方が無難な印象があります。 WordPressテーマに <?php the_time('Y年m月d日'); ?> などと書きましょう。そうすると、日付が 2012年09月
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
Webデザイナーになること、Webデザイナーであり続けること
Webデザイナーになること、Webデザイナーであり続けること、おそらく後者のほうが何十倍も難しい。 高度なスキルをもっていても、買いたたかれる時代 税理士事務所でアルバイトをしていた時期がある。当時、税理士受験をしていた。当時、先生に毎日のようにいわれたことが「税理士資格をとっても食えないよ」だった。どんどん、競争が激しくなり、単価が安くなるよという絶望トークをきかされた。 当時、私は20代。この話を信じていなかった。 税理士資格をもっていれば、なんらかの仕事は保証されるとおもっていた。当時の私には”エキスパートが食えなくなる時代”を想像することはできなかった。手に職さえあれば、なんとかなるとおもっていた。 『僕は君たちに武器を配りたい』で著者の瀧本哲史さんによれば、高度なスキル（たとえば弁護士でも）や高度な技術をもつ部品でも、スペックが明確に定義された瞬間、コモディティ化して、これ以上利
独学!未経験からWebデザイナーになる!!～独学でも未経験でもWebデザイナーになれる！
独学でも、実務未経験からでも、努力すれば誰でもなれる。それがWebデザイナーという職業です。 当サイトでは、Webデザイナー・Webクリエイターに興味がある方や、実際に目指しはじめている方に、役立つ情報を提供できればと思います。 最近の更新情報＆お知らせ 2017年02月09日 ヒューマンアカデミーの資料を頂く機会に恵まれたのでシェアしますのページをアップしました。 →更新履歴一覧 最近のコメント 文字化けを防ぐ&解消する方法 by しんじゆみこさん(11/29)PHPのインストール for Windows by 馬場誠さん(09/30)PHPのインストール for Windows by Kiraさん(09/30) ※管理人がまだ公開設定を行っていないコメントは表示されません。
stackstock.net - stackstock リソースおよび情報
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.
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門
スマホ対応初心者に送るjQuery Mobileの使い方“超”入門：jQuery Mobileでスマホ向け企業サイト構築（1）（1/2 ページ） jQuery Mobileを利用した企業サイトの構築【準備編】 iPhone、Androidなどのスマートフォンが普及するなかで、スマートフォンブラウザ向けWebサイトの需要は拡大しています。グーグルの調査によると、日本のスマートフォン普及率は2011年1、2月の時点で「6％」、2011年9、10月では「17％」です。平成24年の国内スマートフォン販売シェアが半数を超え、さらなるシェアの拡大は確実です（参考）。 PCの販売台数が低下する中、iPadなどのタブレット端末の普及も伴い、今後モバイル端末への対応が必須となってきます。かつてPC上のWebブラウザで起こったシェア争奪戦「ブラウザ戦争」と同様に、モバイル端末のシェアの奪い合いも激しくなってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://wp-and.me/bxslider
Website｜IKG