【CakePHP】初心者向け・レイアウトの変更方法 – atomicbox
前回、【CakePHP】初心者向け・基本の使い方に引き続きCakePHPの基本的な使い方について。 コントローラ（Controller）とビュー（View）を使って、URLをぽちぽちと指定すると自分が作ったViewのctpファイルの内容が画面に出てくる…ところまでやったので、「次はModelの使い方…データベースかな？」と思いきや今回は見た目、ヘッダーやフッターのレイアウトの話です。とりあえず見た目から入ってみましょう。 前提 CakePHP2系の内容になります。 レイアウトとは CakePHPでは、特に何もしなくてもなんとなくレイアウトされた状態でページができます。【CakePHP】初心者向け・基本の使い方でExampleというページを作りましたが、こんな感じの見た目で出てきます。 勝手にCakePHPのヘッダーとフッターがついていたり、CSSも指定していないのにh2タグが赤字になってい
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
CSS勉強会
3. CSSって何? Cascading Style Sheets の略 スタイルシートの一種 スタイルシート : HTML の各要素をブラウザにどう表示させるかを定めたもの 古いブラウザには JSSS (JavaScript Style Sheets) というものを実装をしたものもあったが、それは無視 5. CSSって何? <h1> 勘違い学会 </h1> が ( 大きくて太いフォントに改行 ) と表示されるのは、ブラウザのデフォルトシートの効果 h1 { display: block; font-size: 2em; margin: .67em 0; font-weight: bolder; } (http://www.w3.org/TR/CSS21/sample.html を元に作成 ) 6. セレクタ { プロパティ : 値 ;} h1 { display : block ; fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者も分かる！レスポンシブ・デザインの作り方
