中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

CSS

シンプルなHTMLカレンダー。Google Calendar API v3で祝日表示。

シンプルなHTMLカレンダーを作成。祝日表示に「Google Calendar API v3」を使用。 詳細は以下のブログ。

スマホ対応のHTML(TABLE)クリッカブルマップ「日本地図」を作成。

以前、MyHome Portalの機能の一部のために作成したクリッカブルマップ「日本地図」を一部手直しして、スマホ対応のものを作成した。 詳細は、以下に。

CSS:ブロック全体は中央揃え+中の要素は左寄せ

CSS

別のブログに、「ブロック(コンテナ)全体は中央揃え+中の要素(複数画像)は左寄せ」をJavaScriptを使わないでCSSのみで実現できる方法を書いたので、リンクだけ載せておく。 http://2ndart.hatenablog.com/entry/2017/04/11/193206

Ver.5.03:ボタンデザイン変更可、チルトシフト画像

CSS

MyHome Portal Ver.5.03をリリースしました。 http://ok2nd.web.fc2.com/download.html ボタンのスタイルシート(CSS)を、common.cssとは別ファイルとして独立させました。ボタンのスタイルシート(CSS)サンプルとして、角丸タイプ、グラデーションタイプなど…

aタグを余白含めてクリッカブル+上下中央揃え

CSS

<a>タグを余白部分も含めてクリッカブルにするには、 display: block; を使えば良いが、ブロック内で、上下(縦位置)中央揃えするための vertical-align: middle; とは相いれない。 複数行文字列も含めて、ブロック要素内で上下中央揃えをJavaScript/jQueryやCSS</a>…

Ver.3.32:CSS関連修正

CSS

MyHome Portal Ver.3.32をリリースしました。 http://ok2nd.web.fc2.com/download.html CSS関連部分を、一部修正しました。 相変わらず、CSSまわりでは苦労します。

DIVの組み合わせで思い通りのレイアウトは難しい。

CSS

MyHome Portal Ver.2.60で、アルバムの上位ディレクトリを、左側に表示できるようにしましたが、ウインドウの下端一杯に広げたかったのですが、方法がわかりませんでした。CSSはやはり難しいです。HTMLとCSSを一部抜きだすと次のような感じです。ウインドウ…

Ver.2.26:ページbody横幅を自分好みのサイズに

CSS

MyHome Portal Ver.2.26をリリースしました。 http://ok2nd.web.fc2.com/download.html ページ全体のbodyの横幅の定義をCSSファイルでなく、実運用定義ファイルで指定できるように変更。 実運用定義ファイルのPAGE_BODY_STYLEで定義してください。max-width…

Ver.2.25:textarea関連の修正

CSS

MyHome Portal Ver.2.25をリリースしました。 http://ok2nd.web.fc2.com/download.html CSSで、 * {margin: 0px; padding: 0px; } とすると、Google Chromeだけ、textareaの左端のカーソルが見えなくなってしまう問題の対策をしました。以下をCSSに追加しま…

Ver.2.23:デザイン修正&不具合修正

CSS

MyHome Portal Ver.2.23をリリースしました。 http://ok2nd.web.fc2.com/download.html 住所録で、日本地図で都道府県を選択すると、分類の選択がリセットされてしまう問題を修正。 RSSの配置を横4個固定でなく、ウインドウサイズに合わせて可変にしました。…

テーブルタグによる日本地図

CSS

MyHome Portal Ver.2.19で追加した住所録の日本地図は、テーブルタグで作成しました。 デザイン的には、 <なぜ人はテーブルタグで日本地図を作るのか> http://d.hatena.ne.jp/wata300/20060308/p1 の「いつもガイド - ゼンリンの詳しい地図サイトより」の…

CSSで気になっていることが2つあります。

CSS

MyHome PortalのCSSで気になっていることが2つあります。 一つ目は、IEでウインドウの横幅を狭くすると、下図のようになってしまうことです。Google Chrome等のブラウザではきれいに2段になります。できれば、IEでもこうなってほしいのですが、どうすれば…

Ver.1.36,1.37:CSSによるロールオーバー画像拡大

CSS

MyHome Portal Ver.1.36,1.37を リリースしました。 http://ok2nd.web.fc2.com/download.html Ver.1.24でアルバムの画像データ表示をscripts/php/img-size-change.phpを使わない方法に変更したが、カレンダーのアルバム連携表示ではそのままになっていたのを…

Ver.1.23:HTMLテーブルCSSスタイル シミュレーション

CSS

MyHome Portal Ver.1.23を リリースしました。 http://ok2nd.web.fc2.com/download.html 「ツール」に「HTML テーブル CSSスタイル シミュレーション」を追加。 使いそうなテーブルレイアウト複数パターンのbackground-colorやborder-widthなどを一括変更し…

Ver.1.14:レイアウトの見直し&ブラウザ間の差異を調整

CSS

MyHome Portal Ver.1.14を リリースしました。 http://ok2nd.web.fc2.com/download.html textarea内の文字サイズ、種類をページ内全体と同じになるようにCSS(スタイルシート)の見直しをしました。IE6、Firefox、Google Chromeの各ブラウザでFORM入力画面がな…

HTMLカラーチャート

CSS

MyHome Portal では、各コンテンツのカテゴリ分けなどで色を付けられます。 色指定は、HTMLのカラーネームかRGB値で指定します。 カラーネームとRGB値の一覧をカラーチャートとして用意しています。 カラーチャートの部分だけをHTML化したものを、下に置きま…

MyHome Portal Ver. 1.04 リリース

CSS

MyHome Portal Ver. 1.04を リリースしました。 http://ok2nd.web.fc2.com/download.html style/original/common.css:CSSに以下を追加。 FirefoxやGoogle Chromeではレイアウトが崩れてしまう件の対策。 (サブヘッダーのメニューやユーザー切り替えの部分) …

MyHome Portal Ver. 1.03 リリース

CSS

MyHome Portal Ver. 1.03を リリースしました。 http://ok2nd.web.fc2.com/download.html style/original/common.css:CSSに以下を追加。 FirefoxやGoogle Chromeではレイアウトが崩れてしまう件の対策。by ブログコメントANさん #page_header:after { conte…

FirefoxやGoogle Chromeでレイアウトが崩れる

CSS

MyHome Portal の検証は、IE6で行っています。 FirefoxやGoogle Chromeではレイアウトが崩れてしまいます。CSSは苦手です。 例えば、タイトル欄やコンテンツや/ユーザー切り替え欄の背景色がただしく適用されません。 どなたか、アドバイスください。 問題の…