今回の記事ではこんな悩みにお答えします。楽天トラベルカスタマイズページをまとめてみて楽天トラベルのカスタマイズページってどんなもの?ビジネスマンの出張には必ずと言っていいほど使用されている楽天トラベル。『楽天トラベルカスタマイズページ』という機能があります。ビジネス・旅行の拠点にアクセス抜群。万葉倶楽部、★2018年10月2日メンテナンスの為休館日となります★3日は午前9時より営業開始。JR神戸駅、ハーバーランド駅より徒歩5分。1泊648円どちらもデザインが全然違いますよね。『楽天トラベルカスタマイズページ』は、HTMLとCSSを使う事で自由にデザインする事ができるのです。HTMLとCSSについてはこちらの記事も参照ください。今回の記事ではこんな悩みにお答えします。ホームページを作れるようになるためには、いくつかのスキルが必要になります。追加で覚え...『楽天トラベルカスタマイズページ』のルール自由にデザインできる『楽天トラベルカスタマイズページ』ですが、ページをつくるにあたり下記のようなルールがあります。あることまず横幅950pxは、先ほどのホテルの例でいうとこの画面。左側が検索フォームになっていて、右側のホテルの詳細の幅が950pxで固定になっています。最近は横幅をいっぱいに使ってレイアウトするホテルが多いようです。使えるようにする抜け道もあるようなのですが、今回は省きます。3番の外部リンクはそのままの意味で、Facebookページやホテルのホームページにはジャンプできないようになっています。(ファイルを保存するときにチェックがかかります。『https』化された場所に保存する必要があります。(こちらもファイルを保存するときにチェックがかかります。外部サーバーに保存したほうが無難かなと思っています。何度も作っているうちに、アオキスライドショーってどうやってつくるんだったっけ・・アオキメニューの作り方ってどうだっけ・・アオキ画像を3つ横に並べたいんだけど・・・アオキ明朝体とゴシック体の指定の仕方はどうだっけ・・といった事を毎回のように調べていたので、よく使う機能だけをしぼったテンプレートを作ってみる事にしました。link『楽天トラベルカスタマイズページ』のテンプレートを作ってみたページはこちらです。右クリックで『ページのソースを表示』を押してもらうと、HTML、CSSそれぞれ確認いただくことができます。画像ファイルはこちらにまとめてダウンロードできるようにもしておきます。画像ファイル※ちょっと不格好ですがご愛嬌でお願いします。横並び(いろいろ方法ありますがtableとliでやってます)マウスホバーフォントの指定などを項目ごとにまとめています。多少のHTMLとCSSの知識が必要になるので、もしHTMLとCSSがまったくわからないという場合は、こちらの記事を参照してみてください。もんプロ~問題発見と解決のためのプログラミ...ホームページのつくり方を3ステップでわかりやすくまとめてみた【初心者向け】https://coinbaby8.com/sidebusiness-homepage.htmlホームページをつくってみたいんだけど、どこから始めたらいいかよくわからないんだよなぁ・・今回の記事ではこんな悩みにお答えします。ホームページを作れるようになるためにホームページを作れるようになるためには、いくつかのスキルが必要になります。https://coinbaby8.com/css-how-to-write.htmlホームページをつくるなら必須な『HTML』と『CSS』。最近はスマホが増えたこともあり、パソコンでもスマホでも見やすいようなレイアウトが重視されるようになってきました。『CSS』の書き方も、パソコン版だけでよかった2002年頃とは随分変わってきたなと思います。『bodyタグ』は省いてコピーするようにしてください。—のすぐ下でCSSを読み込ませています。『bodyタグ』の後でCSSを読み込ませる事はまずないと思うのですが、こちらも楽天トラベルの仕様でこの場所でOKです。いうファイル名は避けたほうが無難です。こちらも楽天トラベルで使用しているのか、まれにバッティングを起こすようです。続いて、ulで囲った箇所はそれぞれにジャンプするだけなのではしょって、sectionタグで囲った範囲を使用するようにしてください。ルールを守った状態で設定する事ができます。『楽天トラベルカスタマイズページ』のトップ画面に最もよく使われるであろうスライドショーについて。必要なソースは下記です。画像だけ差し替えてもらえばOKです。設定にする必要があります。メニュー(6つ)続いて『メニュー』(6つ)。こちらはHTMLだけで実現しています。実際にページを作っていく中でよく使う要素をまとめてみました。毎回テストしたりといった時間をできるだけ効率化して、スピードアップを図っていく事で、ちょっとずつですが作業時間短縮ができてきます。アオキ普段からよく使う機能などはまとめておくと、次回からスピードアップが図れますね。楽天トラベルカスタマイズページをまとめてみて実際に『楽天トラベルカスタマイズページ』を作成する機会はあまりないと思ったりはしますが、HTML、CSSを使ってデザインする、レイアウトするといった流れは一般のホームページも同じです。効率化を意識していくことで、はじめは面倒くさくても、徐々にスピードアップしてくると実感できます。アオキちょっとずつスキルアップして、無駄なく仕事を進めていきたいものですね。楽天トラベルのAPIを使って新しいホテルを探すサービスをつくってみました。こちらもチェックください。user新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】https://coinbaby8.com/search-new-hotel-by-using-rakuten-api.htmlプログラミングのスキルが徐々に上がるにつれ、つくりたいものがたくさんでてきています。今回つくったのは、『新しいホテルを探すサービス』です。正確には、『楽天トラベルに新しく登録された順に検索できる』サイトになります。実際のサイトはこちら。)mアオキのツイッターアカウント。HTML検索プロフィール世界のアオキ問題発見と解決のための新時代の教育を。STEAMも、プログラミングも。テスト用の知識ではなく世界を変える知識を。CoderDojo熊本支部の中の人。難しい事をわかりやすく伝える事に喜びを感じております。尊敬する人はレオナルド・ダ・ビンチ(雑食系天才)。チャンピオン変更のお知らせ2018年9月より、子供向けプログラミング教室、『CoderDojo熊本』の初...2019.12.5高校生向けの『新・情報の科学』なる教科書を読んでみ...2020年に小学生でプログラミング必修化になり、2021年、2022年と段階的...2019.11.19バビロン大富豪の教え〜姪っ子へのプレゼントのつもり...小学校5年生の姪っ子から、とあるマンガを買って欲しいとおねだりされまして。