Skip to content

Instantly share code, notes, and snippets.

@yutaide
yutaide / test.html
Last active March 21, 2019 08:32
slickを使った写真スライダーの実装(html)
<!DOCTYPE html>
<head>
<meta charset="UTF-8"> <!-- charsetをUTF-8にしないとスライダーの両端にある矢印が文字化けor出ません -->
<link rel="stylesheet" href="./testcss.css">
<link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-1.8.1/slick/slick-theme.css"/>
</head>
<body>
<div class="your-class"> <!-- 自分の環境に合わせて画像ファイルのパスを書き換えてください -->
@yutaide
yutaide / testcss.css
Last active March 21, 2019 08:31
slickを使った写真スライダーの実装(css)
/* スライダーのサイズと配置を指定しています。 */
.your-class{
width: 700px;
height: 250px;
margin: 0 auto; /* 横方向に中央寄せします。 */
}
/* スライダーで表示する画像のサイズを指定しています。 */
.your-class div img{
@yutaide
yutaide / style.css
Created March 22, 2019 06:30
画面の角との間にできる隙間を無くす
/*body(背景)にmargin: 0pxを指定することで
画像を貼った時にできる隙間が無くなります。*/
body{
margin: 0px;
}
/*これは画像を小さく表示させているだけです*/
img{
width: 500px;
@yutaide
yutaide / index.html
Created March 22, 2019 06:34
画面との間にできてしまう隙間を埋める(html)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- 以下のコードでcssを読み込みます -->
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<img src="./bentley.jpg">
</body>
@yutaide
yutaide / index.html
Created March 24, 2019 07:04
datepickerの使い方1
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- JQuery-uiのcss ※Datepickerにデザインを適用するために必要-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
@yutaide
yutaide / index.html
Created March 24, 2019 07:12
Datepickerの使い方2
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- JQuery-uiのcss ※Datepickerにデザインを適用するために必要-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<!-- 入力エリアを作成 idは好きな名前でOK -->
@yutaide
yutaide / page-contact.php
Created March 26, 2019 07:30
page-contact.php
<!-- 今回の記事に関係あるのは2行目〜7行目です。 10行目のごちゃごちゃしたやつは気にしないでください。-->
<?php
/*
Template Name: お問い合わせ
*/
?>
<?php get_header(); ?>
<main>
<p>お問い合わせのページ</p>
<?php echo do_shortcode('[contact-form-7 id="764" title="お問い合わせフォーム"]'); ?>
@yutaide
yutaide / header.php
Last active March 26, 2019 07:34
header.php
<!-- 記事に関係あるのは20行目です。ここで固定ページ"お問い合わせ"へのリンクを貼っています。 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php wp_title('|',true, 'right'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
@yutaide
yutaide / index.html
Created March 29, 2019 05:40
スクロールhtml
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Liberty</title>
</head>
<body>
<!-- ヘッダー -->
<div class="top">
@yutaide
yutaide / style.css
Created March 29, 2019 05:41
スクロールcss
body{
margin: 0px;
}
h1{
font-size: 150px;
color: white;
text-align: center;
line-height: 300px;
margin: 0px;