Webサイト

2023/12/24

【HTML/CSS】リストの最初の要素のみデザインを変更

横並びの要素の内、一番左以外にmarginをつけたいこのような場合に、リストの最初の要素のみmargin:0を適用したいと考えます。 .navigation li:first-child{ margin: 0; } このようにすれば、liの初めのものだけにmargin:0を適用できます。

Webサイト

2023/12/24

【HTML/CSS】画像のはみ出しを防ぎたい

画像がはみ出す以下、画像のように親の要素サイズに画像が収まらない場合があります。対策 cssにて親の要素に以下の設定を行います。 overflow:hidden; 対策結果以下画像のように、親要素の範囲のみ画像が表示されるようになりました。真っ青だけど・・・。

Webサイト

2023/12/24

はじめに HTMLにてWebページを作成する際に、背景画像を設定することはよくあります。今回、画像ファイルのパス指定にてハマったので対応をまとめます。画像のパスを指定しているのに画像が表示されない以下のようなCSSを作成して画像ファイルを指定していました。しかし、サイトを表示しても画像が表示されません。 background-image: "imgae/Logo@2x.png"; 修正方法 CSSにてパスやURLを指定する時には、url()関数を使用する必要があるようです。 background-im ...

Webサイト

2023/12/24

【随時更新】HTMLのheadでよく使う項目まとめ

はじめに Webサイト製作を行なっていく上で、headによく使用する項目を記載していきます。 headとは HTMLのhead部分は、実際には表示されない部分となります。この部分にはタイトルやCSSのリンク、メタデータ(文字エンコード等)の情報を設定します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test title</title> </head& ...

Webサイト

2023/12/24

jQueryについて

はじめに javascriptを学習する過程で、jQueryを学習したので、本記事にまとめます。ただ、javascriptを学習した後だと、難しいことはありませんでした。 jQueryオブジェクトの作成 jQueryを作成する場合は、まずjQueryオブジェクトを作成する必要があります。 jQueryオブジェクトは以下のようにして作成します。 $('セレクタ') セレクタオブジェクトの作成時に使用するセレクタは、CSSのセレクタと同じです。以下にいくつかの例を挙げます。 // id $('#id名' ...

Webサイト

2023/12/24

【javascript】関数について

定義方法以下にいくつかの関数定義方法を紹介します。ここでは、「sample」という関数名(変数名)で定義しています。関数名は自由ですが、どういった処理をするか関数名からわかるような関数名にすることを推奨します。関数宣言一番ポピュラーな方法のようです。以下のように定義します。 function sample(){ // 処理を記載する } 関数式以下のように定義します。 const sample = function(){ // 処理を記載する } 上記では、関数定義してsampleという変数 ...

Webサイト

2023/12/24

HTMLの基本知識

はじめに当面は、ウェブサイト制作の副業にて収入を得ることを目標とするため、まずHTMLについて学習を行っていきます。本記事では、学習した内容をまとめていきます。学習に使用したもの今回、学習で使用するのはProgateというプログラミング学習サイトになります。Pragateは一部有料ですが、基本的には無料です。HTML・CSSの学習は無料で全コースの受講が可能となっています。学習内容タグ HTMLでは、テキストを「タグ」というもので囲っていきます。こうすることで、テキストが「見出し」や「リンク」と ...