css3

デアゴスティーニ風|週刊 Webサイトを作ろう #01

今回最初にお届けするのは、WebサイトのベースとなるHTMLファイルです。合計10週(回)に渡って、完成に近づけていきますのでご自身のパソコンなどに保存してください。

1.ファイルの保存

まずは、上記のダウンロードボタンを押して、ご自身のパソコン内の適当な場所(マイドキュメントなど)に保存してください。

2.Webブラウザで開いてみる

もっとみる
かたじけない
3

Horizontal-align あれば絶対使う

リズムを聞いて譜面にする練習は続いている。きっと譜面読む力がつくはず。

相変わらず、vertical-alignが思った通り働かない。高さ指定している時くらい内包するコンテンツの縦位置をきっちり配置して欲しい。あとtext-alignもinlineのブロック要素に使うのは気がひけるので、horizontal-alignとかにして欲しい。

昼休みに銀行へ。たかだか待ち人数5人くらいなのに30分以

もっとみる

🐛CSSでoverflowプロパティ使用時に右と下のpaddingやmarginが効かないバグ

overflowプロパティにautoやscrollを指定してスクロール可能な領域を作った際、paddingプロパティを指定するとpadding-rightとpadding-bottomだけ描画されないバグがあります。

padding-rightが描画されない

まずは普通に横スクロールを実装してみます。

<div class="scroll"> <div class="scroll_inne

もっとみる

🚧随時更新!IEやEdgeなど特定ブラウザのみに効く最新CSSハックまとめ

特定のブラウザの特定のバージョンにのみ適用させられるCSSハックのまとめです。少しずつCSSハックの発掘と検証を行なっていきます。できることならCSSハックを使わない方がいいのですが、CSSの上書きだけだと正常なブラウザにまで影響してしまう場合などに重宝します。以下は発掘済みのリストになります。購入する際の参考にしてみてください。

特定のバージョン

Internet Explorer

7,8

もっとみる

お勉強日記 Vol.2

昨日に引き続き備忘録程度に…。

HTML5&CSS3

今日学んだところはフローティングボックスの配置と、後続のボックスが同列に配置されない方法について。

floatで100%埋まるよう設定していれば問題ないようなのですが、根本的な解決にはclearfixというテクニックを用いるそうです。

clearfixは、椅子取りゲームといったところでしょうか。3人で椅子取りゲームするのに3つ椅子が用

もっとみる

お勉強日記 Vol.1

明日から出張先の勤務地へ出勤です。

上京する前から「長期出張中は勉強をしたい」と常々申しておりましたので、のんびりとプログラミング初心者の勉強の記録を残していこうと思います!

プログラミング初心者故に、表現に誤りがあったりするかもしれませんが、どうぞあたたかい目で見守ってくださいまし…。

HTML5&CSS3

まず出てきた単語は「段組み」でした。

1段で構成されたページは、1行あたりの

もっとみる

密林は本屋である

お飾りは明日まで。お片付けの後に七草がゆ。

1月の部活スケジュールと昨日受けとった返信メイルを見ながら、大きな目標を考えてみる。やはり「音楽をずっと続けて欲しい」が究極なのかも。

仕事初め。CSS初め。mix-blend-modeはとても便利なんだけれど、IEとかEdgeで全く効かない。まあもうPCでの閲覧は50%を切ってるし、いくらIE信者の多い日本とはいえだいぶ割合減ってるっぽいのでいいか

もっとみる

ステージの空気を塊ごと振動するイメージ

昨日に引き続き八王子へ。TAMAアンフェス高校の部に出場の長女の応援です。長女の応援となると打楽器アンサンブルをたっぷり堪能できるのが嬉しい。今年は音程(鍵盤メイン)ではなく打の響きで聴かせる曲だから審査員次第と言っていました。確かに、打なんだけど、振動がホール全体に伝わってとても良いサウンドでした。娘はチャイムとウッドブロックなど。チャイムの繊細な音色にびっくり!よく練習したなぁ。2年生はもちろ

もっとみる

魔が差して真に受ける

今日は職場でクリパランチらしいのでお弁当お休み。

昨夜、急に思い立ってK先輩に一通送る。打ち上げで仰ってたこと真に受けるけど、本当にお願いしますとレッスンの依頼をしました。魔が差して「魔に受ける」になってもうさっぱりおバカなメイルに一人で赤面しながらなんとかほか2人の依頼も目処をつけました。月1でセクションレッスン計画です。ひとつひとつ叶えて行く。

今週の中学朝練はDes durに慣れるを目標

もっとみる

rem em が出てきてギョッとした人へ。

※このエントリはコーディング初心者向けの内容です。

単位がpxじゃない!?

コーディング学習を始めた皆さんお疲れ様です。そろそろpaddingやmarginには慣れた頃でしょうか。沢山のサイトを観察している方は、○○pxのfont-sizeがどのくらいの大きさに見えるのかも分かってきたかと思います。

.section_ttl { font-size: 2.6rem; font-wei

もっとみる