Initializr HTML5 template

知り合いの方から頼まれてHPを作成。
今回はHTML5の勉強も兼ねてInitializr のテンプレートを使用してみることに。。。

initializr

どうせなら Bootstrap 使ってみようでテンプレートをダウンロードしたものの、よくわからな~い!あはは
最終目的地までたどり着けるのか?普段通りで組んじゃった方が早いんでは?と思いつつも作業開始

bootstrap

簡単・しかも綺麗にHTMLを組めるということなんだけど、、、結局のところ基本の構造を理解してないと進められない(笑)どういったスタイルがどこにかけられてるとか、、、基本のスタイルだけでなくレスポンシブでの動きの部分も合わせて確認しなくちゃいけない。もう、やりながら覚えるしか・・・

ダウンロードの際に、自分で組みこみたいコンポーネントとスタイルを選んでおけばいいんだけど、何が使えるのかわからないので全て組み込んだ状態でダウンロード。。。は、使ってないスタイルとかの掃除が大変。で、なんとか組み上げたのがこちら

宮城蔵王 白石パラグライダーエリアガイドshiroishi

まだ、ソース・スタイルシート共にお掃除してないです。。。ズームの時のスタイルがいまいち把握できてないし。IEでの表示確認とかも出来てないし・・・まだ、課題いっぱいです。

とりあえずの情報テキスト入力とギャラリーと問合わせフォーム組み込んだのでアップしちゃいました。ギャラリースクリプトは lightbox の進化形 SuperBox を使用。動きがGoogle imageの検索結果のような感じ。Bootstrap と競合することもなくちゃんと動きました(ほっ)

運用しながら少しずつ修正ですね・・・

2 comments

  • 横G より:

    なんたら かんたら・・・チン・プン・カン・・・爆笑!。
    仕上がりは素晴らしい!!!。

    • osaru より:

      作ってる本人も良く分かってないですからね~(笑)
      引き続き、内容をしっかり詰め込んでよいHPにしましょうね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt=""> <pre class="" title="" data-url=""> <span class="" title="" data-url="">