フロントエンドのウェブ制作を学ぶ HTML5やCSS3、JavaScriptなどの言語、それにAtomといったツール、 言語を覚えるための勉強方法などを紹介。
![サイト構築に役立つWEB講座 SmartSmart(スマートスマート)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2a6fd316ea3f05d01bf109dfe25283c55b6ce30/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart-two%2Fogp.png)
フロントエンドのウェブ制作を学ぶ HTML5やCSS3、JavaScriptなどの言語、それにAtomといったツール、 言語を覚えるための勉強方法などを紹介。
画像の上に文字や入力フォームなどを重ねて表示させたいと思ったことはありませんか? 例えば、図のような画像の看板部分にぴったり合うように文字を表示したい場合などです。 画像の上に重ねて文字を表示したい場合でも、1枚の画像を細かく分割して掲載したり、table要素を駆使したりする必要はありません。CSS(スタイルシート)を使えば、1ピクセル単位で表示位置を微調整して、簡単に画像の上に文字を重ねることができます。 今回は、ウェブページ上に掲載した画像の上に、文字や入力フォームなどの任意のオブジェクトを重ね合わせて表示する方法をご紹介いたします。HTML+CSSだけの簡単な方法です。 画像の上に文字やオブジェクトを重ねる例 今回ご紹介する方法を使えば、以下のような重ね合わせ表示が作れます。ここでは例として、画像の上に文章を重ねたり、画像の上に選択フォームを重ねたり、画像の上に枠付きのキャプションを
JavaScriptを楽しく学ぶことを目的としたウェブサイトです。JavaScriptやJQueryのフリーサンプルを提供しています。
■Ajax : 勉強用サンプル&解説 Ajax (Asynchronous JavaScript+XML) がどのようなものか勉強用としてページやサンプルを作成しましたので参考にしてみてください。 最終更新日:2017/12/16 AM 9:27 Ajaxを勉強しよう jQuery入門 【短期集中連載】この冬作ろう!jQueryプラグイン講座 上のjQueryプラグイン講座の続き 【第13回を追加】 Yahoo UI Library入門 WebDesigning掲載サンプル マイコミジャーナル記事 (Ajax関連) Ajax エフェクト Ajax関連書籍一覧 Ajax ライブラリ一覧 Webサービス APIサイト一覧 Ajax ライブラリリファレンス Prototype系ライブラリ サンプルプログラム 逆引きAdobe Spryリファレンス Google Maps API リファレンス G
Ajaxとは AjaxとはAsynchronous JavaScript+XMLの略で、JavaScriptとXMLを使用することにより、リロードなしにサーバとの通信を行って処理を進めていくWebアプリケーションの実装形態。描画部分にはDynamic HTML(HTML+CSS)を利用。 JavaScriptのバージョン
7/10,11 に開催されたオープンソースカンファレンス2009 京都に行ってきました。 http://www.ospn.jp/osc2009-kansai/ 私が聴講したセッションは ・Web技術の現状と将来 (W3C 一色さん) ・GoogleとHTML5 (Google 及川さん) ・「出揃った次世代モバイルプラットフォーム」- 勝ち残るのは誰だ!? (日本Androidの会 有山さん) ・ブログツール WordPress と、オープン型 SNS 構築ツール BuddyPress の可能性 (WordBench 京都 池田さん) です。特に個人的に興味深かったのが、デモも交えながら講演された「GoogleとHTML5」です。 とりとめないですが、メモなど。 ● Canvas ・スクリプトによるグラフなどの描画 ・サーバで動的に画像生成するのではなく、クライアント側で描画処理実行 ・内
せっかく祇園祭の季節なので、HIS で発表したシステムから、去年の祇園祭のときに登録したデータを GoogleEarth で見られるようにKML を書き出してみました。 (GPS付きケータイで撮影した写真なので、あまり綺麗ではないです) 下記のリンクをクリックすると、GoogleEarth が起動します。 http://miyanami.googlepages.com/gion2007.kml 今年も時間があれば、宵山、宵々山にでも入って、新しいデータをアップできたらと考えてます。 ※このシステムにアップしているデータから書き出してます。 HIS2006発表「モバイル体験を繋ぐ情報モデルの情報探索インタフェース提案」 http://www.softdevice.co.jp/activity/his2006/index.html もう既に多くの方が書かれていますが、GoogleMaps が
テキストを画像に置き換えるCSS設定には、方法がいろいろとあると思います。text-indentで画像を左に飛ばす方法。<span>要素で入れ子にして上から画像を覆いかぶせる方法などパターン別にコードを紹介しておきます。 テキストをtext-indentで飛ばす方法 CSSでテキストを画像に置き換えるCSSコードになります。ユーザーが画像を読み込めない場合は、置き換えられるテキスト表示もされませんので気をつける必要があります。CSSが無効の場合は、テキスト表示がされます。 background-image: url('背景画像のファイル保存先'); (説明:背景画像のファイル指定) background-position:left top; (説明:背景画像の位置指定) background-repeat:no-repeat;(説明:背景画像の繰り返し無し指定) height: 任意のピク
Nucleus CMS バージョン3.71をリリースします。 ・[重要] CVE-2011-3760 : Nucleusのシステム情報を取得される脆弱性を修正(重要度・低) ・[重要] PHP7対応(インストーラ調整・mysql関数のラッパー組み込みなど) ・[新機能] アイテム一覧画面にアイテム複製機能を追加 ・[新機能] カテゴリの並び替え機能(categoryテーブルにcorderを追加) ・[新機能] 投稿画面に現在時刻を挿入するボタンの追加 ・イレギュラーなコレーション(エンコード)設定のテーブルを正規化するアップグレード支援プログラムを追加(nucleus/upgrades/convert.php) ・アイテム一覧の並びを調整(ドラフト記事が先頭に並ぶようにする) ・スキン編集画面のスキン並び順を調整 ・投稿画面のレイアウトを調整 ・管理画面クイックメニューのポジションを固定す
Make images draggable and zoomable Annotate the images Share the maps with your friends Explore the maps created by others It's free. Sign up now!"one of the cooler new apps I've come across that has been built using the Google Maps API..." --Mike Pegg "the most interesting mashup I've seen in a while" --Adam Pash
Embed any image into a Google Mapというエントリーより。 Web site MapLib is a Google Maps mashup tool that lets you upload and create your own maps using the Google Maps interface we’ve all come to know and love. 自分で作成した地図と、Google Mapsのインターフェースをマッシュアップすることができる「MapLib」というサイトがありました。 自分のカスタムマップをGoogle Mapsのインターフェースで利用できるようになるので、「お宝の地図」とか「ブログ三国志」とか、勝手マップをいろいろ作ったら楽しそうです。 All Mapsでいろいろな地図を見ることができるのですが、これはなかなか面白いですよ
What Is Adobe Shockwave Player? Macromedia Shockwave is an interactive multimedia and content delivery plugin, not to be confused with… Brawl Stars Review Supercell's latest offering, Brawl Stars is an exciting multiplayer shooter featuring elements of team-based shooters,… Microsoft Access Basics – Forms, Queries and Macros Microsoft Access provides an intuitive user interface that enables indivi
平素より「PHPプロ!」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ!」ですが、サービスの利用状況を鑑みまして、2018年9月25日(火曜日)をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日(火曜日)を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 BIGLOBEのサービス一覧
さてここから、実際にAjaxアプリケーションの制作に入っていきたい。まず今回は、フォトアルバムで画像を表示する際のフレームとなる部品を作る。サンプルを見てみよう。 リンクをクリックすると、まず写真風のフレームがフェードインで表示され、画像自体はロードが完了してからフェードインする。このサンプルではXMLHTTPRequestを使っていないが、イベントやローディングをJavaScriptで制御しながら、ユーザーにはそれを感じさせないなめらかなインターフェイスを与えるこのようなアプローチは、まさにAjaxの発想だ。 今回のサンプルを試してみるために、まずはPrototypeとscript.aculo.usのソースをダウンロードする必要がある。現在Prototypeは1.3.1、script.aculo.usは1.0が正式リリースされているが、本連載では開発バージョンであるPrototype 1
■基本 [01]JavaScriptを定義する [02]外部JavaScriptファイルを読み込む [03]スタイルシートを定義する [04]NN3、NN4、NN6、IE4.x、IE5.xで動作するように記述する [05]NN4でのみ動作するように記述する [06]NN6でのみ動作するように記述する [07]IE4.x以上で動作するように記述する [08]IE5.x以上で動作するように記述する [09]IE5.5以上で動作するように記述する [10]ビヘイビアファイルを読み込む [11]IEとNN両方で動くように記述する [12]連続して関数を呼び出す [13]MacOS Xかどうか判別する [14]Safariのみ動作するように記述する [15]Safariのバージョンを返す [16]Operaのみ動作するように記述する ■構文 [01]変数に文字や数値を入れる [02]四則演算を行う
開設当初、動きや飾りのあるサイトにしたくて見よう見まねでやったことを、忘れないようにメモしたものです。 それからいろいろやってるうちに、自分でもわけのわからないことを書いていることがわかってきて、 やっと見直して全部修正し終わりました(ノ_メールを下さいませ。 参考にさせていただいたサイト様には感謝しています。 著作権の表示は、もちろんそのままにしてあります。 ここを参考にする皆さんも、著作権表示だけは絶対に消したり変えたりしないで下さい。 随分前にお借りしたものもあり、参考サイト様は閉鎖されてしまったところもあるようです。 リンク切れになってしまったサイト様は、プログラム内のURLのみ残してありますが、 移転している場合はお知らせいただければリンクを貼らせていただきたいと思っています。 自分で作ったプログラムではないけど整理して解説してるつもりなので、参考にしてくれたらリン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く