メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

TwitterBootstrapを使ったコーディングをある程度楽にする方法を探してみた

bootstrap

コンテンツの見せ方を変えたいなぁと思ってるんですけど、あれこれやろうとすると、もうテーマごと変えなきゃ駄目じゃんって話になってくるんですよ。だから、テーマ作るかーってなるんですけど、レイアウト、デザイン、コーディングという自分にとって面倒な作業もやらないとダメなので、なんとかこの辺軽減する為にCSSを楽になんとかする方法がないか考えてました。結果としてはCSSフレームワークを使おうってなったんですけども。

CSSフレームワーク

パーツやレイアウト等が予め作ってあるCSSのファイルです。使いたいパーツをclassやid属性で指定して要素に引っ付ければ、自分で設計しなくても、カッコイイパーツがつけれちゃいます。一般的機能を持つ共通コードがCSSで、それにid名やclass名を分かりやすい名前でつけるのでフレームワークって言われるんでしょうね。たぶん。

CSSフレームワークの色々

コードを全部提供してくれるものとか、選択したコードを提供してくれるものとか、多種多様な感じに見えるようで実は、どれもそこまで変わらない気がしました。が、それはあくまで僕個人の結論です。なのでやっぱりここはいろんな人が話題にしてるTwitterBootstrapが無難なので、これを使おうかなと思ってます。

TwitterBootstrapを使って自由に配置できるWebサービス

こんなんあればいーよなぁと思ったら、案外あってびっくりしました。いちいち公式のパーツのサンプルコード見ながらコーディングするの面倒臭いと思ってたんですよ。しかもタダです。無料です。実際レイアウトを目で見ながら好きに配置できるので、気に入らなかった時とかに、またコード調べなおしてHTML書いてclass振ってとかやらなくていいんです。

LayoutIt

そのサービスの名前はLayoutItです。かなりSNSで拡散されてるので、既出だよって思われる人も居るかも知れませんが、このサービスは良いなぁと思いました。easleってのも気になったんですが、どうやらサービスがEasel Is Shutting Downなようなので、今は使えないようです。10月一杯は使えたっぽいのですが・・・

後はjetstrapってのもあるのですが、マニーがかかる感じなのでやめました。
というわけでタダのLayoutItにしました。タダなので。

使い方

TwitterBootstrapの3系か2系かを選ぶ事が出来ます。白いボタンを押したら3系の管理画面へ青いボタンを押したら、2系の管理画面へ飛ぶことが出来ます。ダウンロードには会員登録が必要なので、予め済ましておきましょう。管理画面の右上のRegisterってシアン色のボタンから会員登録が可能です。

管理画面

bootstrap1

配置の仕方は左のメニューから、欲しい部品を選択して、ドラッグして右の画面へ貼り付けるだけです。
+マークをクリックすると、部品のリストが開閉します。

部品のオプションの設定

bootstrap2

移動させた部品にマウスを当てると、くっきりとメニューが表示されます。
削除と移動とオプションの設定ができます。ナビの色変えたり場所整えたりはオプションで出来ます。

書き出し

bootstrap3

配置が済んだら、DownLoadを押します。この時会員登録してないと会員登録させられて面倒なので、予めやっておきましょう。そうすると、ポップアップウィンドウに配置した通りのHTMLが出力されて、ZIPで落とすかHTMLだけ落とすかどうか聴かれるので、好きな方をクリックしてダウンロードするなりコピペするなりします。ちなみにDownLoadの隣は、プレビューボタンです。初心者でも簡単にTwitterBootstrapが扱う事ができるので、おすすめです。

関連記事

  1. 2011.06.23

    調整中ー

コメントをお待ちしております