html css

CSSをHTML本文に書く方法と外部ファイルから読み込む方法

CSSをHTML本文に書く方法は以下のとおり。headタグ内にstyleタグを記述。type="text/css"として、その中にCSSを記述すればよい。 CSSの記述が終われば、/styleタグで閉じること。 styleタグ内は、(昔対応...

【html/CSS】縦横比の違う画像を均等に横並びにする方法

作成中のサイトで縦横比の異なる画像4枚を横にいい感じで並べたいと思いました。 横に並べるので縦(高さ)は全て統一したいですよね。それで以下のようにimgタグを記述して高さを100pxで固定にしたところ。 画像はこのように表示されてしまいまし...

CSSで再生ボタン(右矢印ボタン)を作る方法

丸の中に右向きの矢印があるボタンというかアイコンというか。 画像を置いても良かったのですがCSSでできないかと思い実現してみました。 手間を考えたら断然画像でやったほうが早かったと思うのですが‥ 再生ボタンのCSSとHTMLのサンプルを示し...

CSSで画像の一部を振り子のアニメーションした方法

現在作成中のサイトをデザイナーさんに診断してもらい、画面に動きを出すと面白いと思いますよと言われて以下のヘッダー画像の女の子の足をブラブラさせるやり方を探していました。 デザイナーさんのアドバイスでは 基本的に子供の足を編集した別画像データ...

【CSS】初心者のためのココだけは押さえておきたい基本の使い方

ここではCSS初心者のために基本的な使い方、書き方をお伝えしています。 CSSの書き方の基礎、初心者にも優しく解説 CSSを書ける場所は3種類ありますが、僕はCSSは外部ファイル(style.css等)に記述するのが一般的と考えています。 ...

input type=”file”ファイル選択アップロードボタンの設置まとめ

Railsでプログラミングを始めた私ですが、今回の記事はRailsじゃなくて別にhtmlやjavascriptの話だなと思い、まとめました。 事の発端はユーザープロフィール画像のアップロード機能を作っていたところです。以下のような問題が起こ...