これまで(2019年10月13日以前)

Webデザイン

カテゴリー: コーディングルール  閲覧数:651 配信日:2019-10-13 10:42


履歴


~ 2013年
PHPを利用して、ドキュメントルート外の外部CSSファイルを、外部CSSとして読込

2013年 ~ 2018年
PHPを利用して、ドキュメントルート外の外部CSSファイルを、内部CSSとして読込


2018年 ~
minifyライブラリを使用

P7


▼footer.php
・minify化したファイルを読み込んでいるが、内容は主なライブラリCSSファイルのみ
・ここではなく、別途読み込みしているライブラリCSSファイルもある
<link href='/min/all.css' rel="stylesheet">

▼layout.php
・なぜここで読み込んでいるのか不明
・このCSSの用途不明
<link href="//fonts.googleapis.com/earlyaccess/notosansjp.css" rel="stylesheet">
jQuery
$(this).css({ "position":"fixed", "left":"0px", "top":"0px" });
$("#leftnaviimg").css({ "position":"fixed", "left":"-110px" });

▼common_siteheader.php
・「プロジェクトCSS」、「ライブラリCSS」、「サイト固有のCSS」を読み込んでいる
・「ライブラリCSS」を異なる箇所で読み込んでいるため分かりづらい
・書き方も「file_get_contents」と「include」が混在して分かりづらい
・「サイト固有のCSS」を'DOCUMENT_ROOT'以下に配置している理由は、アイコンの名残
<style>
 <?php
   echo file_get_contents("/var/www/xxxx/views/common/css/style.min.css");
   echo include( realpath( dirname( __FILE__ ) ).'/../common/lib/light-modal/light-modal.min.css');
   echo include($_SERVER['DOCUMENT_ROOT'] ."/bootstrap/css/style-site.css");
 ?>
</style>


HTMLへ直書
複数ファイルで、HTMLへstyle属性を直書している
<style>
 .hoge {
   position: fixed;
   bottom: 3rem;
   right: 15px;
   background: #<?php echo $randColorAry[0]; ?>;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: #fff;
   text-decoration: none;
   border: 1px solid #<?php echo $randColorAry[0]; ?>;
   z-index: 99;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
 }
</style>


同様のプロジェクト
・P15
・P21
・P22
・P41
・P44

週間人気ページランキング / 2-16 → 2-22
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 6
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
2 画像縦横比の問題 | 画像 4
2 RGBの種類 / ビットカラー | RGB(色) 4
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
3 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 3
3 RGB ⇔ Lab | 色変換(色) 3
3 「bgcolor」「background-color」「background」の違い | CSS 3
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 resizeが効かない場合は、min-heightを設定してみる | CSS 2
4 Create Link(Chrome 拡張機能) カテゴリー 2
4 色空間の範囲 | 色変換(色) 2
4 ユーザー個別の設定情報が格納されているレジストリキーを削除 2
4 Material Design 2014 年 | Material Design(色) 2
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
4 Design 0 2
4 Chromeブックマーク(ブラウザ) カテゴリー 2
4 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 2
2026/2/23 5:05 更新
指定期間人気ページランキング / 2020-5-30 → 2026-2-22
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8906
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4611
3 Design 0 4007
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3789
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2776
6 RGBの種類 / ビットカラー | RGB(色) 2742
7 「bgcolor」「background-color」「background」の違い | CSS 2083
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2012
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1975
10 16進数カラーコード / 2進数 1880
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1876
12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1708
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1694
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1626
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1549
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1531
17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1413
18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1386
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1236
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1218
2026/2/23 5:05 更新