すべてのカテゴリ

Web開発において、効率的で使いやすいフレームワークを利用することは非常に重要です。その中でもBootstrapとTailwind CSSは、デザインやコーディングの面で優れたツールとして人気を集めています。本記事では、BootstrapとTailwind CSSの特徴や利点について比較しながら、それぞれのフレームワークの魅力を紹介します。 まず、Bootstrapについて語りましょう。Bootstrapは、Twitter社によって開発されたオープンソースのフロントエンドフレームワークです。その最大の特徴は、予め用意されたレスポンシブなコンポーネントとグリッドシステムを提供していることです。これにより、開発者は簡単にレスポンシブなウェブサイトを構築することができます。また、テーマやスタイルのカスタマイズも柔軟に行うことができます。 一方、Tailwind CSSは比較的新しいフレームワークですが、急速に人気を集めています。Tailwind CSSは、スタイルシートに直接クラスを適用することでデザインを構築するユーティリティファーストのアプローチを採用しています。そのため、開発者は細かいスタイルの設定を行うことなく、簡潔なHTMLコードで柔軟なデザインを実現することができます。また、カスタマイズ性にも優れており、プロジェクトに合わせてカラーパレットやスタイルを自由に調整できます。 BootstrapとTailwind CSSの比較をすると、Bootstrapはコンポーネントやプリセットスタイルが豊富で、初めて利用する開発者にとっては使いやすい特徴があります。一方、Tailwind

CSS の手抜き 〜 BootstrapVue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。Bootstrap とは？Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。Bootstrap の利用例次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げてい

CSS は後回しにしても良いWeb 開発の基本は、HTML/CSS/Javascript です。基本的にどれも勉強しなければいけないのですが、優先度を考えると後回しにできる物もあります。Web アプリを開発する場合には、CSS は後で学習する事にしても良いもの一つです。Web ページを作るには必要Web ページを作る際には、HTML と CSS は必要です。これは、目的が「Web ページ」を作ることにあるためです。HTML だけでは、ページの細かい装飾ができないので、どうしても CSS を使って体裁を整える必要があリます。一方で、Web アプリの開発を考えた場合は、少し話が違ってきます。 Web 開発でも、最終的なページの体裁を整える場合には、CSS を使う必要があります。しかし、当面の目的は、「機能」の実現になるので、HTML と Javascript を中心に進めた方が効率的です。多少、体裁が悪くても機能は検証できるので最初は、HTML と Javascript で CSS は後回しにするか、最低限の利用でも問題ありません。CSS は手抜きもできるもう一つの理由は、Web アプリの開発の場合は、ある程度、手抜きができます。 Bootstrap などを利用すると、CSS の細かい部分を知らなくてもある程度の体裁を簡単に整える事ができます。基本的な CSS の記述を Bootstrap が提供してくれているので、細かい記述は書く必要が無いからです。もちろん、Bootstrap などでカバーされない部分もあるので、最終的にはその部分は CSS を使って記述する必要があります。しか

私、趣味で不動産賃貸業、株式投資、ラケットボール、ポーカーと色々と今も趣味や仕事を持っています。会社員時代は半導体回路設計なんかをしていたのですが、かなり緻密な性格なお仕事ですが、結構おおざっぱだったりします。。しかし、お仕事は気合いをいれていたので、緻密な作業をタンタンとこなしていました。そして、会社員を先日、卒業したのですが、そういえば、自社サイトのトランクルーム、バイク駐車場サイトが他の方に作成して頂いたので、自分で作成してみようという事で、作成したのがこちらです。と言ってみて貰いたかったのですが、どうもサイトをこちらに載せるが禁止されているようで、残念なばかり。。ポートフォリオに載せたので、是非ご覧ください。BOOTSTRAPベースで、WordPressサイトに埋め込み作成しています。通常のWordPressのテーマで作成するより、配置が自由ですし、色合いも通常使用のテーマよりも自由に設定できたりします。そして、これはWordPressベースの作成のため、ブログ記事作成の投稿なども簡単に出来る為、SEO対策も万全にできます。このようなサイトを作成されたい方、是非是非ご検討ください。私自身、事業を幾つかしております。集客やSEOの知識はあり、集客のご相談にものれると思います。！！

前回作成したWebアプリを改良し、スマホ版にしました。前回のブログは、こちらです。https://coconala.com/blogs/1890784/12701Webアプリの動作最初の画面です。タイトルの「ツイッター検索002」の左にある点（ドット）をクリックします。なんと！スマホ対応の画面になります。※以下の表示は、PCのブラウザで幅を狭くした場合の画面です。ログインすると以下の画面です。上右のハンバーガーメニューをクリックします。メニューの「ツイッター」をクリックします。「一覧」をクリックします。下の登録ボタンをクリックします。データを入力します。登録後の画面です。※「#PHP」が登録されたのが確認できます。 ※50件まで登録できます。「#PHP」の訂正ボタンをクリックします。「#PHP」を「#PHPzzz」にします。訂正後の画面です。※「#PHPzzz」に訂正されているのを確認できました。「#PHPzzz」の削除ボタンをクリックします。削除後の画面です。※「#PHPzzz」が削除されているのを確認できました。データを３件追加します。「ハンバーガーメニュー　＞　ツイッター　＞　ツイッター検索」をクリックします。※ログイン後の初期画面と同じです。 ※日付は本日の日付です。 ※一覧のすぐ上に表示されている日付で検索します。日付入力の左にあるチェックボックスをチェックし、送信ボタンをクリックします。※データの詳細が確認できます。 ※スクロールした画面ですが、メニュー部分は上に固定化されます。 ※文字列の変換が確認できます。変換可能な文字列は画面にある4種類です。 ※{oha}お

ページによっては余計なお世話をしてくれるケースがあるので、header.phpを切り分ける必要がありそうです。切り分け方は簡単！例えばbootstrapを使う場合はheader.php読み込みは通常通り　<?php get_header(); ?>でOK！使わない場合はheader-other.php(otherの部分は適当で良さそう　topとかpageとか）置き場所は同じ階層です。読み込みは<?php get_header('other'); ?>で読み込めます。シングルクォーテーションをお忘れなく！table多用する時とかは便利ですよね〜〜！